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