[Vue.js 模板语法】 vue.js看着官方文档的从0开始瞎摸学习

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

---

插值

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

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

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

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

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

2 原始HTML
为了输出真正的 HTML，你需要使用 v-html 指令

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

---

3 特性
v-bind指令可以作用在HTML特性上

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

（id为特性）

<button v-bind:disabled="isButtonDisabled">Button</button>

对于布尔特性（只要存在即为true）

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

（这个demo反应了几个知识点：JavaScript表达式、声明响应式属性、v-bind、el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。)

---

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

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

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

（v-on 指令，参数是监听的事件名）
2 动态参数
可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<a v-bind:[attributeName]="url"> ... </a>

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

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。
v-bind 缩写

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

v-on 缩写

<a v-on click="do something">...</a>
<a @click="do something">...</a>