vue之插值

插值

文本

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

如

<p>Message:{{Msg}}</p>

 

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

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

<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML，v-html

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

v-html命令

 

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

 

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

 

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

特性

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

<div v-bind:id="dynamicId"></div>

 

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

如

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>

 

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

指令

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

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

如

<p v-if="seen">现在你看到我了</p>

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

 

参数

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

如

<a v-bind:href="url">...</a>

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

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

<a v-on:click="doSomething">...</a>

修饰符

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

如

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

<form v-on:submit.prevent="onSubmit">...</form>

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

 

缩写

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

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

<a v-bind:href=”url”>...</a>

<a :href=”url”></a>

 

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

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>