龙空技术网

vue.js初入门(四模板语法)

看到他请叫他快去学习 153

前言:

眼前兄弟们对“js双中括号”大概比较看重,我们都想要分析一些“js双中括号”的相关知识。那么小编同时在网络上汇集了一些关于“js双中括号””的相关文章,希望看官们能喜欢,小伙伴们一起来了解一下吧!

文本

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

标签: #js双中括号