Vue之事件處理、表單輸入和修飾符後綴

事件處理

     監聽事件

         v-on

            指令用來監聽DOM元素來觸發一些js的代碼

             1.監聽事件-直接觸發代碼

                <p>{{count}}</p>
                <button @click="count = count - 1">-</button>

             2.方法事件處理器-寫函數名

                <p>{{name}}</p>
                <button @click="handleClick"></button>

               methods:{ 
                    handleClick:function(ev){//ev表明這個元素自己
                    this.name = 'aaa';
                    console.log('ev.target');
                },

             3.內聯處理器方法-執行函數表達式,能夠傳入參數,事件對象用$event來傳，

                 <button @click="handleClick2('111','222',$event)"></button> 

                handleClick2:function(data1,data2,ev){
                    console.log(data1,data2,ev.target);
                },

             4.事件修飾符

                在事件處理程序中，好比阻止冒泡，event.preventDefault()或event.stopPropagation()是經常使用的，雖然methods也能夠實現，但更好的方法是：讓methods實現純粹的數據邏輯，而不是去處理DOM元素。

                Vue.js提供了v-on的事件修飾符，經過.指令後綴來調用修飾符

                     .stop  阻止冒泡

                        <ul @click="handleUlClick">
                            <li @click.stop="handleLiClick">111</li>
                            <li>222</li>
                            <li>333</li>
                        </ul>

                     .prevent  阻止默認行爲

                          <form @submit.prevent="onSubmit">  

                            修飾符能夠串聯

                          <form @submit.stop.prevent="onSubmit">  

                            只有修飾符

                          <form @submit.prevent>

                     .capture  捕獲事件

                     .self 只有點擊到了元素自身區域才能觸發。

                        <ul @click.self="handleUlClick">
                            <li @click="handleLiClick">111</li>
                            <li>222</li>
                            <li>333</li>
                        </ul>

            handleUlClick(){
                console.log('ul點擊');
            },
            handleLiClick(){
                console.log('li點擊');
            },

                     .once  只觸發一次

                          <li @click.once="handleLiClick">111</li> 

             5.按鍵修飾符

                事件中，咱們常要檢測常見的鍵值，Vue容許v-on指令在監聽時添加關鍵修飾符。

                 .enter .tab .delete(捕獲刪除和退格鍵) .esc .space .up .down .left .right

                      <input type="text" @KeyUp.enter="handleEnter" placeholder="enter以後方法才能調用"> 

            handleEnter(ev){
                console.log('enter以後方法才能調用' + ev.target.value);
            }

 

表單輸入綁定 

    v-model 會忽略表單元素的value,checked,selected特性的初始值，div沒有這些基礎屬性，並不能綁定v-model，由於它會選擇Vue實例數據來做爲具體的值,應該經過javascript組件中的data選項中聲明值

          input: <input type="text" v-model="myText">{{myText}} 

var vm = new Vue({
        el:'#box',
        data:{
            myText:'22',
        },
    })

        textarea:    textarea也是相同的寫法

    複選框   checkbox

        <!-- input之checkbox  -->
        <p><input type="checkbox" v-model="isChecked">記住用戶名</p>
        {{isChecked}}
        <!-- 多個input之checkbox,建立一個空數組，而且必須加上value值  -->
        <p><input type="checkbox" v-model="checkedgroup" value="react">react</p>
        <p><input type="checkbox" v-model="checkedgroup" value="vue">vue</p>
        <p><input type="checkbox" v-model="checkedgroup" value="angular">angular</p>
        <p>{{checkedgroup}}</p>

    var vm = new Vue({
        el:'#box',
        data:{
            isChecked:true,
            checkedgroup:[],//多項選項框，必定要設置成空數組
        },
    })

    單選     radio

        <!-- 單選框v-modle，也必需要有value值 -->
        <p>react:<input type="radio" value="react" v-model="picked"></p>
        <p>Vue:<input type="radio" value="Vue" v-model="picked"></p>
        <p>{{picked}}</p>

    var vm = new Vue({
        el:'#box',
        data:{
            picked:'Vue',//單選框能夠設定默認選中的項。
        },
    })

            select

        <!-- 下拉框 下拉框能夠不須要設定value值-->
        <div>
            <select v-model="selected">
                <option disabled value="">請選擇</option>
                <option>a</option>
                <option>b</option>
                <option>c</option>
            </select>
            <p>{{selected}}</p>
        </div>

    var vm = new Vue({
        el:'#box',
        data:{
            selected:'',//下拉框也能夠設定默認選中項
        },
    })

    修飾符後綴

        .lazy   轉變成從change事件中同步，當失去焦點的時候纔會同步雙向數據綁定

        <!-- 修飾符後綴.lazy,轉變成從change事件中同步 -->
        <p>修飾符後綴.lazy,失去焦點後觸發：<input type="text" v-model.lazy="msg">{{msg}}</p>

    var vm = new Vue({
        el:'#box',
        data:{
            msg:'',
        },
    })

        .number  能夠將用戶輸入的內容自動轉化成number類型

        <!-- 修飾符後綴.number,能夠將用戶輸入的內容自動轉化成number類型，由於本來就算將type=number,輸出的依舊是字符串類型 -->
        <p>修飾符後綴.number,轉換成number類型<input type="number" v-model.number="age">{{age}}</p>

    var vm = new Vue({
        el:'#box',
        data:{
            age:18,
        },
    })

        .trim  若是自動過濾用戶的首尾空格

        <!-- 修飾符後綴.trim,若是自動過濾用戶的首尾空格 -->
        <p>修飾符後綴.trim,自動過濾用戶的首尾空格:<input type="text" v-model.trim="trimTest">{{trimTest}}</p>

    var vm = new Vue({
        el:'#box',
        data:{
            trimTest:'',
        },
    })