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!
No.5一步步學習vuejs之事件監聽和組件