Vue-模板语法

以下内容均来自Vue官网:

模板语法

文本:

<span>Message: {{ msg }}</span>

Mustache标签将会被替代为对应数据对象上msg属性的值.无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新.

通过v-once指令,我们也能执行一次性地插值,当数据改变时,插值处的内容不会更新;

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

原始HTML:

双大括号会将数据解释为普通文本,而非HTML代码.为了输出真正的HTML,我们需要使用v-html指令:

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

指令:

是指带有v-前缀的特殊特性.指令特性的值预期是单个JavaScript表达式(v-for是例外).指令的指责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM.

<p v-if="seen">现在你看到我了</p>
v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

动态参数:

<a v-bind:[attributeName]="url"></a>
这里的attributeName会被作为一个JavaScript表达式进行动态求值,求得的值,求得的值将会作为最终的参数来使用.例如,如果我们的Vue实例有一个data属性attributeName,其值为"href",那么这个绑定将等价于v-bind:href;

在DOM中使用模板时(直接在一个HTML文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把attribute名全部强制转为小写.

缩写:

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

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

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