一、v-bind 縮寫
<!-- 完整語法 --><a v-bind:href="url"></a><!-- 縮寫 --><a :href="url"></a><!-- 完整語法 --><button v-bind:disabled="someDynamicCondition">Button</button><!-- 縮寫 --><button :disabled="someDynamicCondition">Button</button>
二、v-on 縮寫
<!-- 完整語法 --><a v-on:click="doSomething"></a><!-- 縮寫 --><a @click="doSomething"></a>
三、過濾器
{{ message | capitalize }}四、條件渲染
v-if<h1 v-if="ok">Yes</h1><h1 v-else>No</h1><div v-if="Math.random() > 0.5"> Sorry</div><div v-else> Not sorry</div>template-v-if<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>v-show<h1 v-show="ok">Hello!</h1>
五、列表渲染 for
v-for<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] }}); <ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] }});數組變動檢測
Vue.js 包裝了被觀察數組的變異方法，故它們能觸發視圖更新。被包裝的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
example1.items.push({ message: 'Baz' });example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/);}); template-v-for<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template></ul> 對象 v-for
<ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ $key }} : {{ value }} </li></ul>new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } }}); 值域 v-for
<div> <span v-for="n in 10">{{ n }} </span></div>六、方法與事件處理器
方法處理器
<div id="example"> <button v-on:click="greet">Greet</button></div>var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `methods` 對象中定義方法 methods: { greet: function (event) { // 方法內 `this` 指向 vm alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 alert(event.target.tagName) } }})// 也可以在 JavaScript 代碼中調用方法vm.greet(); // -> 'Hello Vue.js!'內聯語句處理器
<div id="example-2"> <button v-on:click="say('hi')">Say Hi</button> <button v-on:click="say('what')">Say What</button></div>new Vue({ el: '#example-2', methods: { say: function (msg) { alert(msg) } }});有時也需要在內聯語句處理器中訪問原生 DOM 事件。可以用特殊變量 $event 把它傳入方法
<button v-on:click="say('hello!', $event)">Submit</button> methods: { say: function (msg, event) { // 現在我們可以訪問原生事件對象 event.preventDefault() }};## 事件修飾符
<!-- 阻止單擊事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯 --><a v-on:click.stop.prevent="doThat"><!-- 只有修飾符 --><form v-on:submit.prevent></form>
## 按鍵修飾符
<!-- 只有在 keyCode 是 13 時調用 vm.submit() --><input v-on:keyup.13="submit"><!-- 同上 --><input v-on:keyup.enter="submit"><!-- 縮寫語法 --><input @keyup.enter="submit">
全部的按鍵別名：enter，tab，delete，esc，space，up，down，left，right
## 其他實例
new Vue({ el: '#demo', data: { newLabel: '', stats: stats }, methods: { add: function (e) { e.preventDefault() if (!this.newLabel) { return; } this.stats.push({ label: this.newLabel, value: 100 }); this.newLabel = ''; }, remove: function (stat) { if (this.stats.length > 3) { this.stats.$remove(stat); // 注意這里的$remove } else { alert('Can/'t delete more!') } } }});七、過渡
CSS 過渡
<div v-if="show" transition="expand">hello</div>然后為 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 規則:/* 必需 */.expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden;}/* .expand-enter 定義進入的開始狀態 *//* .expand-leave 定義離開的結束狀態 */.expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0;}你可以在同一元素上通過動態綁定實現不同的過渡：
<div v-if="show" :transition="transitionName">hello</div> new Vue({ el: '...', data: { show: false, transitionName: 'fade' }}另外，可以提供 JavaScript 鉤子:
Vue.transition('expand', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (el) { el.textContent = 'beforeLeave' }, leave: function (el) { el.textContent = 'leave' }, afterLeave: function (el) { el.textContent = 'afterLeave' }, leaveCancelled: function (el) { // handle cancellation }});八、組件
1.注冊
// 定義var MyComponent = Vue.extend({ template: '<div>A custom component!</div>'});// 注冊Vue.component('my-component', MyComponent);// 創建根實例new Vue({ el: '#example'});<div id="example"> <my-component></my-component></div>或者直接寫成：Vue.component('my-component', { template: '<div>A custom component!</div>'}); // 創建根實例new Vue({ el: '#example'});<div id="example"> <my-component></my-component></div>2.使用prop 傳遞數據
實例一：
Vue.component('child', { // 聲明 props props: ['msg'], // prop 可以用在模板內 // 可以用 `this.msg` 設置 template: '<span>{{ msg }}</span>'});<child msg="hello!"></child>實例二：
Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>' }); <!-- kebab-case in HTML --> <child my-message="hello!"></child>3.動態props
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child></div>
使用 v-bind 的縮寫語法通常更簡單：
<child :my-message="parentMsg"></child>
4.Prop 綁定類型
prop 默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態――這會讓應用的數據流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強制雙向或單次綁定：
比較語法：
<!-- 默認為單向綁定 --><child :msg="parentMsg"></child><!-- 雙向綁定 --><child :msg.sync="parentMsg"></child><!-- 單次綁定 --><child :msg.once="parentMsg"></child>其他實例：<modal :show.sync="showModal"> <h3 slot="header">custom header</h3> </modal></div>
5.Prop 驗證
組件可以為 props 指定驗證要求。當組件給其他人使用時這很有用，因為這些驗證要求構成了組件的 API，確保其他人正確地使用組件。此時 props 的值是一個對象，包含驗證要求：
Vue.component('example', { props: { // 基礎類型檢測 （`null` 意思是任何類型都可以） propA: Number, // 必需且是字符串 propB: { type: String, required: true }, // 數字，有默認值 propC: { type: Number, default: 100 }, // 對象/數組的默認值應當由一個函數返回 propD: { type: Object, default: function () { return { msg: 'hello' } } }, // 指定這個 prop 為雙向綁定 // 如果綁定類型不對將拋出一條警告 propE: { twoWay: true }, // 自定義驗證函數 propF: { validator: function (value) { return value > 10 } }, // 轉換函數（1.0.12 新增） // 在設置值之前轉換值 propG: { coerce: function (val) { return val + '' // 將值轉換為字符串 } }, propH: { coerce: function (val) { return JSON.parse(val) // 將 JSON 字符串轉換為對象 } } }});其他實例：
Vue.component('modal', { template: '#modal-template', props: { show: { type: Boolean, required: true, twoWay: true } }});6.注冊
// 定義var MyComponent = Vue.extend({ template: '<div>A custom component!</div>'});// 注冊Vue.component('my-component', MyComponent);// 創建根實例new Vue({ el: '#example'});<div id="example"> <my-component></my-component></div>或者直接寫成：
Vue.component('my-component', { template: '<div>A custom component!</div>'}); // 創建根實例new Vue({ el: '#example'});<div id="example"> <my-component></my-component></div>7.使用prop 傳遞數據
實例一：
Vue.component('child', { // 聲明 props props: ['msg'], // prop 可以用在模板內 // 可以用 `this.msg` 設置 template: '<span>{{ msg }}</span>'});<child msg="hello!"></child>實例二：
Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>' }); <!-- kebab-case in HTML --> <child my-message="hello!"></child>8.動態props
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child></div>
使用 v-bind 的縮寫語法通常更簡單：
<child :my-message="parentMsg"></child>
9.Prop 綁定類型
prop 默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態――這會讓應用的數據流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強制雙向或單次綁定：
比較語法：
<!-- 默認為單向綁定 --><child :msg="parentMsg"></child><!-- 雙向綁定 --><child :msg.sync="parentMsg"></child><!-- 單次綁定 --><child :msg.once="parentMsg"></child>
其他實例：
<modal :show.sync="showModal"> <h3 slot="header">custom header</h3> </modal></div>
10.Prop 驗證
組件可以為 props 指定驗證要求。當組件給其他人使用時這很有用，因為這些驗證要求構成了組件的 API，確保其他人正確地使用組件。此時 props 的值是一個對象，包含驗證要求：
Vue.component('example', { props: { // 基礎類型檢測 （`null` 意思是任何類型都可以） propA: Number, // 必需且是字符串 propB: { type: String, required: true }, // 數字，有默認值 propC: { type: Number, default: 100 }, // 對象/數組的默認值應當由一個函數返回 propD: { type: Object, default: function () { return { msg: 'hello' } } }, // 指定這個 prop 為雙向綁定 // 如果綁定類型不對將拋出一條警告 propE: { twoWay: true }, // 自定義驗證函數 propF: { validator: function (value) { return value > 10 } }, // 轉換函數（1.0.12 新增） // 在設置值之前轉換值 propG: { coerce: function (val) { return val + '' // 將值轉換為字符串 } }, propH: { coerce: function (val) { return JSON.parse(val) // 將 JSON 字符串轉換為對象 } } }});其他實例：
Vue.component('modal', { template: '#modal-template', props: { show: { type: Boolean, required: true, twoWay: true } }});11.使用slot分發內容
<slot> 元素作為組件模板之中的內容分發插槽。這個元素自身將被替換。
有 name 特性的 slot 稱為命名 slot。 有 slot 特性的內容將分發到名字相匹配的命名 slot。
例如，假定我們有一個 multi-insertion 組件，它的模板為：
<div> <slot name="one"></slot> <slot></slot> <slot name="two"></slot></div>
父組件模板：
<multi-insertion> <p slot="one">One</p> <p slot="two">Two</p> <p>Default A</p></multi-insertion>
渲染結果為：
<div> <p slot="one">One</p> <p>Default A</p> <p slot="two">Two</p></div>
新聞熱點
疑難解答
