Vue 事件处理 事件修饰符 表单处理 表单修饰符 双向绑定 生命周期 钩子函数

1-事件处理

1.1-事件绑定

  • 通过v-on:事件名称="事件处理函数"绑定事件

    <button v-on:事件名称="事件处理函数">按钮</button>

1.2-事件传参

  • 通过事件处理函数后的()传递参数即可

    <button v-on:事件名称="事件处理函数(参数)">按钮</button>

1.3-事件对象

  • 无需给事件处理函数传递额外参数

    系统会自动注入事件对象, 直接在事件处理函数定义的位置通过形参接受即可

    const vm=new Vue({
     el:'#app',
     data:{

     },
     methods:{
         // 键盘事件处理函数, e是系统自动注入的事件对象
         checkUser(e){
             console.log(e.target.value);
         }
     }
 });

  • 需要给事件处理函数传递额外参数

    $event是一个系统变量, 代表事件对象

    <input type="text" placeholder="请输入用户名" @keyup="checkUser($event,'hello')"/>
<script>
 const vm=new Vue({
        el:'#app',
        data:{
            // 错误提示信息
            tips:''
        },
        methods:{
            // 键盘事件处理函数, e是系统自动注入的事件对象
            checkUser(e,msg){
                // 系统已经存在的用户名
                const users=['admin','jack','tom','rose'];
                const username=e.target.value.trim();
                if(username===''){
                    return  this.tips='请输入用户名';
                }
                if(users.indexOf(username)===-1){
                    // 更新tips: 用户名可以
                    return this.tips='恭喜你, 用户名可用';
                }
                this.tips='用户名不可用';
            }
        }
    });
</script>

1.4-事件修饰符

  • 作用: 限制事件触发的条件

  • 语法

    @事件名称.事件修饰符="事件处理函数"

1.4.1-stop

  • 作用: 阻止事件冒泡
<div id="app">
    <div class="wrap" @click="wrapClick">
        <!-- 使用事件修饰符stop, 阻止事件冒泡 -->
        <div class="box" @click.stop="boxClick"></div>
    </div>
</div>

1.4.2-prevent

  • 作用: 阻止默认行为
<a href="http://baidu.com" @click.prevent="handle">a标签</a>

1.4.3-once

  • 作用: 限定事件只执行一次
<!--使用事件修饰符once, 限制事件只执行一次-->
<button @click.once="handle">按钮</button>

1.4.4-self

  • 作用: 限定事件只能被自己触发(不能被冒泡行为触发)
<!-- self是限定事件只能由元素自己触发, 不能被冒泡行为触发 -->
<div class="wrap" @click.self="wrapClick">
    <div class="box" @click="boxClick"></div>
</div>

1.4.5-capture

  • 作用: 修改事件触发的顺序(事件触发顺序变成由外向内)

    <div class="wrap" @click.capture="wrapClick">
     <div class="box" @click="boxClick"></div>
</div>

1.5-按键修饰符

  • 作用: 修饰键盘事件, 限制键盘事件的触发时机

  • 语法

    @事件名称.按键修饰符="事件处理函数"

  • 系统内置的按键修饰符

    • .enter
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right

2-表单处理

2.1-v-model指令

  • 作用: 实现双向数据绑定(数据层<=>视图层)
  • 注意: v-model指令只能在表单元素上使用

<div id="app">
    <!-- v-model: 可以将用户的输入自动同步到数据层 -->
    <h1>{{keywords}}</h1>
    <hr>
    <input type="text" placeholder="请输入搜索关键词" v-model="keywords">
    <button @click="search">搜索</button>
</div>
<script>

    const vm = new Vue({
        el: '#app',
        data: {
            keywords:''
        },
        methods: {
            search(){
                console.log(this.keywords);
            }
        }
    });
</script>

2.2-常见表单元素双向数据绑定

<div id="app">
    <!-- v-model: 可以将用户的输入自动同步到数据层 -->
    <div>
        <input type="text"  v-model="user.name" placeholder="姓名">
    </div>
    <div>
        <input type="radio" value="男" v-model="user.sex">男
        <input type="radio" value="女" v-model="user.sex">女
    </div>
    <div>
        <input type="checkbox" value="学习" v-model="user.hobby">学习
        <input type="checkbox" value="读书" v-model="user.hobby">读书
        <input type="checkbox" value="弹钢琴" v-model="user.hobby">弹钢琴
    </div>
    <div>
        <!-- multiple:实现多选 -->
        <select  v-model="user.language" multiple>
            <option value="vue">vue</option>
            <option value="react">react</option>
            <option value="angular">angular</option>
        </select>
    </div>
    <div>
        <textarea  v-model="user.introduce" cols="30" rows="2" placeholder="个人简介"></textarea>
    </div>
    <div>
        <button @click="submit">立即提交</button>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            user:{
                name:'',
                hobby:[],
                sex:'',
                language:[],
                introduce:''
            }
        },
        methods: {
            submit(){
                // 获取用户输入
                console.log(this.user);
            }
        }
    });
</script>

2.2-表单修饰符

2.2.1-书写位置

一般是个v-model指令结合起来使用

2.2.2-语法规范

v-model.表单修饰符="数据对象"

  • trim

    • 作用: 自动去除用户输入内容的首位空格

  • number

    • 作用: 将用户输入内容自动转换成数值类型, 对于无法转换成数值的内容, 不会处理

  • lazy

    • 作用: 延迟数据同步, 当失去焦点的时候, 再将数据同步到数据层(v-model默认会实时同步数据)

3-vm.$set

  • vm.$set(操作的数组或者对象,数组下标或者对象属性名,值): vm代表vue实例对象

通过数组下标操作(新增/更新)数组元素, 不会触发视图的刷新;

通过赋值的方式给对象动态添加属性, 不会触发视图的更新;

使用$set方法添加的数组元素或对象属性可以触发视图的更新;

3.1-作用

  • 通过下标添加或者修改数组元素(传统赋值方式无法触发视图更新)
  • 给对象动态添加元素(传统赋值方式无法触发视图更新)

3.2-别名

  • Vue.set(操作的数组或者对象,数组下标或者对象属性名,值);

4-vue核心原理

4.1-双向数据绑定(数据劫持)

  • 通过Object.defineProperty(所属的对象,属性名,{get(){},set(){}})定义的数据的读取和赋值, 都可以被监听到

    <body>
    <h1>Object.defineProperty()实现数据劫持</h1>
    <hr>
    <h1 id="h1"></h1>
</body>
<script>
    // Object.defineProperty(所属的对象,属性名,{get(){},set(){}})定义数据的另外一种方式
    // 定义了一个全局变量msg
    Object.defineProperty(window,'msg',{
        get(){
            //get访问器: 当读取数据msg的时候, 会被触发
            console.log('get');
            // 需要在此处指定变量的值
            return 'msg的初始值';
        },
        // value是一个系统自动注入的参数, 代表的是msg最新的赋值
        set(value){
            // set访问器: 当对数据msg进行二次赋值的时候, 会被触发
            // 应用场景: 通过视图更新(vue底层会在此处触发模板的重新编译)
            console.log('set',value);
            // 通知视图更新
            document.querySelector('#h1').innerHTML=value;
        }
    });
    // console.log(msg);    // 读取数据, 会自动触发get方法的执行
    // msg='hello';     // 重新赋值, 会自动触发set方法的执行
    // 页第一加载的时候,输出的内容
    const h1=document.querySelector('#h1');
    h1.innerHTML=msg;

</script>

4.2-模板编译(正则替换)

  • 模板编译底层主要是通过正则替换来实现的
class Vue{
    // 系统方法, 自动执行, 进行数据初始化
    // props={el:'#app',data:{},methods:{}}
    constructor(props){
        // 将data中的数据,挂载到this上
        for(let key in props.data){
            this[key]=props.data[key];
        }
        // 将methods中的方法,挂载到this上
        for(let key in  props.methods){
            this[key]=props.methods[key];
        }
        // 将模板对应的选择器挂载到this上, 方便在其他方法中获取
        this.$el=props.el;
        // 调用一次渲染方法
        this.render();
    }

    // 渲染方法(模板编译)
    render(){
        // 获取对应的dom对象
        const app=document.querySelector(this.$el);
        // 编写正则表达式
        const reg=/{{(w+)}}/g;
        const html=app.innerHTML.replace(reg,(a,b)=>{
            // a:是整个正则表达式匹配到的结果
            // b:是()子表达式匹配到的结果
            return this[b]
        });
        // 刷新视图
        app.innerHTML=html;
    }
}

5-生命周期钩子函数

  • 本质: 一种特殊的函数, 会在vue实例创建, 运行,销毁阶段的不同时期自动触发
  • 注意: 钩子函数是vue 在完成特定操作之后, 通知我们的一种方式
  • 写书位置: 和data,methods平级

5.1-创建阶段

特点

  • 只执行一次

钩子函数

  • beforeCreate: 创建前(还没有完成数据和方法的创建, 数据和方法还不能使用)
  • created: 创建后(完成数据和方法的创建,可以调用数据和方法)
  • boforeMount: 挂载前(还没有完成视图的渲染)
  • mounted: 挂载后(已经完成了视图的渲染)

5.2-运行阶段

特点

  • 执行次数不确定
  • 只有在视图中引用过的data数据更新的时候, 才会被触发

钩子函数

  • beforeUpdate: 更新前(还没有完成视图更新)
  • updated: 更新后(已经完成了视图更新)

5.3-销毁阶段

特点

  • 执行一次

钩子函数

  • beforeDestroy: 销毁前
  • destroyed: 销毁后
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/bnzw/p/13995724.html