vue之插值

插值

文本

数据绑定最常见的形式就是使用mustache语法{{}}的文本插值

如

Message:{{Msg}}

 

Mustache标签上中会被替换上数据对象上msg属性的值，无论何时，绑定的数据上对象的msg发生变化，插值部分的内容也会发生变化

一次性插值，数据改变不会跟随改变，使用v-once指令

这个将不会改变: {{ msg }}

原始HTML，v-html

{{}} 会将数据解释为普通文本，而非HTML代码，如果想让插值部分变为真正HTML，使用

v-html命令

 

Using mustaches: {{ rawHtml }}

Using v-html directive:

 

修改span样式，插值中的rawHtml内容会相应改变

 

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

特性

Mustache不会作用在html特性上，遇到这种情况使用v-bind

 

模板中可以使用js表达式，如加减乘除等，不是带分号语句和控制语句，有个限制就是，每个绑定都只能包含单个表达式

如

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

 

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

指令

指的是带有v-前缀，指令特性预期值是单个的js表达式，v-for例外

指令指责：表达式值发生改变，产生连带影响，响应式作用于dom

如

现在你看到我了

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 

 元素。

 

参数

一个指令接受一个参数，指令名称加冒号表示，v-bind指令用于接受响应式地更新HTML特性

如

...

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

...

修饰符

修饰符是以“点”指明的特殊后缀，用于指出一个指令应以特殊方式绑定

如

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

...

在接下来对 v-on 和 v-for 等功能的探索中，你会看到修饰符的其它例子。

 

缩写

Mustache语法中v-前缀对于 v-bind和v-on提供了缩写

v-bind缩写, 冒号替代v-bind

...

 

v-on缩写，@替代v-on:

...


...