概念
Vue.js 一套构建用户界面的渐进式框架,Vue 只关注视图层,采用自底向上增量开发的设计;它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue.js 模板语法
Vue.js 使用了基于HTML 的模板语法,允许开发者声明式的将 DOM 绑定至底层 Vue 实例的数据,它的核心是一个采用了简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
插值
- 文本:数据绑定最常见的形式就是使用 {{...}} 双大括号的文本插值。
- HTML:使用 v-html 用于输出 HTML代码。
- 属性:HTML中的属性值应该使用 v-bind 指令。
- 表达式
指令:带有 v- 前缀的特殊属性,用于在表达式的值改变时,将某些行为应用到 DOM上。
- 参数:在指令后面以 : 指明。
- 修饰符:以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
用户输入:在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
过滤器:Vue.js 允许自定义过滤器,被用作一些常见的文本格式化。
函数接受表达式的值作为第一个参数;可以串联;是JavaScript函数。
缩写:Vue.js 为两个最为常用的指令提供了特别的缩写:v-bind 和 v-on。
条件语句
- v-if:指令将根据表达式的值(true或false)来决定是否插入元素。
- v-else:可以用它给 v-if 添加一个 else 块。
- v-else-if:用作v-if 的 else-if 块。可以链式的多次使用。
- v-show:根据条件展示元素。
循环语句
v-for 指令,需要以 site in sites 形式的特殊语法,sites 是源数据数组并且 site 是数组元素迭代的别名,它可以绑定数据到数组来渲染一个列表。
- 迭代对象,通过一个对象的属性迭代数据。
- 迭代整数,也就是循环整数。
计算、监听属性
计算关键词:`computed
监听关键词:watch,通过它来响应数据的变化。
样式绑定
class 和 style 是HTML元素的属性,用于设置元素的样式,可以用 v-bind 来设置样式属性。
事件处理
v-on 指令,接收一个定义的方法来调用。
事件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
组件
组件是 Vue.js 最强大的功能之一,它可以扩展HTML元素,封装可重用的代码。组件系统可以让我们用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。
注册全局组件语法:Vue.component(tagName, options)