文本
数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值:
无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。
通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。
效果:
输出html
双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你需要使用v-html指令:
效果:
属性
双大括号不能在HTML属性中使用,该使用v-bind指令:
效果:
这对布尔值的属性也有效——如果条件被求值为false的话该属性会被移除
使用JavaScript表达式
有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
过滤器
Vue.js允许你自定义过滤器,被用作一些常见的文本格式化。过滤器应该被添加在双大括号插值的尾部,由“管道符”指示:
如下过滤器代码实现大写首字母:
过滤器可以串联:
过滤器是JavaScript函数,因此可以接受参数:
这里,字符串‘arg1’将传给过滤器作为第二个参数,arg2表达式的值将被求值然后传给过滤器作为第三个参数。
指令
指令(Directives)是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式(v-for是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。回顾我们在vue.js初入门二中看到的例子:
这里,v-if指令将根据表达式seen的值的真假来插入/移除p元素。
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind指令可以用于响应式地更新HTML特性:
在这里href是参数,告知v-bind指令将该元素的href特性与表达式url的值绑定。
另一个例子是v-on指令,它用于监听DOM事件:
v-bind和v-on,详见vue.js初入门二。
缩写
v-bind缩写
v-on缩写
修饰符
修饰符(Modifiers)是以半角句号.指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault():