vue语法（持续更新）

1 语法

1.1 插值

数据绑定的形式：Mustache语法（双大括号）。

（1）文本插值

name:{{text}}

当data数据对象里的name值变化时，span标签的文本也会相应改变，当只需渲染第一次数据，后面数据变化时不需要改变的情况下，使用v-once指令实现。

（2）html值

双大括号会将数据解释为普通文本，而非html代码，使用v-html：

（3）属性赋值

Mustache语法不能作用在标签属性上，需要使用v-bind指令：

或者简写为：

在布尔特性情况下的属性值，存在即表示值为true，如果值为 null、undefined 或 false，则改属性没有效果

---

1.2 表达式

表达式可有js表达式和过滤器组成，js表达式是各种数值、变量、运算符的综合体

（1）{{number + 1}} //加减乘除等操作

（2）{{number == 1？yes : no}} //三目运算

（3）{{str.split(',')}} //字符串操作

（4）{{spli(message)}} //在methods写spli方法对message进行操作，示例：

var app = new Vue({

el: '#app',

data: {

message: 'abcdefr',

},

methods: {

spli(num) {

return 'yes'

}

}

})

（5）{{message | capitalize}} //capitalize是自定义过滤器,Vue.js2.0已经移除了内置过滤器

filters: {

capitalize(value) {

if(!value) return ''

value = value.toString();

return value.charAt(0).toUpperCase() + value.slice(1)

}

}

---

1.3 指令

指令的作用是当表达式的值改变时，将其产生的连带影响，响应式地作用于dom。

图1 指令图解

1.3.1 v-text

v-text：string类型，更新标签的内容，

// 效果一样，一个更新标签的全部内容，一个更新部分类型

{{data}}

1.3.1 v-html

v-text：string类型，更新标签的innerHTML，