模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将DOM绑定至Vue实例的数据。
插值
#文本
数据绑定最常见的形式就是使用”Mustache”语法（双大括号）的文本插值
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
#原始HTML
双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html 指令：
<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p>
这个 span 的内容将会被替换成为 property 值 rawHtml，直接作为 HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。
#Attribute
Mustache语法不能作用在HTML attribute上，遇到这种情况应该使用 [v-bind](https://cn.vuejs.org/v2/api/#v-bind)指令：
<div v-bind:id="dynamicId"></div>
于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。
#使用JavaScript表达式
对于所有的数据绑定，Vue.js都提供了完全的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 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>
这里，v-if指令将根据表达式seen的值的真假来插入/移除
元素
#参数
一些指令能够接受一个”参数”，在指令名称之后以冒号表示。例如，v-bind指令可以用于响应式地更新HTML attribute：
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
#动态参数
用方括号括起来地JavaScript表达式作为一个指令地参数：
<!--注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。--><a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
#修饰符
修饰符（modifier）是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于出发的事件调用event.preventDefaul()：
<form v-on:submit.prevent="onSubmit">...</form>
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
#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>
计算属性和侦听器
计算属性
模版内的表达式非常便利，模板的设计初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重并且难以维护。Ex:
<div id="example">{{ message.split('').reverse().join('') }}</div>
这里模板已不再是简单的声明式逻辑，必须阅读后才能意识到这里想要实现的效果是显示变量message的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
#基础例子
<div id="example"><p>Original message: "{{ message }}" </p><p>Computed reversed message: "{{ reversedMessage }}" </p></div>var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}})
此处声明的计算属性reversedMessage。提供的函数将用作property vm.reversedMessage 的 getter 函数：
console.log(vm.reversedMessage) // => 'olleH'vm.message = 'Goodbye'console.log(vm.reversedMessage) // => 'eybdooG'
你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。
#计算属性缓存VS方法
计算属性是基于它们的响应式依赖进行缓存的。只在响应式依赖发生改变时才会重新求值。这意味着只要message没有发生改变，多次访问reversedMessage 会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法总会再次执行函数。
#计算属性vs侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：
<div id="demo">{{ fullName }}</div>
var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}})
上面的代码是命令式且重复的。将它与计算属性的版本进行比较：
var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}})
减少回调，简洁明了。
#计算属性的setter
计算属性默认只有getter,不过在需要时可以提供一个setter：
// ...computed: {fullName: {// getterget: function () {return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}// ...
现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
侦听器
Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，此方法最有效。
例如：
<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p></div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 --><!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 --><script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script><script>var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {// 如果 `question` 发生改变，这个函数就会运行question: function (newQuestion, oldQuestion) {this.answer = 'Waiting for you to stop typing...'this.debouncedGetAnswer()}},created: function () {// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，// 请参考：https://lodash.com/docs#debouncethis.debouncedGetAnswer = _.debounce(this.getAnswer, 500)},methods: {getAnswer: function () {if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;-)'return}this.answer = 'Thinking...'var vm = thisaxios.get('https://yesno.wtf/api').then(function (response) {vm.answer = _.capitalize(response.data.answer)}).catch(function (error) {vm.answer = 'Error! Could not reach the API. ' + error})}}})</script>
在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
Class与style绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
绑定HTML Class
#对象语法
可以给v-bind:class一个对象，以动态地切换class:
<div v-bind:class="{ active: isActive }"></div>
上面地代码表示active这个class存在与否将取决于天数property isActive的truthiness。
可以往对象中传入更多字段来动态切换多个class。此外，v-bind:class 指令也可以与普通的class attribute共存。当有如下模板：
<divclass="static"v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
和以下data:
data: {isActive: true,hasError: false}
结果渲染为：
<div class="static active"></div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里：
<div v-bind:class="classObject"></div>
data: {classObject: {active: true,'text-danger': false}}
渲染结果与上面一致。
我们也可以在这里绑定一个返回对象的计算属性。非常常用且强大
<div v-bind:class="classObject"></div>
data: {isActive: true,error: null},computed: {classObject: function () {return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}}}
#数组语法
可以将一个数组传给v-bind：class，以应用一个class列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {activeClass: 'active',errorClass: 'text-danger'}
渲染为：
<div class="active text-danger"></div>
如果想根据条件切换列表中的class,可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加errorClass，但是只有在isActive是truthy时才添加activeClass。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
#用在组件上
绑定内联样式
#对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {activeColor: 'red',fontSize: 30}
样式通过数据绑定来实现。直接绑定到一个样式对象通常更好，会让模板更清晰：
<div v-bind:style="styleObject"></div>
data: {styleObject: {color: 'red',fontSize: '13px'}}
对象语法也可以结合对象的计算属性使用。
#数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
条件渲染
v-if
v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy值地时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
也可以用v-else添加一个”else块”：
<h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no 😢</h1>
在 <template> 元素上使用 v-if 条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></template>
v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”：
<div v-if="Math.random() > 0.5">Now you see me</div><div v-else>Now you don't</div>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if
充当v-if的else-if块，可以连续使用：
<div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
用key管理可复用的元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：
<template v-if="loginType === 'username'"><label>Username</label><input placeholder="Enter your username"></template><template v-else><label>Email</label><input placeholder="Enter your email address"></template>
那么在上面的代码中切换loginType将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input>不会被替换掉，仅仅是替换了它的placeholder。
这种做法也不符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：
<template v-if="loginType === 'username'"><label>Username</label><input placeholder="Enter your username" key="username-input"></template><template v-else><label>Email</label><input placeholder="Enter your email address" key="email-input"></template>
注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key attribute。
v-show
根据条件展示元素的选项：v-show
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染
用 v-for把一个数组对应为一组元素
使用v-for指令基于一个数组来渲染一个列表，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul id="example-1"><li v-for="item in items" :key="item.message">{{ item.message }}</li></ul>
var example1 = new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]}})
在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
<ul id="example-2"><li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li></ul>
var example2 = new Vue({el: '#example-2',data: {parentMessage: 'Parent',items: [{ message: 'Foo' },{ message: 'Bar' }]}})
也可以用of 代替 in 作为分隔符，更接近Javascript迭代器得语法
<div v-for="item of items"></div>
在 v-for 里使用对象
可以使用v-for遍历一个对象得property。
<ul id="v-for-object" class="demo"><li v-for="value in object">{{ value }}</li></ul>
new Vue({el: '#v-for-object',data: {object: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'}}})
同时可以使用第二参数作为property名称（也就是键名）：
<div v-for="(value, name) in object">{{ name }}: {{ value }}</div>
维护状态
当Vue正在更新使用v-for渲染的元素列表时，它默认使用”就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute:
<div v-for="item in items" v-bind:key="item.id"><!-- 内容 --></div>
在使用v-for时尽可能提供key attribute，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。它是Vue识别节点的一个通用机制，key并不与v-for特别关联。
数据更新检测
变更方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
你可以打开控制台，然后对前面例子的items数组尝试调用变更方法。比如example1.items.push({ message: ‘Baz’ })。
替换数组
变更方法会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如filter()、concat()和slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
example1.items = example1.items.filter(function (item) {return item.message.match(/Foo/)})
显示过滤/排序后的结果
在想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性。来返回过滤或排序后的数组。
<li v-for="n in evenNumbers">{{ n }}</li>
data: {numbers: [ 1, 2, 3, 4, 5 ]},computed: {evenNumbers: function () {return this.numbers.filter(function (number) {return number % 2 === 0})}}
在计算属性不适用的情况下，例如在嵌套v-for循环中，可以使用如下方法：
<ul v-for="set in sets"><li v-for="n in even(set)">{{ n }}</li></ul>
data: {sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]},methods: {even: function (numbers) {return numbers.filter(function (number) {return number % 2 === 0})}}
事件处理
监听事件
可以用 v-on指令监听DOM事件，并在触发时运行一些Javascript代码。
示例：
<div id="example-1"><button v-on:click="counter += 1">Add 1</button><p>The button above has been clicked {{ counter }} times.</p></div>
var example1 = new Vue({el: '#example-1',data: {counter: 0}})
事件处理方法
v-on可以接受一个需要调用的方法的名称。
示例：
<div id="example-2"><!-- `greet` 是在下面定义的方法名 --><button v-on:click="greet">Greet</button></div>
var example2 = new Vue({el: '#example-2',data: {name: 'Vue.js'},// 在 `methods` 对象中定义方法methods: {greet: function (event) {// `this` 在方法里指向当前 Vue 实例alert('Hello ' + this.name + '!')// `event` 是原生 DOM 事件if (event) {alert(event.target.tagName)}}}})// 也可以用 JavaScript 直接调用方法example2.greet() // => 'Hello Vue.js!'
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法：
<div id="example-3"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</button></div>
new Vue({el: '#example-3',methods: {say: function (message) {alert(message)}}})
事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --><!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div>
表单输入绑定
基础用法
你可以用v-model指令在表单、
若有收获，就点个赞吧
0 人点赞
