vuejs初入门四模板语法

文本

数据绑定最常见的形式就是使用“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():




转载请注明:http://www.aierlanlan.com/cyrz/4491.html

  • 上一篇文章:
  •   
  • 下一篇文章: