Vue学习第二节

最新推荐文章于 2024-02-26 22:43:08 发布

原创最新推荐文章于 2024-02-26 22:43:08 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文深入探讨Vue.js的事件处理，包括基本事件绑定、事件修饰符的使用，以及键盘事件的处理。同时，介绍了计算属性的定义、工作原理及优势，并与watch进行对比。此外，详细讲解了watch的使用方法，包括深度监视和响应式更新。最后，强调了在Vue中函数的正确使用方式，以确保this的正确指向。

一、vue事件的基本使用

1：例如使用v-on:xxx或者 @xxx 来绑定事件。xxx为事件名称；

<button v-on:click = "study(1)">按钮1</button>
<button @click = "study1(1)">按钮2</button>

2:事件的回调需要配置在methods对象中最终会呈现在vm对象上；

 new Vue({
        el: '#id',
        data: function () {
            return {
                name:'这是name;',
            }
        },
        methods:{
            study(id){  //事件绑定的方法
                alert('按钮1'+id)
            },
            study1(id){
                alert('按钮2'+id)
            }
        }
    })

3：methods中配置的函数不要使用箭头函数，否则this就不是vm对象，此时的this为window对象；

二、vue中的事件修饰符（具体效果可自测）

1、prevent：阻止默认事件（常用）

2、stop：阻止事件冒泡（常用）

3、once：事件只触发一次（常用）

4、capture:使用事件的捕获模式

5、self:只有event.target是当前操作的元素时才触发的事件

6、passive:事件的默认行为立即执行，无需等待事件回调执行完毕

<div id="root">
    <h1>{{title}}</h1>

    <!--prevent：阻止默认事件-->
    <a :href="url" v-on:click.prevent='showInfo'>这是去百度的链接-阻止默认事件</a><br><br>

    <!--prevent：阻止事件冒泡-->
    <div @click = 'showInfo' style="background-color: red;width: 300px;height: 300px">
        <button @click.stop = 'showInfo' style="background-color: chartreuse;width: 200px;height: 200px">
            点我提示信息 Do you know？
        </button>
    </div>
    <br><br>

    <!--once：事件只触发一次-->
    <a :href="url" v-on:click.prevent.once='showInfo'>这是去百度的链接-事件只触发一次</a><br><br>
</div>
</body>

<script>
    Vue.config.productionTip = false;
    //实例1
    const vm = new Vue({
        el: '#root',
        data: function () {
            return {
                title: '这篇是事件修饰符;',
                url: 'http://www.baidu.com',
            }
        },
        methods: {
            showInfo(id) {  //事件绑定的方法
                alert('测试一下')
            },

        }
    })
</script>

三、vue中的键盘事件

1、vue中常用的按键别名：

回车 => enter
删除 => delete(捕获删除和退格键)
退出 => esc
空格 => space
换行 => tab(特殊，需要配合keydown使用)
上 => up
下 => down
左 => left
右 => right

2、vue中未提供别名的按键，可以使用按键原始的key值去绑定，但需要注意要转为kebab-case(短横线命名)

3、系统修饰键（用法比较特殊）ctrl、alt、shift、meta(window键)
（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会触发;
（2）配合keydown使用，正常触发事件；

4、也可以使用keyCode去指定具体的按键（不推荐使用）

5、vue.config.keyCodes.自定义键名 = 键码 (不推荐使用)

四、计算属性（computed）

定义:需要使用的属性不存在，需要通过已有的属性计算得来；
原理:底层借助了Object.defineproperty方法提供的geter和setter;

get函数什么时候执行？
（1）初次读取时会执行一次；
（2）当依赖的数据发生变化时会被再次调用；

优势：与methods实现相比。内部有缓存机制（复用），效率更高，调试方便。

备注：
1:计算属性最终会出现在vm上，直接读取使用即可。
2:如果计算属性要被修改，那必须要写set函数去响应修改，并且set中要引起计算时所依赖的数据发生变化。

例子：

<div id="root">

    姓： <input type="text" v-model='firstName'><br><br>
    名： <input type="text" v-model='lastName'><br><br>
    全名: <span>{{fullName}}</span>
</div>
</body>

<script>
    Vue.config.productionTip = false;
    //实例1
    const vm = new Vue({
        el: '#root',
        data: function () {
            return {
                firstName: '张',
                lastName: '三三',
            }
        },
        methods: {

        },
        computed: {
            fullName: {
                get() {
                  return  this.firstName + this.lastName;
                }
            }

        }
    })
</script>