一、事件冒泡
方法一、使用event.cancelBubble = true來組織冒泡
<div @click="show2()">
<input type="button" value="按鈕" @click="show1($event)">
</div>
methods:{
show1:function(ev){
console.log(ev);
alert(1);
ev.cancelBubble=true; /*阻止冒泡*/
},
show2:function(){
alert(2);
}
}
方法二：使用vue自帶的方法組織冒泡
<div @click="show2()">
<input type="button" value="按鈕" @click.stop="show1()">
</div>
拓展：事件修飾符
參考API：http://cn.vuejs.org/v2/guide/events.html#事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題， Vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令后綴來調用修飾符。
.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>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
二、鍵盤事件
<input type="text" @keydown="show"> show:function(){ alert(1); } <input type="text" @keydown="show2($event)"> show2:function(ev){ console.log(ev.keyCode); if(ev.keyCode==13){ alert('按下了回車鍵盤'); } }, <input type="text" @keyup="show3($event)"> show3:function(ev){ console.log(ev.keyCode); if(ev.keyCode==13){ alert('回車鍵盤彈起的時候觸發的事件show3'); } }
拓展：按鍵修飾符
參考API：http://cn.vuejs.org/v2/guide/events.html#按鍵修飾符
在監聽鍵盤事件時，我們經常需要監測常見的鍵值。 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
********
注意：在Mac系統鍵盤上，meta對應命令鍵 (⌘)。在Windows系統鍵盤meta對應windows徽標鍵(⊞)。在Sun操作系統鍵盤上，meta對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在MIT和Lisp鍵盤及其后續，比如Knight鍵盤，space-cadet鍵盤，meta被標記為“META”。在Symbolics鍵盤上，meta被標記為“META” 或者 “Meta”。
********
可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
三、checkbox
注意對比angular寫法，選中與不選中直接對應的是顯示還是隱藏我們的box，flag在默認的data中設置為false
<input type="checkbox" v-model="flag"/>
<div class="box" v-if="flag">
box
</div>
四、select
對比angular寫法http://www.runoob.com/angularjs/angularjs-select.html
data: { selected: 'C', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } <select v-model="selected"> <option v-for="item in options" :value="item.value"> {{item.text}} </option> </select><br/> 選中:{{selected}}
五、radio
對比angular
使用四中的源數據
<ul>
<li v-for="option in options">
<input type="radio" name="myRadio" :value="option.value" v-model="selected"/>{{option.text}}
</li>
</ul><br/>
<span>選擇的是: {{ selected }}</span>
六、生命周期函數
對比react生命周期函數
初始化：
getDefaultProps：作用於組件類，只調用一次，返回對象用於設置默認的props，對於引用值，會在實例中共享。
getInitialState：作用於組件的實例，在實例創建時調用一次，用於初始化每個實例的state，此時可以訪問this.props。
componentWillMount：在完成首次渲染之前調用，此時仍可以修改組件的state。
render
必選的方法，創建虛擬DOM，該方法具有特殊的規則：
只能通過this.props和this.state訪問數據
可以返回null、false或任何React組件
只能出現一個頂級組件（不能返回數組）
不能改變組件的狀態
不能修改DOM的輸出
componentDidMount：真實的DOM被渲染出來后調用，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。
運行時：
componentWillReceiveProps：組件接收到新的props時調用，並將其作為參數nextProps使用，此時可以更改組件props及state。
componentWillReceiveProps: function(nextProps) { if (nextProps.bool) { this.setState({ bool: true }); } }
shouldComponentUpdate：組件是否應當渲染新的props或state，返回false表示跳過后續的生命周期方法，通常不需要使用以避免出現bug。在出現應用的瓶頸時，可通過該方法進行適當的優化。
componentWillUpdate：接收到新的props或者state后，進行渲染之前調用，此時不允許更新props或state。
render
componentDidUpdate：完成渲染新的props或者state后調用，此時可以訪問到新的DOM元素。
銷毀：
componentWillUnmount：組件被移除之前被調用，可以用於做一些清理工作，在componentDidMount方法中添加的所有任務都需要在該方法中撤銷，比如創建的定時器或添加的事件監聽器。
參考API：http://cn.vuejs.org/v2/guide/instance.html#實例生命周期
每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如，實例需要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，然后在數據變化時更新 DOM 。在這個過程中，實例也會調用一些 生命周期鈎子 ，這就給我們提供了執行自定義邏輯的機會。
beforeCreate:實例剛剛被創建1
created:實例已經創建完成2
beforeMount:模板編譯之前3
mounted:模板編譯完成4------********請求數據放在這個里面 必須記住*****
beforeUpdate:數據更新之前
updated:數據更新完畢
beforeDestroy:實例銷毀之前
destroyed:實例銷毀完成 ----this.$destroy();銷毀實例
{{msg}} <input type="button" value="更新數據" @click="update()"> <input type="button" value="銷毀組件" @click="destroy"> data:{ msg:'welcome vue2.0' }, methods:{ /*自定義方法*/ update(){ this.msg='大家好'; }, destroy(){ this.$destroy(); /*銷毀實例 組件*/ } }
七、模擬百度搜索提示功能
1、監聽文本框中的值
2、請求百度的接口
3、實現方法，watch監聽文本框的輸入變化，按鍵修飾符keyup實現
4、可以在表單的input 元素上使用v-model 指令來創建雙向數據綁定。它會根據input元素的類型自動選取正確的綁定模式。
// var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue; <input type="text" v-model="search"/> <br/> <ul> <li v-for="item in list"> {{item}} </li> </ul>
方法一watch:
引入<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script> data:{ search:'', list:[] } var timer=''; vm.$watch('search',function(newValue){ console.log(newValue); clearTimeout(timer); var _that=this; timer=setTimeout(function(){ //去服務器請求數據 var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue; _that.$http.jsonp(api,{ jsonp:'cb' /*改變回調函數*/ }).then(function(data){ console.log(data.body.s); _that.list=data.body.s; /*改變data綁定的值*/ }) },200); })
方法二：鍵盤事件 @keyup
<input type="text" v-model="search" @keyup="requestData()"/> data:{ search:'', list:[], timer:'' }, methods:{ requestData:function(){ var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search; var _that=this; clearTimeout(this.timer); /*清除定時器*/ this.timer=setTimeout(function(){ //去服務器請求數據 _that.$http.jsonp(api,{ jsonp:'cb' /*改變回調函數*/ }).then(function(data){ console.log(data.body.s); _that.list=data.body.s; /*改變data綁定的值*/ }) },200) } }