一. 模板语法
*** Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时,Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
二.插值方法
1. 文本插值
使用“Mustache”语法 (双大括号) 的文本插值
Message: {{ msg }}
无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。
2. 通过v-once指令,只进行一次插值,当数据值改变值,插值出的内容不会改变,但这会影响到该节点上的所有数据绑定
<span v-once>这个将不会改变: {{ msg }} </ span>
3. 原始HTML
双大括号输出的是扑通文本,不能输出HTML标签,为了输出原始HTML标签,使用v-html指令
<div v-html="rawHtml"></div>
div标签将会替换为属性值rawHtml,直接作为HTML, 他会忽略属性值里的数据绑定
4. Mustache语法不能作用在html标签的特性上,可以使用v-bind指令
<button v-bind;disabled="isButtondisabled">BUTTON</button>
5. 使用JavaScript表达式
Vue.js 都提供了完全的 JavaScript 表达式支持
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id=" 'list-'+id " ></div>
重点: 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
{{ var a = 1 }} // 语句,不是表达式
{{ if (ok) { return message } }} // 流控制,使用三元运算
三. 指令
指令 (Directives) 是带有v-前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:
<p v-if="seen">现在看到我啦</p>
将根据seen传入的值判断p标签的插入和删除
1. 参数
一些指令能够接收一个参数(v-bind / v-on)
指令冒号后面的就是参数,v-bind后面的参数可以用于响应式的更行HTML标签的属性
<a v-bind:href="url"></a>
将href 属性与url数据进行动态绑定
v-on 用于绑定DOM监听事件
<a v-on:click="doSomething"></a>
2. 修饰符
修饰符 (Modifiers) 是以半角句号.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent修饰符告诉v-on指令对于触发的事件调用
<form v-on:submit.prevent="onSubmit"></form>