Vue.js学习日记(2)——模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有的Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。、

1.普通文本

数据绑定最常见的形式就是使用“Mustanche”语法（双大括号）的文本插值：

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

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

2.原始HTML

双大括号会将数据解释为普通文本，而非HTML。若要输出HTML，需要使用 v-html 指令：

<div id="element">
    <p>Using mustache: {{rawHtml}}</p>
    <p>Using v-html directive:
        <span v-html="rawHtml"></span>
    </p>
</div>

var app = new Vue({
    el:"#element",
    data:{
        rawHtml:"<button>This is a button</button>"
    }
})

3.特性

Mustache语法不能作用在HTML特性上，应该使用v-bind指令对标签属性进行数据绑定

<button v-bind:id="newId"></button>

4.Vue指令

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

<p v-if="seen">You can see me.</p>

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

5.参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind指令可用于响应式地更新HTML特性：

<p v-bind:id="newId"></p>

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

6.修饰符

修饰符(Modifiers)是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

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

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

7.缩写

v-前缀作为一种视觉提示，用来识别模板中Vue特定的特性。在使用Vue.js来为现有标签添加动态行为时，v-前缀很有帮助，但在一些频繁使用v-指令的场合，操作起来就会略显繁琐。所以，Vue.js为v-bind和v-on这两个最常用的指令，提供了特定简写。

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

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

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。

Vue.js学习日记(2)——模板语法

猜你喜欢