Vue 模板语法
Vue.js使用基于HTML的模板语法,允许开发者声明式地将DOM绑定至地层Vue实例的数据.
所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析.
插值
文本
使用"Mustache"语法,使用双大括号----->{{}}
原始HTML
双大括号会将数据解释为普通文本,而非HTML代码.如果想输出真正的HTML,可以使用 v-html 指令:
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>原始 HTML</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 这是原始也是 --> <p>这是原始文字的样式:<span style="color: red;">原始文字,红色字体</span></p> <div id="app"> <p>这是数据通过 Mustache 语法渲染rawHtml表示的值,表现出来的样式:{{rawHtml}}</p> <p>这里的rawHtml表示的值,使用v-html 指令进行渲染的样式:<span v-html="rawHtml"></span></p> <p>----调皮一下---</p> <p><span v-html>{{rawHtml}}</span></p> <!-- 意犹未尽: v-html指令指向的变量的值,是最终需要渲染的HTML内容. 以下形式是不能作为 html文本 解析的: <span v-html>{{rawHtml}}</span> --> </div> <script> var vm = new Vue({ el: '#app', data: { rawHtml: '<span style="color: red;">原始文字,红色字体</span>' }, }) </script> </body> </html>
属性（Attribute）
如果HTML元素的属性是动态的，该怎么弄？
Mustache 语法不能作用在HTML attribute上，遇到这种情况应该使用 v-bind 指令：
<!-- id是动态的--> <div v-bind:id='dynamicId' ></div>
当然，HTML的元素的属性有很多，同样可以在其他元素上，实现动态的绑定处理。
1、HTML 全局属性
| 属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
| contenteditable |
规定是否可编辑元素的内容。 |
| contextmenu |
指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-* |
用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
| draggable |
指定某个元素是否可以拖动 |
| dropzone |
指定是否将数据复制，移动，或链接，或删除 |
| hidden |
hidden 属性规定对元素进行隐藏。 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码。 |
| spellcheck |
检测元素是否拼写错误 |
| style | 规定元素的行内样式（inline style） |
| tabindex | 设置元素的 Tab 键控制次序。 |
| title | 规定元素的额外信息（可在工具提示中显示） |
| translate |
指定是否一个元素的值在页面载入时是否需要翻译 |
2、元素属性
如 img元素，常用的是src属性，v-bind:src 动态绑定图片url地址。
| 属性 | 值 | 描述 |
|---|---|---|
| align | top bottom middle left right |
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。 |
| alt | text | 规定图像的替代文本。 |
| border | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。 |
| crossorigin |
anonymous use-credentials |
设置图像的跨域属性 |
| height | pixels | 规定图像的高度。 |
| hspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。 |
| ismap | ismap | 将图像规定为服务器端图像映射。 |
| longdesc | URL | HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。 |
| src | URL | 规定显示图像的 URL。 |
| usemap | #mapname | 将图像定义为客户器端图像映射。 |
| vspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。 |
| width | pixels | 规定图像的宽度。 |
使用JavaScript表达式
Vue的中Mustache 语法的{{}} （双大括号）支持JavaScript 表达式 ，注意是表达式， 不是语句！
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } }}
指令
指令是带有 v- 前缀额特殊 attribute.
指令attribute 的值预期是 单个 JavaScript 表达式.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地做用于DOM.
说白了,指令是 带有 v- 的 属性(attribute), 指令的值应该是一个JavaScript 表达式,不能是 语句. 作用是当 表达式的值发生改变时, 响应式对 含有 v- 属性 的元素做出 反应.
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
参数
一些指令能够接收一个‘参数’，在指令名称之后以冒号表示。
例如：v-bind 指令可以用于响应式地更新HTML attribute：
<a v-bind:href="url">...</a>
这里的href 是参数，告知 v-bind指令 将该元素的的 href 属性（attribute）与 JavaScript 表达式 ‘url’的值 进行绑定关联。
v-bind 的参数可以选择哪些呢？ 参考上面的举例。
又例如：
v-on 指令，它用于监听 DOM 事件
<a v-on:click="doSomething">...</a>
v-on 指令的参数 是 click，而与click 绑定的 JavaScript表达式，代表 一个事件函数的 名称！
缩写
#v-bind 缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url"> ... </a>
#v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething"> ... </a>
总结一下就是：
v-bind === ：
v-on === @
