資料 知識點 http://weidian.com/i/2166520246?ifr=itemdetail&wfr=qfriend

Vue.js 事件處理器

事件監聽可以使用 v-on 指令：

v-on

<divid="app"><buttonv-on:click="counter += 1">增加 1</button><p>這個按鈕被點擊了 {{ counter }} 次。</p></div><script>new Vue({ el: '#app', data: { counter: 0 }})</script>

嘗試一下 »

通常情況下，我們需要使用一個方法來調用 JavaScript 方法。

v-on 可以接收一個定義的方法來調用。

v-on

<divid="app"><!-- `greet` 是在下面定義的方法名 --><buttonv-on:click="greet">Greet</button></div><script>var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // 在 `methods` 對象中定義方法 methods: { greet: function (event) { // `this` 在方法裡指當前 Vue 實例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } }})// 也可以用 JavaScript 直接調用方法app.greet() // -> 'Hello Vue.js!'</script>

嘗試一下 »

除了直接綁定到一個方法，也可以用內聯 JavaScript 語句：

v-on

<divid="app"><buttonv-on:click="say('hi')">Say hi</button><buttonv-on:click="say('what')">Say what</button></div><script>new Vue({ el: '#app', methods: { say: function (message) { alert(message) } }})</script>

嘗試一下 »

事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通過由點(.)表示的指令後綴來調用修飾符。

• .stop

• .prevent

• .capture

• .self

• .once

<!-- 阻止單擊事件冒泡 --><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><!-- click 事件至少觸發一次，2.1.4版本新增 --><a v-on:click.once="doThis"></a>

按鍵修飾符

Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 keyCode 是 13 時調用 vm.submit() --><input v-on:keyup.13="submit">

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 --><input v-on:keyup.enter="submit"><!-- 縮寫語法 --><input @keyup.enter="submit">

全部的按鍵別名：

• .enter

• .tab

• .delete (捕獲 "刪除" 和 "退格" 鍵)

• .esc

• .space

• .up

• .down

• .left

• .right

• .ctrl

• .alt

• .shift

• .meta

實例

<p><!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>

Vue.js 表單

這節我們為大家介紹 Vue.js 表單上的應用。

你可以用 v-model 指令在表單控件元素上創建雙向數據綁定。

v-model 會根據控件類型自動選取正確的方法來更新元素。

輸入框

實例中演示了 input 和 textarea 元素中使用 v-model 實現雙向數據綁定：

<divid="app"><p>input 元素：</p><inputv-model="message"placeholder="編輯我……"><p>消息是: {{ message }}</p><p>textarea 元素：</p><pstyle="white-space: pre">{{ message2 }}</p><textareav-model="message2"placeholder="多行文本輸入……"></textarea></div><script>new Vue({ el: '#app', data: { message: 'Runoob', message2: '菜鳥教程\r\nhttp://www.runoob.com' }})</script>

嘗試一下 »

複選框

複選框如果是一個為邏輯值，如果是多個則綁定到同一個數組：

複選框

以下實例中演示了複選框的雙向數據綁定：

<divid="app"><p>單個複選框：</p><inputtype="checkbox"id="checkbox"v-model="checked"><labelfor="checkbox">{{ checked }}</label><p>多個複選框：</p><inputtype="checkbox"id="runoob"value="Runoob"v-model="checkedNames"><labelfor="runoob">Runoob</label><inputtype="checkbox"id="google"value="Google"v-model="checkedNames"><labelfor="google">Google</label><inputtype="checkbox"id="taobao"value="Taobao"v-model="checkedNames"><labelfor="taobao">taobao</label><br><span>選擇的值為: {{ checkedNames }}</span></div><script>new Vue({ el: '#app', data: { checked : false, checkedNames: [] }})</script>

嘗試一下 »

實例中勾選複選框效果如下所示：

單選按鈕

以下實例中演示了單選按鈕的雙向數據綁定：

單選按鈕

<divid="app"><inputtype="radio"id="runoob"value="Runoob"v-model="picked"><labelfor="runoob">Runoob</label><br><inputtype="radio"id="google"value="Google"v-model="picked"><labelfor="google">Google</label><br><span>選中值為: {{ picked }}</span></div><script>new Vue({ el: '#app', data: { picked : 'Runoob' }})</script>

嘗試一下 »

選中後，效果如下圖所示：

select 列表

以下實例中演示了下拉列表的雙向數據綁定：

select

<divid="app"><selectv-model="selected"name="fruit"><optionvalue="">選擇一個網站</option><optionvalue="www.baidu.com">Runoob</option><optionvalue="www.google.com">Google</option></select><divid="output"> 選擇的網站是: {{selected}} </div></div><script>new Vue({ el: '#app', data: { selected: '' }})</script>

修飾符

.lazy

在默認情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >

.number

如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：

<input v-model.number="age" type="number">

這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型。

.trim

如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：

<input v-model.trim="msg">

Vue.js 組件

組件（Component）是 Vue.js 最強大的功能之一。

組件可以擴展 HTML 元素，封裝可重用的代碼。

組件系統讓我們可以用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹：

註冊一個全局組件語法格式如下：

Vue.component(tagName, options)

tagName 為組件名，options 為配置選項。註冊後，我們可以使用以下方式來調用組件：

<tagName></tagName>

全局組件

所有實例都能用全局組件。

全局組件實例

註冊一個簡單的全局組件 runoob，並使用它：

<divid="app"><runoob></runoob></div><script>// 註冊Vue.component('runoob', { template: '<h1>自定義組件!</h1>'})// 創建根實例new Vue({ el: '#app'})</script>

嘗試一下 »

局部組件

我們也可以在實例選項中註冊局部組件，這樣組件只能在這個實例中使用：

局部組件實例

註冊一個簡單的局部組件 runoob，並使用它：

<divid="app"><runoob></runoob></div><script>var Child = { template: '<h1>自定義組件!</h1>'} // 創建根實例new Vue({ el: '#app', components: { // <runoob> 將只在父模板可用 'runoob': Child }})</script>

嘗試一下 »

Prop

prop 是父組件用來傳遞數據的一個自定義屬性。

父組件的數據需要通過 props 把數據傳給子組件，子組件需要顯式地用 props 選項聲明 "prop"：

Prop 實例

<divid="app"><childmessage="hello!"></child></div><script>// 註冊Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實例中像 "this.message" 這樣使用 template: '<span>{{ message }}</span>'})// 創建根實例new Vue({ el: '#app'})</script>

嘗試一下 »

動態 Prop

類似於用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 動態綁定 props 的值到父組件的數據中。每當父組件的數據變化時，該變化也會傳導給子組件：

Prop 實例

<divid="app"><div><inputv-model="parentMsg"><br><childv-bind:message="parentMsg"></child></div></div><script>// 註冊Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實例中像 "this.message" 這樣使用 template: '<span>{{ message }}</span>'})// 創建根實例new Vue({ el: '#app', data: { parentMsg: '父組件內容' }})</script>

嘗試一下 »

以下實例中將 v-bind 指令將 todo 傳到每一個重複的組件中：

Prop 實例

<divid="app"><ol><todo-itemv-for="item in sites"v-bind:todo="item"></todo-item></ol></div><script>Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>'})new Vue({ el: '#app', data: { sites: [ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] }})</script>

嘗試一下 »

注意: prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。

Prop 驗證

組件可以為 props 指定驗證要求。

prop 是一個對象而不是字符串數組時，它包含驗證要求：

Vue.component('example', { props: { // 基礎類型檢測 （`null` 意思是任何類型都可以） propA: Number, // 多種類型 propB: [String, Number], // 必傳且是字符串 propC: { type: String, required: true }, // 數字，有默認值 propD: { type: Number, default: 100 }, // 數組／對象的默認值應當由一個工廠函數返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定義驗證函數 propF: { validator: function (value) { return value > 10 } } }})

type 可以是下面原生構造器：

• String

• Number

• Boolean

• Function

• Object

• Array

type 也可以是一個自定義構造器，使用 instanceof 檢測。

自定義事件

父組件是使用 props 傳遞數據給子組件，但如果子組件要把數據傳遞回去，就需要使用自定義事件！

我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現了事件接口(Events interface)，即：

• 使用 $on(eventName) 監聽事件

• 使用 $emit(eventName) 觸發事件

另外，父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。

以下實例中子組件已經和它外部完全解耦了。它所做的只是觸發一個父組件關心的內部事件。

實例

<divid="app"><divid="counter-event-example"><p>{{ total }}</p><button-counterv-on:increment="incrementTotal"></button-counter><button-counterv-on:increment="incrementTotal"></button-counter></div></div><script>Vue.component('button-counter', { template: '<buttonv-on:click="increment">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1 this.$emit('increment') } },})new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } }})</script>

嘗試一下 »

如果你想在某個組件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on 。例如：

<my-component v-on:click.native="doTheThing"></my-component>

Vue.js 自定義指令

除了默認設置的核心指令( v-model 和 v-show ), Vue 也允許註冊自定義指令。

下面我們註冊一個全局指令 v-focus, 該指令的功能是在頁面加載時，元素獲得焦點：

實例

<divid="app"><p>頁面載入時，input 元素自動獲取焦點：</p><inputv-focus></div><script>// 註冊一個全局自定義指令 v-focusVue.directive('focus', { // 當綁定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() }})// 創建根實例new Vue({ el: '#app'})</script>

嘗試一下 »

我們也可以在實例使用 directives 選項來註冊局部指令，這樣指令只能在這個實例中使用：

實例

<divid="app"><p>頁面載入時，input 元素自動獲取焦點：</p><inputv-focus></div><script>// 創建根實例new Vue({ el: '#app', directives: { // 註冊一個局部的自定義指令 v-focus focus: { // 指令的定義 inserted: function (el) { // 聚焦元素 el.focus() } } }})</script>

嘗試一下 »

鉤子

鉤子函數

指令定義函數提供了幾個鉤子函數（可選）：

• bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。

• inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。

• update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數參數見下）。

• componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。

• unbind: 只調用一次， 指令與元素解綁時調用。

鉤子函數參數

鉤子函數的參數有：

• el: 指令所綁定的元素，可以用來直接操作 DOM 。

• binding: 一個對象，包含以下屬性：

• name: 指令名，不包括 v- 前綴。

• value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。

• oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

• expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

• arg: 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 "foo"。

• modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。

• vnode: Vue 編譯生成的虛擬節點，查閱 VNode API 瞭解更多詳情。

• oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

以下實例演示了這些參數的使用：

實例

<divid="app"v-runoob:hello.a.b="message"></div><script>Vue.directive('runoob', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') }})new Vue({ el: '#app', data: { message: '百度!' }})</script>

嘗試一下 »

有時候我們不需要其他鉤子函數，我們可以簡寫函數，如下格式：

Vue.directive('runoob', function (el, binding) { // 設置指令的背景顏色 el.style.backgroundColor = binding.value.color})

指令函數可接受所有合法的 JavaScript 表達式，以下實例傳入了 JavaScript 對象：

實例

<divid="app"><divv-runoob="{ color: 'green', text: '百度!' }"></div></div><script>Vue.directive('runoob', function (el, binding) { // 簡寫方式設置文本及背景顏色 el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color})new Vue({ el: '#app'})</script>

Vue.js 路由

本章節我們將為大家介紹 Vue.js 路由。

Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。

通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。

Vue.js 路由需要載入 vue-router 庫

中文文檔地址：vue-router文檔。

安裝

1、直接下載 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

NPM

推薦使用淘寶鏡像：

cnpm install vue-router

簡單實例

Vue.js + vue-router 可以很簡單的實現單頁應用。

以下實例中我們將 vue-router 加進來，然後配置組件和路由映射，再告訴 vue-router 在哪裡渲染它們。代碼如下所示：

HTML 代碼

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/vue-router/dist/vue-router.js"></script><divid="app"><h1>Hello App!</h1><p><!-- 使用 router-link 組件來導航. --><!-- 通過傳入 `to` 屬性指定鏈接. --><!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 --><router-linkto="/foo">Go to Foo</router-link><router-linkto="/bar">Go to Bar</router-link></p><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這裡 --><router-view></router-view></div>

JavaScript 代碼

// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)// 1. 定義（路由）組件。// 可以從其他文件 import 進來constFoo = {template: '<div>foo</div>'}constBar = {template: '<div>bar</div>'}// 2. 定義路由// 每個路由應該映射一個組件。 其中"component" 可以是// 通過 Vue.extend() 創建的組件構造器，// 或者，只是一個組件配置對象。// 我們晚點再討論嵌套路由。constroutes = [{path: '/foo', component: Foo}, {path: '/bar', component: Bar}]// 3. 創建 router 實例，然後傳 `routes` 配置// 你還可以傳別的配置參數, 不過先這麼簡單著吧。constrouter = newVueRouter({routes// （縮寫）相當於 routes: routes})// 4. 創建和掛載根實例。// 記得要通過 router 配置參數注入路由，// 從而讓整個應用都有路由功能constapp = newVue({router}).$mount('#app')// 現在，應用已經啟動了！

嘗試一下 »

NPM 路由實例

接下來我們演示了一個使用 npm 簡單的路由實例，開始前，請先下載該實例源代碼：

路由實例

你也可以在 Github 上下載：https://github.com/chrisvfritz/vue-2.0-simple-routing-example

下載完後，解壓該目錄，重命名目錄為 vue-demo，vu 並進入該目錄，執行以下命令：

# 安裝依賴，使用淘寶資源命令 cnpmcnpm install# 啟動應用，地址為 localhost:8080cnpm run dev

如果你需要發佈到正式環境可以執行以下命令：

cnpm run build

執行成功後，訪問 http://localhost:8080 即可看到如下界面：