No.5一步步學習vuejs之事件監聽和組件

一監聽事件

能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。

<div id="demo1">
<button v-on:click="count+=1">Add 1</button>
<p>you have click the button for {{count}} times!</p>
</div>

<script>
new Vue({ el:"#demo1", data:{ count:1 } }) </script>

 

運行結果: 

2.事件處理方法

然而許多事件處理邏輯會更爲複雜，因此直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。所以 v-on 還能夠接收一個須要調用的方法名稱。
代碼以下：

<div id = "demo2">
<button v-on:click="greet">SayHello</button>
</div>
<script>
var demo2 = new Vue({ el:"#demo2", data:{ name:"Clay", }, methods:{ greet:function(event){ alert('Hello'+this.name+'!') if(event){ alert(event.target.tagName) } } } }) demo2.greet() </script>

 

運行結果： 

3 內聯處理器中的方法

先貼代碼 兩個事件屬性用到內聯

<div id = "demo3">
<button v-on:click="say('hi')">say hi</button>
<button v-on:click="say('sha')">say hello</button>
</div>
<script>
new Vue({ el:"#demo3", methods:{ say:function(message){ alert(message) } } }) </script>

 

運行結果:除了直接綁定到一個方法，也能夠在內聯 JavaScript 語句中調用方法： 

4 事件修飾符

爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。以前提過，修飾符是由點開頭的指令後綴來表示的。
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

.stop
.prevent
.capture
.self
.once

5 系統修飾鍵

能夠用以下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。
.ctrl
.alt
.shift
.meta

<input @keyup.alt.67="clear">

<div @click.ctrl="doSomething">Do something</div>
鼠標按鈕修飾符
2.1.0 新增
.left
.right
.middle
這些修飾符會限制處理函數僅響應特定的鼠標按鈕。

二Vue組件

2.1什麼是組件

組件 (Component) 是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠表現爲用 is 特性進行了擴展的原生 HTML 元素。
全部的 Vue 組件同時也都是 Vue 的實例，因此可接受相同的選項對象 (除了一些根級特有的選項) 並提供相同的生命週期鉤子。

2.2註冊一個組件
要註冊一個全局組件，可使用 Vue.component(tagName, options)。例如：

Vue.component('my-component', { // 選項 })

 

2.2.1全局註冊 

組件在註冊以後，即可以做爲自定義元素<my-component></my-component>在一個實例的模板中使用。注意確保在初始化根實例以前註冊組件：

2.2.2局部註冊

你沒必要把每一個組件都註冊到全局。你能夠經過某個 Vue 實例/組件的實例選項 components註冊僅在其做用域中可用的組件：

var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 將只在父組件模板中可用 'my-component': Child } })

 

構造 Vue 實例時傳入的各類選項大多數均可以在組件裏使用。只有一個例外：data 必須是函數。實際上，若是你這麼作： 

Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } })

 

那麼 Vue 會中止運行，並在控制檯發出警告 

2.3組件結合

組件設計初衷就是要配合使用的，最多見的就是造成父子組件的關係：組件 A 在它的模板中使用了組件 B。它們之間必然須要相互通訊：父組件可能要給子組件下發數據，子組件則可能要將它內部發生的事情告知父組件。然而，經過一個良好定義的接口來儘量將父子組件解耦也是很重要的。這保證了每一個組件的代碼能夠在相對隔離的環境中書寫和理解，從而提升了其可維護性和複用性。
在 Vue 中，父子組件的關係能夠總結爲 prop 向下傳遞，事件向上傳遞。父組件經過 prop給子組件下發數據，子組件經過事件給父組件發送消息。看看它們是怎麼工做的。

自定義事件
咱們知道，父組件使用 prop 傳遞數據給子組件。但子組件怎麼跟父組件通訊呢？這個時候 Vue 的自定義事件系統就派得上用場了。
使用 v-on 綁定自定義事件
每一個 Vue 實例都實現了事件接口，即：
使用 $on(eventName)監聽事件
使用 $emit(eventName)觸發事件

div id="demo2"> <p>{{totalNumber}}</p>
<button-add v-on:add="addTotal"></button-add>
<button-add v-on:add="addTotal"></button-add> <!-- 這裏是監聽事件-->
<button-add v-on:add="addTotal"></button-add>
<button-add v-on:add="addTotal"></button-add> <!-- 這裏是監聽事件-->
</div>


<script> Vue.component("button-add",{ template:'<button v-on:click="addTotalNumber">{{count}}</button>', data:function(){ return { count:0 } }, methods:{ addTotalNumber:function(){ this.count +=1
this.$emit('add') //這裏觸發相應的事件
} } }) new Vue({ el:"#demo2", data:{ totalNumber:0 }, methods:{ addTotal:function(){ this.totalNumber+=1 } } }) </script>

 

運行結果以下 

局部註冊

你沒必要把每一個組件都註冊到全局。你能夠經過某個 Vue 實例/組件的實例選項 components註冊僅在其做用域中可用的模板解析注意事項組件：

var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 將只在父組件模板中可用 'my-component': Child } })

 

組件組合 

組件設計初衷就是要配合使用的，最多見的就是造成父子組件的關係：組件 A 在它的模板中使用了組件 B。它們之間必然須要相互通訊：父組件可能要給子組件下發數據，子組件則可能要將它內部發生的事情告知父組件。然而，經過一個良好定義的接口來儘量將父子組件解耦也是很重要的。這保證了每一個組件的代碼能夠在相對隔離的環境中書寫和理解，從而提升了其可維護性和複用性。
在 Vue 中，父子組件的關係能夠總結爲 prop 向下傳遞，事件向上傳遞。父組件經過 prop給子組件下發數據，子組件經過事件給父組件發送消息。看看它們是怎麼工做的。

prop 向下傳遞，事件向上傳遞

Prop使用 Prop 傳遞數據

組件實例的做用域是孤立的。這意味着不能 (也不該該) 在子組件的模板內直接引用父組件的數據。父組件的數據須要經過 prop 才能下發到子組件中。
子組件要顯式地用 props 選項聲明它預期的數據：

Vue.component('child', { // 聲明 props props: ['message'], // 就像 data 同樣，prop 也能夠在模板中使用 // 一樣也能夠在 vm 實例中經過 this.message 來使用 template: '<span>{{ message }}</span>' })

 

而後咱們能夠這樣向它傳入一個普通字符串： 

<child message="hello!"></child>

 

結果：hello!