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:'',
        },
    })