欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中的事件,表单输入绑定,计算属性computed及监听属性watch

程序员文章站 2024-01-02 21:12:40
...

事件:
1.事件三要素:

	事件目标
    事件对象
    事件处理程序

2.事件流

 默认情况,先进行事件捕获(从外向内),再进行事件冒泡(从内向外)

3.事件绑定

 app实例对象能够获取/操作data/methods中的变量
 1.直接操作变量
     v-on:click='num++'       //num是data中的变量
 2.调用函数
     v-on:click='handler'       //在handler声明时,可以写入形参event,即事件对象,
 3.传递参数
     常量: v-on:click='handler(1)'
     变量:v-on:click='handler(a)'
     事件对象:v-on:click='handler($event)'     //$event:vue的内部属性

4.事件修饰符:
:修饰符可以连用

 .stop:停止事件冒泡
     v-on:click.stop='handler'
 .prevent:组织事件默认行为
   实例: <form action="1.html" v-on:submit.prevent>
               <h1>签到</h1>
               <input type="number">
               <button>submit</button>
           </form>
 .capture:在事件捕获阶段执行事件处理函数
 .self:只当在event.target是当前元素时触发处理函数
 .once:事件处理函数执行一次后解绑
 .passive:滚动事件的默认行为(即滚动行为)将会立即触发,一般与scroll连用,能够提升移动端的性能

5.按键修饰符:

     一般与keyup事件类型配合使用
     .enter   .right  .delete....

6.鼠标修饰符:

  .left   .right .middle

7.表单输入绑定

  v-model:    绑定给了input的value值
        双向数据绑定
        1.单行输入框: <input type="text" v-model='value'>  value在data中声明
        2.多行文本框:<textarea cols="30" rows="10" v-model='value'></textarea>
        实例:
            <b>{{checks}}</b>
            <table>
                <tr v-for='item in users'>
                    <td>
                        <input type="checkbox" :value='item.id' v-model='checks'>
                    </td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
                </tr>
            </table>
    修饰符:增加表单绑定能力
        .lazy:不时时同步,在change时更新
        .number:想要自动将用户输入值转换为数值类型,可给v-model添加number修饰符
        .trim:自动过滤首位空字符
            实例:
                |<b>{{value}}</b>|
                <input type="text" v-model.trim='value'>

8.计算属性:

   computed:{
        //多个计算属性
        reverStr(){
            return this.str.split('').reverse().join('')
        }
    }
    
    与data同级别
    希望一个变量经过某种计算然后输出,而不是直接输出
            反转输出:<b>{{str.split('').reverse().join('')}}</b>
    computed:
        实例1:
            html代码:   
                                <input type="text" v-model='str'>
                        原值输出:<b>{{str}}</b><br>
                        反转输出:<b>{{str.split('').reverse().join('')}}</b><br>
                        反转输出2:<b>{{reverseStr}}</b>
            js代码:    computed:{
                            //存放计算属性
                            reverseStr(){
                                return this.str.split('').reverse().join('')
                            }
                        }
        实例2:
            html代码:
                <table>
                    <tr v-for='item in newUsers'>
                        <b>{{checks}}</b>
                        <td>
                            <input type="checkbox" :value='item.id' v-model='checks'>
                        </td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.gender}}</td>
                        <td>{{item.date}}</td>
                    </tr>
                </table>
                <button>批量删除</button>
            js代码:
                computed:{
                    //存放计算属性
                    newUsers(){
                        this.users.forEach(function(item){
                            item.date=new Date(item.date).toLocaleDateString();
                        })
                        return this.users;
                    }
                }

7.监听属性:

  与data同级别
    当需要在数据变化时执行异步函数或开销较大的操作时,使用监听器是最有用的
    watch:
        1.默认只能监听栈区中的变量(基本数据类型)
            实例:
                js代码:
                    watch:{
                        //默认只能监听栈区中的变量
                        substr(newstr,oldstr){
                            alert(newstr,oldstr);
                        }
                    }
                html代码:
                    {{substr.name}}
                    <input type="text" v-model='substr.name'>
        2.当deep为true时表示深度监听
            实例:
                js代码:
                    watch:{
                        substr:{
                            //handler必须为handler
                            handler(newstr,oldstr){
                                alert(newstr,oldstr);
                            },
                            deep:true
                        }
                    }
                    html代码:
                    {{substr.name}}
                    <input type="text" v-model='substr.name'>

上一篇:

下一篇: