曹可爱之最可爱-Vue.js入门（三）模版语法

模版语法

Vue.js使用了基于HTML的模版语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。

在底层的实现上，Vue将模版编译成虚拟的DOM渲染函数。结合响应系统，在应用状态改变时，Vue能够只能的计算出重新渲染组件发的最小代价并应用到DOM操作上。

（以前读这里的时候并不明白Vue在底层实现上做了什么，再来看我想大概是这样：Vue在编译的时候把模版编译成了类似我们写的渲染函数之类的东西运用到DOM操作上。我们也可以直接用可选的jsx语法完成。
当然，此时作为小菜鸡的我还不太懂得virtual dom之类的东西，不过我相信很快就会懂的。等我 ～～～～）

一.插值

文本

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

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

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

---

原始HTML

“Mustache”会将数据解释为普通文本，为了输出真正的HTML，需要使用v-html指令

<div v-html="rawHtml"></div>

这个div的内容将会被替换成为属性址rawHtml,直接作为HTML–会忽略解析属性值中的数据绑定。

---

Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令：

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

使用JavaScript表达式

对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式的支持。

{{ number + 1 }}

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

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

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

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制：每个绑定都只能包含单个表达式

---

指令

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

<p v-if="seen">现在你看到曹佳丽小可爱了</p>

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

---

参数

一些指令能够接受一个”参数“，在指令名称之后以冒号表示。例如：

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

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

v-on指令，用于监听DOM事件。

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

这里参数是监听的事件名。

---

修饰符

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

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

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

---

缩写

v- 前缀作为一种视觉提示，用来识别模版中Vue特定的特性。
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>

好啦，这块就到这里啦，简单的一点点基础语法内容。最主要是不要混淆缩写对应的哪个，有时候写的时候忘记是：还是@就很尴尬哈哈哈。愉快的周五又要到了，还是先想想明天去哪家咖啡厅比较好 ～ 回家躺尸啦，回见 ～！！