Vue2 —— 学习（二）

最新推荐文章于 2024-08-14 23:06:44 发布

COLDEHY

最新推荐文章于 2024-08-14 23:06:44 发布

阅读量891

点赞数 22

文章标签：学习 javascript 前端 vue.js html5 java 开发语言

本文链接：https://blog.csdn.net/qq_63342197/article/details/137423110

版权

本文详细介绍了Vue.js中的事件处理（包括基本语法、点击事件、事件修饰符等）、计算属性的实现与应用，以及监视属性的使用。对比了计算属性和监视属性的适用场景，强调了正确使用箭头函数和普通函数的重要性。

摘要由CSDN通过智能技术生成

一、事件处理

（一）基本语法

事件的基本绑定是

v-on:加绑定方式 = ‘回调函数名’

@加绑定方式 = ‘回调函数名’

（二）点击事件语法

1.事件绑定

点击事件绑定 v-on:click = '回调函数名'

<button v-on:click="showInfo">点我提示信息</button>

v-on：可以简化成@ @click = '回调函数名' 也是一个意思

<button @click="showInfo">点我提示信息</button>

2.回调函数

绑定事件的回调函数要写在 Vue 实例的 methods 对象中如下

showInfo() 函数中的 this 指向 Vue 实例对象

写在 Vue 实例中的函数尽量用普通函数书写不然用箭头函数 this 会指向 window

 new Vue({
      el: '#root',
      data: {
        name: '一个人'
      },
      methods:{
        showInfo(event){
          alert('你好')
        }
      }
    })

3.参数 event

函数中有个参数是 event 它是被监听的对象 event.target 能找到被我们监听的 button

event.target.innerText 能获得里面的文字内容

注意如果要传参记得给 event 占位因为 event 很重要，在 Vue 模板中使用 $event 占位

     methods: {
        showInfo(event,number) {
          console.log(number)
        },

想要 event 是第几个参数就把 $event 写在哪儿就行

<button v-on:click="showInfo($event,23)">点我提示信息</button>

注意：

不能把事件处理的回调函数写在 data 中虽然也能使用但是放在 data 中 Vue 会给这个函数默认进行数据代理，但是我们函数不需要修改，只是被调用，不需要数据代理，这样就会加大 Vue 的负担，所以我们单独写在 methods 对象中，methods 中都i是被 Vue 所管理的函数。

（三）事件修饰符

就是来修饰事件的行为的，重点是前三个，可以连着使用类似于 @click.stop.prevent 先停止冒泡再停止默认行为，是有顺序的。

1.阻止默认事件常用

e.preventDefault() 我们也可以不用这种写法

  methods: {
        showInfo1(e) {
          e.preventDefault()
          alert('同学你好')
        }
      }

我们可以用下面这种形式在点击事件 @click 后面加上事件修饰符 prevent 就是上面阻止默认行为的作用

<a href="http://baidu.com" @click.prevent="showInfo1">点我提示信息</a>

2.阻止事件冒泡常用

stop

使用下面的代码，点击里面的按钮会触发两次提示弹窗这是典型的事件冒泡，点击儿子冒泡给父亲

 <div class="demo" @click="showInfo1">
      <button @click.stop="showInfo1">点击</button>
    </div>

3.事件只触发一次常用

once

<button @click.once="showInfo1">点击</button>

4.使用事件的捕获模式

capture 要加在外面的盒子点击里面的盒子就不会冒泡了

先由外向内捕获再由内向外冒泡一般是冒泡阶段输出结果

如果想捕获阶段输出结果

<div class="box1" @click.capture="showInfo1">
      <div class="box2" @click="showInfo1">点击</div>
</div>

5.当前操作元素触发事件

self

只有event.target 是当前的操作的元素才触发事件

就是点击按钮时 event.target 就是这个 button 不会向上冒泡执行操作了

<div class="box1" @click.self="showInfo1">
  <div class="box2" @click="showInfo1">点击</div>
</div>

6.事件默认立即执行

passive

移动端用的比较多

也不是所有的事件都需要

滚轮事件需要

不用等滚轮事件的回调结束再触发事件，不然默认是执行完回调函数再去执行事件，如果回调函数执行时间长的话，滚动条就不动了，还会造成页面卡顿

@scroll 滚动条滚动

@wheel 鼠标滚轮滚动

    <ul @scroll.passive="demo">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

（四）键盘事件语法

1.事件绑定

@keyup @keydown 键盘按键上升时触发键盘下降时触发

placeholder 默认浅色文字

通过键盘名绑定：

如果像我们按指定按键才能触发相关事件时，我们可以在绑定时指定一个按键别名：

例如 @keyup.enter=''

回车：enter

删除：delete

退出：esc

空格：space

换行：tab （特殊必须配合keydown 使用因为 tab 本来的用处就能捕获焦点）

上：up

下：down

左：left

右：right

系统修饰键

用 keyup 时按下修饰键同时也得按上其它键，然后释放其它键，事件才能被触发，具体用哪个键子就直接在后面点上就行比如想 ctrl + y 生效就写成 @keyup.ctrl.y 的格式

用 keydown 时正常触发事件，按下就触发

ctrl：

alt：

shift：

meta：就是 win 键

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

通过按键的编码绑定

就是 e.keycode 属性但是不建议使用

<input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">

自定义按键名：

我们也可以自定义按键的名字，前面是自己的名字然后后面是对应的按键码进行绑定，但是也不推荐使用

Vue.config.keyCodes.huiche = 13

2.回调函数

返回键盘输入的内容 e.target.value 是输入的内容

e.key 是按键的名字 e.keyCode 是按键的编码号

 methods: {
        showInfo(e) {
          console.log(e.target.value)
        }

二、计算属性

（一）简介

首先得明白属性是指什么 Vue 认为属性就是实例中 data 对象中写的东西

计算属性就是拿着我们 data 中有的属性进行加工和计算生成一个全新的属性就是计算属性

计算属性不放在 data 里面要单独放在 computed 对象中就是计算的意思

计算属性也属于 Vue 实例 vm 可以直接调用

原理：

使用了 Object.defineproperty 方法提供的 getter 和 setter

 computed:{
        fullName:{
          get(){
            
          }
        }
      }

（二）方法实现姓名案例

1.流程

data 中的数据任何一个发生变化，Vue 模板都会重新解析一遍，如果遇到插值语法中的方法一定会重新调用一遍。所以下面当在页面的文本框中更改姓和名时使用v-model 指令等于同时也改变了实例中 data 的值，data 值发生了变化 fullName 函数重新调用就会发生更改

如果重复调用好几次相同的方法这个方法就得被调用好几次，模板也会再同样解析好几次

2.代码部分

<body>
  <div id="root">
    性：<input type="text" v-model:value="firstName"> <br>
    名：<input type="text" v-model:value="lastName"> <br>
    姓名：<span>{{fullName()}}</span>
  </div>
  <script>
    Vue.config.keyCodes.huiche = 13
    new Vue({
      el: '#root',
      data: {
        firstName: '张',
        lastName: '三'
      },
      methods: {
        fullName() {
          return this.firstName + '-' + this.lastName
        }
      }
    })
  </script>
</body>

（三）计算属性实现姓名案例

1.流程

我们通过姓和名两个属性相加得出姓名新得到的姓名属性就是计算属性

计算属性也属于 Vue 实例 vm 可以直接调用

因为获得的姓名的过程可能很复杂我们把姓名以象形式存下，使用 get 方法，当有人读取fullName 时，就调用 get 方法，把 return 里面的值作为 fullName 的值，我们在 return 里面进行拼接字符串就行了

2.特点

实现了缓存的效果

在 get 所依赖的数据没发生变化时，只会读取第一次的姓名然后缓存起来，不会再读取姓名了

但是如果 get 依赖的数据发生变化了就会重新读取更新然后存缓存

3.注意

在 data 中的性和名不能直接使用因为存在于不同的作用域，但是 Vue 默认将 get() 方法里面的 this 指向了 Vue 实例，我们就能用 this 调用 data 中的数据了。

fullName 不要看成一个对象不能 fullName.get() 这样会报错，他的内部会自动调用 get 方法把返回值给 fullName 所以直接调用 fullName 就行

如果要改变 fullName 的值然后分别改变姓和名就得再使用一个 set 方法，改变它所依赖的属性

如下：

  set(value){
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
          }

4.代码部分

<body>
  <div id="root">
    性：<input type="text" v-model:value="firstName"> <br>
    名：<input type="text" v-model:value="lastName"> <br>
    姓名：<span>{{fullName}}</span>
  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        firstName: '张',
        lastName: '三'
      },
      computed:{
        fullName:{
          get(){
            return this.firstName + '-' + this.lastName
          }
        }
      }
    })
  </script>
</body>

（四）简写方式

如果只用 getter 的话，只考虑读取不修改，就不用把计算属性写成对象的方式，直接写成函数的形式就行，里面还是 get 方法的写法

调用时它不能看作函数而是一个属性不能fullName() 直接不加小括号就可以

 computed: {
        fullName: function () {
          return this.firstName + '-' + this.lastName
        }
      }

三、监视属性

（一）介绍

监视属性就是监视某一个属性的变化

语法：

watch:{

监视对象：{

hander(){

监视对象改变时喊的人函数被调用

}

 watch: {
        isHot: {
          handler(){
            
          }
        }

（二）天气案例无监听

1.流程

点击按钮切换天气

也可以不写changeWeather 方法在 methods 中可以直接在@click 后面写上 isHot = !isHot

绑定事件后面能写一些简单的语句但是复杂一点点属性最好还是写在 methods 里面

2.代码部分

<body>
  <div id="root">
    <h2>今天天气预报：{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        isHot: true
      },
      computed: {
        info(){
          return this.isHot ? '炎热' : '凉快'
        }
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot
        }
      }
    })
  </script>
</body>

（二）监视

1.设置监视

得用一个对象 watch里面放全新的配置对象，我们想监视 isHot 属性的变化，就用 handler 函数，当isHot 属性变化时会被调用，我们可以通过里面两个参数拿到变化前后的值

newValue,oldValue 新的值，旧的值

isHot 配置对象除了 handler 函数还有其它配置

immediate；true 没变化就执行 handler 函数

watch: {
        isHot: {
          immediate:true,
          handler(newValue,oldValue){
            console.log('isHot被修改了', newValue, oldValue)
          }
        }
      }

2.其它写法

写在 vm 实例外面不明确监视谁就用下面的形式

 vm.$watch('isHot', {
      immediate: true,
      handler(newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue)
      }
    })

（三）深度监视

vue是能检测到里面任何层级数据的变化的，检测不到只是对我们程序员使用 watch 来检测检测不到，默认只监测最外层（为了效率），我们能通过修改默认值 deep 就能实现深度监测

data 中有一个对象类型的数据如果想要检测里面a，b 的变化从而做出某些反应，不能简单的在watch 里面加上

numbers：{

handler(){

}

因为 Vue 认为 numbers 是一个整体这样观测到的只是 numbers 属性的地址，对里面的数据不感兴趣，ab发生变化，vue 会认为 numbers 没有发生变化，不会调用 handler 函数

我们可以使用

'numbers.a':{

handler(){}

}

这样的方式来指定检测变化的变量，但是要是想监测里面所有的变量就得写很多，很浪费空间

 data: {
        numbers: {
          a: 1,
          b: 2
        }
      },

这时我们就能使用一个属性来轻松解决，检测的对象还是 numbers 但是在里面加上一个属性

这个属性能实现深度监视，deep：true

就是 deep 默认是关闭的如果打开就能观测到多层级的数据的变化，

 watch: {
        numbers: {
          deep: true,
          handler() {
            console.log('number改变了')
          }
        }
      }

（四）监视的简写形式

不需要其它配置项时使用，就可以默认为只有handler 省略名字，直接坚持者写成函数的格式，和计算属性类似，简写不能加其它配置项，deep immediate

 watch: {
        isHot(newValue, oldValue) {
          console.log('isHot被修改了', newValue, oldValue)
        }

写在 Vue 实例外面的形式：

 vm.$watch('isHot', function(){
    console.log('isHot被修改了'，newValue,oldValue)
})

四、计算属性监视属性对比

（一）案例对比

用计算属性在实现一些功能时更加简短和方便，但是计算属性不能处理异步的操作，比如说延时输出，这时就得用到监视属性，加一个定时器就行，而计算属性依赖返回值 return 输出，不能加定时器。而且定时器使用必须用箭头函数。

下面这段代码无法输出正常结果

     computed: {
        fullName: function () {
          setTimeout(() => {
            return this.firstName + '-' + this.lastName
          }, 1000)
        }
      }

下面代码能延时 1秒正常输出结果

 watch: {
        firstName(now, last) {
          this.fullName = now + this.lastName
        },
        lastName(now, last) {
          setTimeout(() => {
            this.fullName = this.firstName + now
          }, 1000)
        }
      }