vue學習筆記（一）關于事件冒泡和鍵盤事件 以及與Angular的差別

一、事件冒泡

方法一、使用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('按下了Enter鍵盤');

        }

    },

  <input type="text" @keyup="show3($event)">

show3:function(ev){

        console.log(ev.keyCode);

        if(ev.keyCode==13){

            alert('Enter鍵盤彈起的時候觸發的事件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)
            }

        }