v-model
v-html——原始 HTML
Attribute">v-bind——Attribute
- Class 与 Style 绑定
  - Binding HTML Classes
  - Binding Inline Styles
v-if
- v-if 与 v-for 一起使用
v-else
v-else-if
v-show
- v-if vs v-show
v-for

v-model

Basic Usage(基础用法)

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

你可以用 v-model 指令在表单、及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model <strong>本质上不过是语法糖</strong>。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p> <blockquote> <p>v-model会忽略所有表单元素的value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值。</p> </blockquote> <p>v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：</p> <ul> <li><strong>text</strong> 和 <strong>textarea</strong> 元素使用 value property 和 <strong>input</strong> 事件；</li><li><strong>checkbox</strong> 和 <strong>radio</strong> 使用 checked property 和 change 事件；</li><li><strong>select</strong> 字段将 value 作为 prop 并将 change 作为事件。<blockquote> <p>对于需要使用<a rel="nofollow" href="https://zh.wikipedia.org/wiki/%E8%BE%93%E5%85%A5%E6%B3%95">输入法</a>(如中文、日文、韩文等) 的语言，你会发现v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。</p> </blockquote> </li></ul> <p><a name="wbxXN"></a></p> <h3 id="bs4aea"><a name="bs4aea" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Single select</h3><pre><code class="lang-vue"><select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> new Vue({ el: '...', data: { selected: '' } }) </code></pre> <blockquote> <p>如果v-model表达式的初始值未能匹配任何选项，<select>元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。</p> </blockquote> <p><a name="KkCCe"></a></p> <h3 id="at98bv"><a name="at98bv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Multiple select (bound to Array)</h3><pre><code class="lang-vue"><select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> new Vue({ el: '#example-6', data: { selected: [] } }) </code></pre> <p><a name="QShLm"></a></p> <h2 id="bezefh"><a name="bezefh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Value Bindings</h2><p>（值绑定） For radio, checkbox and select options, the v-model binding values are usually static strings (or booleans for checkboxes):</p> <pre><code class="lang-vue"> <input type="radio" v-model="picked" value="a">  <input type="checkbox" v-model="toggle">  <select v-model="selected"> <option value="abc">ABC</option> </select> </code></pre> <pre><code>但是有时我们可能想把值绑定到 Vue 实例的一个**动态** property 上，这时可以用 v-bind 实现，并且这个 property 的值**可以不是字符串**。 </code></pre><p><a name="eN4vQ"></a></p> <h3 id="5fkydx"><a name="5fkydx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Checkbox</h3><pre><code class="lang-vue"><input type="checkbox" v-model="toggle" true-value="yes" false-value="no" > // when checked: vm.toggle === 'yes' // when unchecked: vm.toggle === 'no' </code></pre> <blockquote> <p>这里的true-value和false-valueattribute 并不会影响输入控件的valueattribute，因为浏览器在提交表单时并不会包含未被选中的复选框。</p> </blockquote> <p><a name="e8irB"></a></p> <h3 id="ceyx36"><a name="ceyx36" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Radio</h3><pre><code class="lang-vue"><input type="radio" v-model="pick" v-bind:value="a"> // when checked: vm.pick === vm.a </code></pre> <p><a name="zWJYC"></a></p> <h3 id="9wqn43"><a name="9wqn43" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Select Options</h3><pre><code class="lang-vue"><select v-model="selected">  <option v-bind:value="{ number: 123 }">123</option> </select> // when selected: typeof vm.selected // => 'object' vm.selected.number // => 123 </code></pre> <p><a name="YAzub"></a></p> <h2 id="3dguwa"><a name="3dguwa" class="reference-link"></a><span class="header-link octicon octicon-link"></span>修饰符</h2><p><a name="IBNZe"></a></p> <h3 id="2oukrc"><a name="2oukrc" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h3><p>.lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件<em>之后</em>进行同步：</p> <pre><code class="lang-vue"> <input v-model.lazy="msg"> </code></pre> <p><a name="AF7b5"></a></p> <h3 id="7sr7zr"><a name="7sr7zr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>.number</h3><p>如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：</p> <pre><code class="lang-vue"><input v-model.number="age" type="number"> </code></pre> <p>这通常很有用，因为即使在 type=”number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。 <a name="E2GgP"></a></p> <h3 id="flabnh"><a name="flabnh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>.trim</h3><p>如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：</p> <pre><code class="lang-vue"><input v-model.trim="msg"> </code></pre> <p><a name="U6Rjy"></a></p> <h2 id="fzkqdo"><a name="fzkqdo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在组件上使用 v-model(<strong>2.2.0+ 新增</strong>)</h2><p>自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：</p> <pre><code class="lang-vue"><input v-model="searchText"> </code></pre> <p>等价于：</p> <pre><code class="lang-vue"><input v-bind:value="searchText" v-on:input="searchText = $event.target.value" > </code></pre> <p>当用在组件上时，v-model 则会这样：</p> <pre><code class="lang-vue"><custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input> </code></pre> <p>为了让它正常工作，这个组件内的 <input> 必须：</p> <ul> <li>将其valueattribute 绑定到一个名叫value的 prop 上</li><li>在其input事件被触发时，将新的值通过自定义的input事件抛出</li></ul> <p>写成代码之后是这样的：</p> <pre><code class="lang-vue">Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` }) </code></pre> <p>现在 v-model 就应该可以在这个组件上完美地工作起来了：</p> <pre><code class="lang-vue"><custom-input v-model="searchText"></custom-input> </code></pre> <p><a name="M2G1a"></a></p> <h2 id="zylv9"><a name="zylv9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>自定义组件的 v-model</h2><p>一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将value attribute 用于<a rel="nofollow" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value">不同的目的</a>。model选项可以用来避免这样的冲突：</p> <pre><code class="lang-vue">Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > ` }) </code></pre> <p>现在在这个组件上使用 v-model 的时候：</p> <pre><code class="lang-vue"><base-checkbox v-model="lovingVue"></base-checkbox> </code></pre> <p>这里的lovingVue的值将会传入这个名为checked的 prop。同时当<base-checkbox>触发一个change事件并附带一个新的值的时候，这个lovingVue的 property 将会被更新。</p> <blockquote> <p>注意你仍然需要在组件的props选项里声明checked这个 prop。</p> </blockquote> <p><a name="hXSO4"></a></p> <h1 id="7h6cp5"><a name="7h6cp5" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h1><p>v-on 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。<br />可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。使用 v-on 有几个好处：<br /></p> <ol> <li>扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。</li><li>因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。</li><li>当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。 <a name="mtlrJ"></a><h2 id="1g47s6"><a name="1g47s6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>事件绑定</h2><a name="LnnmL"></a><h3 id="9q3k7m"><a name="9q3k7m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Method Event Handlers</h3></li></ol> <pre><code>The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the v-on attribute isn’t feasible. That’s why v-on can also accept the name of a method you’d like to call. </code></pre><p><br />然而<strong>许多事件处理</strong>逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还<strong>可以</strong>接收<strong>一个</strong>需要调用的方法名称。</p> <pre><code class="lang-vue"><div id="example-2">  <button v-on:click="greet">Greet</button> </div> var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // define methods under the `methods` object methods: { greet: function (event) { // `this` inside methods points to the Vue instance alert('Hello ' + this.name + '!') // `event` is the native DOM event if (event) { alert(event.target.tagName) } } } }) // you can invoke methods in JavaScript too example2.greet() // => 'Hello Vue.js!' </code></pre> <p><a name="s3t95"></a></p> <h3 id="b4qsco"><a name="b4qsco" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Methods in Inline Handlers</h3><p>除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：</p> <pre><code class="lang-vue"><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) } } }) </code></pre> <p>有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：</p> <pre><code class="lang-vue"><button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button> // ... methods: { warn: function (message, event) { // now we have access to the native event if (event) { event.preventDefault() } alert(message) } } </code></pre> <p><a name="hReiu"></a></p> <h2 id="38iz1g"><a name="38iz1g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>修饰符</h2><p><a name="y2ei7"></a></p> <h3 id="ej3ey6"><a name="ej3ey6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Event Modifiers(<a rel="nofollow" href="https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6">事件修饰符</a>)</h3><p>在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：<strong>方法只有纯粹的数据逻辑</strong>，<strong>而不是去处理 DOM 事件细节</strong>。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。 | 修饰符 | 含义 | 版本 | | —- | —- | —- | | .stop | 调用 event.stopPropagation() | | | .prevent | 调用 event.preventDefault() | | | .capture | 添加事件侦听器时使用 capture 模式 | | | .self | 只当事件是从侦听器绑定的元素本身触发时才触发回调 | | | .once | 只触发一次回调。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。 | New in 2.1.4+ | | .passive | 以 { passive: true } 模式添加侦听器 | 2.3.0 |</p> <pre><code class="lang-vue"> <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>   <div v-on:click.self="doThat">...</div> </code></pre> <blockquote> <p>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止<strong>所有的点击</strong>，而v-on:click.self.prevent只会阻止对元素自身的点击。</p> </blockquote> <p><strong>.passive </strong><br />Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。</p> <pre><code class="lang-vue">   <div v-on:scroll.passive="onScroll">...</div> </code></pre> <p>这个 .passive 修饰符尤其能够提升移动端的性能。</p> <blockquote> <p>不要把.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive会告诉浏览器你<em>不</em>想阻止事件的默认行为。</p> </blockquote> <p><a name="ciCwS"></a></p> <h3 id="7vlfer"><a name="7vlfer" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Key Modifiers(按键修饰符</h3><p>) 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：</p> <pre><code class="lang-vue"> <input v-on:keyup.enter="submit"> </code></pre> <p>You can directly use any valid key names exposed via<a rel="nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">KeyboardEvent.key</a>as modifiers by converting them to kebab-case.<br />你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。</p> <pre><code class="lang-vue"><input v-on:keyup.page-down="onPageDown"> </code></pre> <p>在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。 <a name="iVjRa"></a></p> <h4 id="fiv9p3"><a name="fiv9p3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Key Codes</h4><p>为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：</p> <ul> <li>.enter</li><li>.tab</li><li>.delete(捕获“删除”和“退格”键)</li><li>.esc</li><li>.space</li><li>.up</li><li>.down</li><li>.left</li><li>.right<blockquote> <p>有一些按键 (.esc以及所有的方向键) 在 IE9 中有不同的key值, 如果你想支持 IE9，这些内置的别名应该是首选。</p> </blockquote> </li></ul> <p>你还可以通过全局config.keyCodes对象<a rel="nofollow" href="https://cn.vuejs.org/v2/api/#keyCodes">自定义按键修饰符别名</a>：</p> <pre><code class="lang-vue">// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 </code></pre> <p><a name="WdFmU"></a></p> <h3 id="5w4amq"><a name="5w4amq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>System Modifier Keys（系统修饰键 2.10新增</h3><p>）</p> <p>可以用如下修饰符来实现仅在<strong>按下</strong>相应按键时才触发鼠标或键盘事件的监听器。</p> <ul> <li>.ctrl</li><li>.alt</li><li>.shift</li><li>.meta<blockquote> <p><strong>注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。</strong></p> </blockquote> </li></ul> <pre><code class="lang-vue"> <input v-on:keyup.alt.67="clear">  <div v-on:click.ctrl="doSomething">Do something</div> </code></pre> <blockquote> <p>请注意修饰键与常规按键不同，在和keyup事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住ctrl的情况下释放其它按键，才能触发keyup.ctrl。而单单释放ctrl也不会触发事件。如果你想要这样的行为，请为ctrl换用keyCode：keyup.17。</p> </blockquote> <p><a name="pj57v"></a></p> <h4 id="6yvj7x"><a name="6yvj7x" class="reference-link"></a><span class="header-link octicon octicon-link"></span>..exact Modifier(exact 修饰符[New in 2.5.0+])</h4><pre><code class="lang-vue"> <button v-on:click.ctrl="onClick">A</button>  <button v-on:click.ctrl.exact="onCtrlClick">A</button>  <button v-on:click.exact="onClick">A</button> </code></pre> <p><a name="bTxjG"></a></p> <h4 id="5ggesm"><a name="5ggesm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Mouse Button Modifiers(鼠标按钮修饰符</h4><p>[<strong>New in 2.2.0+</strong>])</p> <ul> <li>.left</li><li>.right</li><li>.middle</li></ul> <p>这些修饰符会限制处理函数仅响应特定的鼠标按钮。 <a name="uKPNR"></a></p> <h2 id="4ovzff"><a name="4ovzff" class="reference-link"></a><span class="header-link octicon octicon-link"></span>自定义事件</h2><p><a name="FnMgj"></a></p> <h3 id="arvr8v"><a name="arvr8v" class="reference-link"></a><span class="header-link octicon octicon-link"></span>事件名</h3><p>不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：</p> <pre><code class="lang-jsx">this.$emit('myEvent') </code></pre> <p>则监听这个名字的 kebab-case 版本是不会有任何效果的：</p> <pre><code class="lang-jsx"> <my-component v-on:my-event="doSomething"></my-component> </code></pre> <p>不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且v-on事件监听器在 DOM 模板中会被<strong>自动转换</strong>为全小写 (因为 HTML 是大小写不敏感的)，所以v-on:myEvent将会变成v-on:myevent——导致myEvent不可能被监听到。<br />因此，我们推荐你<strong>始终使用 kebab-case 的事件名</strong>。 <a name="RaQFu"></a></p> <h3 id="f9f6sj"><a name="f9f6sj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>将原生事件绑定到组件</h3><p>你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用v-on的.native修饰符：</p> <pre><code class="lang-jsx"><base-input v-on:focus.native="onFocus"></base-input> </code></pre> <p>This can be useful sometimes, but it’s not a good idea when you’re trying to listen on a very specific element, like an<input>.<br />在有的时候这是很有用的，不过在你尝试监听一个类似 <input> 的<strong>非常特定的元素时</strong>，这并不是个好主意。<br />为了解决这个问题，Vue 提供了一个$listenersproperty，它是一个对象，里面包含了作用在这个组件上的所有监听器。例如：</p> <pre><code class="lang-javascript">{ focus: function (event) { /* ... */ } input: function (value) { /* ... */ }, } </code></pre> <p>有了这个$listenersproperty，你就可以配合v-on=”$listeners”将所有的事件监听器指向这个组件的某个特定的子元素。对于类似<input>的你希望它也可以配合v-model工作的组件来说，为这些监听器创建一个类似下述inputListeners的计算属性通常是非常有用的：</p> <pre><code class="lang-jsx">Vue.component('base-input', { inheritAttrs: false, props: ['label', 'value'], computed: { inputListeners: function () { var vm = this // `Object.assign` 将所有的对象合并为一个新对象 return Object.assign({}, // 我们从父级添加所有的监听器 this.$listeners, // 然后我们添加自定义监听器， // 或覆写一些监听器的行为 { // 这里确保组件配合 `v-model` 的工作 input: function (event) { vm.$emit('input', event.target.value) } } ) } }, template: ` <label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on="inputListeners" > </label> ` }) </code></pre> <p>现在<base-input>组件是一个<strong>完全透明的包裹器</strong>了，也就是说它可以完全像一个普通的<input>元素一样使用了：所有跟它相同的 attribute 和监听器都可以工作，不必再使用.native监听器。 <a name="CmO40"></a></p> <h3 id="k6l67"><a name="k6l67" class="reference-link"></a><span class="header-link octicon octicon-link"></span>.sync 修饰符(<strong>2.3.0+ 新增</strong>)</h3><p>在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。<br />这也是为什么我们推荐以update:myPropName的模式触发事件取而代之。举个例子，在一个包含titleprop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：</p> <pre><code class="lang-javascript">this.$emit('update:title', newTitle) </code></pre> <p>然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：</p> <pre><code class="lang-jsx"><text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document> </code></pre> <p>为了方便起见，我们为这种模式提供一个缩写，即.sync修饰符：</p> <pre><code class="lang-jsx"><text-document v-bind:title.sync="doc.title"></text-document> </code></pre> <blockquote> <p>注意带有.sync修饰符的v-bind<strong>不能</strong>和表达式一起使用 (例如v-bind:title.sync=”doc.title + ‘!’”是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似v-model。</p> </blockquote> <p>当我们用<strong>一个对象</strong>同时<strong>设置</strong>多个 prop 的时候，也可以将这个.sync修饰符和v-bind配合使用：</p> <pre><code class="lang-html"><text-document v-bind.sync="doc"></text-document> </code></pre> <p>这样会把doc对象中的每一个 property (如title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的v-on监听器。</p> <blockquote> <p>将v-bind.sync用在一个字面量的对象上，例如v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。</p> </blockquote> <p><a name="KgW37"></a></p> <h1 id="bptbnv"><a name="bptbnv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-html——原始 HTML</h1><p>双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用<a rel="nofollow" href="https://cn.vuejs.org/v2/api/#v-html">v-html指令</a>：</p> <pre><code class="lang-html"><p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> </code></pre> <p>这个 span 的内容将会被替换成为 property 值rawHtml，直接作为 HTML——会 <strong>忽略解析 property</strong> 值中的数据绑定。注意，<strong>你不能使用v-html来复合局部模板</strong>，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，<strong>组件</strong>更适合作为<strong>可重用和可组合</strong>的基本单位。</p> <blockquote> <p>你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致<a rel="nofollow" href="https://en.wikipedia.org/wiki/Cross-site_scripting">XSS 攻击</a>。请只对可信内容使用 HTML 插值，<strong>绝不要</strong>对用户提供的内容使用插值。</p> </blockquote> <p><a name="W0gvI"></a></p> <h1 id="2e3rzz"><a name="2e3rzz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-bind——<a rel="nofollow" href="https://cn.vuejs.org/v2/guide/syntax.html#Attribute">Attribute</a></h1><p>Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用<a rel="nofollow" href="https://cn.vuejs.org/v2/api/#v-bind">v-bind指令</a>：</p> <pre><code class="lang-javascript"><div v-bind:id="dynamicId"></div> </code></pre> <p>对于布尔 attribute，只要存在就意味着值为true。</p> <pre><code class="lang-html"><button v-bind:disabled="isButtonDisabled">Button</button> </code></pre> <p>如果isButtonDisabled的值是null、undefined或false，则disabled attribute 甚至<strong>不会</strong>被包含在<strong>渲染出来</strong>的<button>元素中。 <a name="fIZrX"></a></p> <h2 id="1q97y8"><a name="1q97y8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Class 与 Style 绑定</h2><p>操作元素的 <strong>class list </strong>和 <strong>inline styles</strong> 是数据绑定的一个常见需求。因为它们都是 <strong>attribute</strong>，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，<strong>Vue.js 做了专门的增强</strong>。表达式结果的类型除了字符串之外，还可以是对象或数组。 <a name="Sdoks"></a></p> <h3 id="eess42"><a name="eess42" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Binding HTML Classes</h3><p><a name="brgTw"></a></p> <h4 id="c9cdun"><a name="c9cdun" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Object Syntax</h4><p>v-bind:class 指令也可以与普通的 class attribute 共存。</p> <pre><code class="lang-vue"><div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> data: { isActive: true, hasError: false }  <div class="static active"></div> </code></pre> <p>绑定的数据对象不必内联定义在模板里。</p> <pre><code class="lang-vue"><div v-bind:class="classObject"></div> data: { classObject: { active: true, 'text-danger': false } } </code></pre> <p>绑定一个返回对象的计算属性。</p> <pre><code class="lang-vue"><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' } } } </code></pre> <p><a name="hXmBQ"></a></p> <h4 id="dvax29"><a name="dvax29" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Array Syntax</h4><pre><code class="lang-vue"><div v-bind:class="[activeClass, errorClass]"></div> data: { activeClass: 'active', errorClass: 'text-danger' } //渲染为 <div class="active text-danger"></div> </code></pre> <p>想根据条件切换列表中的 class，可以用三元表达式</p> <pre><code class="lang-vue"><div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> </code></pre> <p>当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：</p> <pre><code class="lang-vue"><div v-bind:class="[{ active: isActive }, errorClass]"></div> </code></pre> <p><a name="Xr4Us"></a></p> <h4 id="13oxz9"><a name="13oxz9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>With Components</h4><p>当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。</p> <pre><code class="lang-vue">Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' }) <my-component class="baz boo"></my-component>  <p class="foo bar baz boo">Hi</p> </code></pre> <p>对于带数据绑定 class 也同样适用：</p> <pre><code class="lang-vue"><my-component v-bind:class="{ active: isActive }"></my-component> </code></pre> <p><a name="PHyhV"></a></p> <h3 id="48d2f1"><a name="48d2f1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Binding Inline Styles</h3><p><a name="Q7bPX"></a></p> <h4 id="1muze6"><a name="1muze6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Object Syntax</h4><p>v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：</p> <pre><code class="lang-vue"><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' } } </code></pre> <p>同样的，对象语法常常结合返回对象的<strong>计算属性</strong>使用。 <br /> <a name="XRXv4"></a></p> <h4 id="cs8fgl"><a name="cs8fgl" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Array Syntax</h4><p>v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：</p> <pre><code class="lang-vue"><div v-bind:style="[baseStyles, overridingStyles]"></div> </code></pre> <p><a name="Ekiwc"></a></p> <h4 id="dk0n8j"><a name="dk0n8j" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Auto-prefixing</h4><p>当v-bind:style使用需要添加<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix">浏览器引擎前缀</a>的 CSS property 时，如transform，Vue.js 会自动侦测并添加相应的前缀。</p> <p><a name="xcPl2"></a></p> <h4 id="shhcx"><a name="shhcx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Multiple Values(多重值)</h4><p>从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：</p> <pre><code class="lang-vue"><div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> </code></pre> <p>This will only render the last value in the array which <strong>the browser supports</strong>. In this example, it will render display: flex for browsers that support the unprefixed version of flexbox.<br />这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。 <a name="tZv07"></a></p> <h1 id="718mlk"><a name="718mlk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-if</h1><p>v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<br />因为v-if是一个指令，所以<strong>必须将它添加到一个元素上</strong>。但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含<template>元素。 <a name="HtyuN"></a></p> <h2 id="b8xebf"><a name="b8xebf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-if 与 v-for 一起使用</h2><p>当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。</p> <blockquote> <p><strong>不推荐</strong>同时使用v-if和v-for。</p> </blockquote> <p><a name="ad8HP"></a></p> <h1 id="5kfjaw"><a name="5kfjaw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-else</h1><p>v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 <a name="FuY2P"></a></p> <h1 id="c0kiv6"><a name="c0kiv6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-else-if</h1><p>(2.1.0 新增) v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：</p> <pre><code class="lang-vue"><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> </code></pre> <p>类似于v-else，v-else-if也必须紧跟在带v-if或者v-else-if的元素之后。 <a name="LLrxt"></a></p> <h1 id="cclqi0"><a name="cclqi0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-show</h1><p>另一个用于根据条件展示元素的选项是 v-show 指令。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。</p> <blockquote> <p>注意，v-show不支持<template>元素，也不支持v-else。</p> </blockquote> <p><a name="A97Zd"></a></p> <h2 id="5ubz0s"><a name="5ubz0s" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-if vs v-show</h2><p>v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的<strong>事件监听器</strong>和子组件适当地被<strong>销毁</strong>和<strong>重建</strong>。 <br />v-if 也是<strong>惰性</strong>的：如果在初始渲染时条件为假，则什么也不做——<strong>直到</strong>条件第一次变<strong>为真</strong>时，才会开始渲染条件块。 <br /> 相比之下，<strong>v-show</strong> 就简单得多——不管初始条件是什么，元素<strong>总是会被渲染</strong>，并且只是简单地<strong>基于 CSS 进行切换</strong>。 <br /> 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 <a name="mgk4B"></a></p> <h1 id="94uakz"><a name="94uakz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-for</h1><p><a name="TGt85"></a></p> <h2 id="bnnbzv"><a name="bnnbzv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在 v-for 里使用数组</h2><p>我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的<strong>别名</strong>。</p> <pre><code class="lang-vue"><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' } ] } }) </code></pre> <p>在v-for块中，我们可以访问所有父作用域的 property。v-for还支持一个可选的第二个参数，即当前项的索引。</p> <pre><code class="lang-vue"><ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> </code></pre> <p>你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：</p> <pre><code class="lang-vue"><div v-for="item of items"></div> </code></pre> <p><a name="pI9Wz"></a></p> <h2 id="9v71mm"><a name="9v71mm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在 v-for 里使用对象</h2><p>你也可以用 v-for 来遍历一个对象的 property。</p> <pre><code class="lang-vue"><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' } } }) </code></pre> <p>你也可以提供第二个的参数为 property 名称 (也就是键名)：</p> <pre><code class="lang-vue"><div v-for="(value, name) in object"> {{ name }}: {{ value }} </div> </code></pre> <p>还可以用第三个参数作为索引：</p> <pre><code class="lang-vue"><div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div> </code></pre> <blockquote> <p>在遍历对象时，会按Object.keys()的结果遍历，但是<strong>不能</strong>保证它的结果在不同的 JavaScript 引擎下都一致。</p> </blockquote> <p><a name="lpF73"></a></p> <h2 id="1wwd0o"><a name="1wwd0o" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在v-for里使用整数</h2><p>v-for也可以接受整数。在这种情况下，它会把模板重复对应次数。</p> <pre><code class="lang-vue"><div> <span v-for="n in 10">{{ n }} </span> </div> //1 2 3 4 5 6 7 8 9 10 </code></pre> <p><a name="DXO3g"></a></p> <h2 id="24h2wh"><a name="24h2wh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在 <template> 上使用 v-for</h2><p>类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如：</p> <pre><code class="lang-vue"><ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul> </code></pre> <p><a name="xvoOU"></a></p> <h2 id="5o2ggx"><a name="5o2ggx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在组件上使用 v-for</h2><p>在自定义组件上，你可以像在任何普通元素上一样使用 v-for。</p> <pre><code class="lang-vue"><my-component v-for="item in items" :key="item.id"></my-component> </code></pre> <blockquote> <p><strong>2.2.0+ 的版本里，当在组件上使用v-for时，key现在是必须的。</strong></p> </blockquote> <p>然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop：</p> <pre><code class="lang-vue"><my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id" ></my-component> </code></pre> <p>不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。<strong>明确组件数据的来源能够使组件在其他场合重复使用</strong>。</p> <p><a name="Dh3Py"></a></p> <h2 id="3wk9ra"><a name="3wk9ra" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-for 与 v-if 一同使用</h2><p>当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当你只想为 <em><strong>部分</strong> </em>项渲染节点时，这种优先级的机制会十分有用，如下：</p> <pre><code class="lang-vue"><li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> </code></pre> <p>而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>) 上。如：</p> <pre><code class="lang-vue"><ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p> </code></pre> <p><a name="OoLy1"></a></p> <h1 id="5m47o6"><a name="5m47o6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>v-once</h1><p>通过 v-once 创建低开销的静态组件</p> <p>渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了<strong>大量</strong>静态内容。在这种情况下，你可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来，就像这样：</p> <pre><code class="lang-jsx">Vue.component('terms-of-service', { template: ` <div v-once> <h1>Terms of Service</h1> ... a lot of static content ... </div> ` }) </code></pre> <blockquote> <p>再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉v-once或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。</p> </blockquote>

JavaScript 框架

directives(指令)

v-model

Basic Usage(基础用法)