Vue2框架基础知识2

yandajiangjun

已于 2023-01-14 20:49:54 修改

阅读量337

点赞数 1

文章标签： vue.js 前端

于 2023-01-14 19:41:19 首次发布

本文链接：https://blog.csdn.net/yandajiangjun/article/details/128688363

版权

本文详细介绍了Vue中的事件绑定方式，包括修饰符的使用，以及key属性在高效更新虚拟DOM中的作用。还探讨了数组和对象的更新检测，如Vue.set用于确保新增属性的响应式。同时，提到了计算属性和watch的区别，前者用于数据处理并缓存结果，后者则用于监听数据变化并执行回调。

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

Vue事件-下

绑定事件：<div v-on:事件名=‘函数名’>
实现方法：
methods:{
函数名(){
```
 }
```
}
事件对象 event
1. 无参数传递：第一个参数就是event
2. 有参数传递：需要手动传递事件对象
事件修饰符
.stop *
.prevent *
.capture
.self
.once
.passive
按键修饰符
.enter *
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰键
.ctrl
.alt
.shift
.meta
鼠标按钮修饰符
.left
.right
.middle

Vue中key属性的作用（考点）

作用：key的作用主要是为了高效的更新虚拟DOM
高效的Diff算法

数组更新检测

说明：在列表渲染中，如果遍历是数组，当数组数据发生改变时，页面什么时候能自动更新(页面重新渲染)
实现数组视图同步更新
1. 变更方法（修改了原数组）
  push()
  pop()
  shift()
  unshift()
  splice()
  sort()
  reverse()
2. 替换数组（修改后返回新的数组原数据不修改视图想同步更新覆盖原数组）
  filter()、concat() 和 slice()

对象更新检测

说明：对象修改后视图同步更新视图 – 内存：栈内存堆内存

实现对象视图同步更新

Vue.set( target, propertyName/index, value )
参数：
{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值。
用法：
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)
代码演示

    addAttribute(){
        // this.obj.love='女'
        // console.log('obj',this.obj);
        //问题：vue认为 obj没有修改
        //1. ...  
        // this.obj ={...this.obj};
        //2. es6: 合并对象  Object.assign({},{},{}) 
        // this.obj=Object.assign({},this.obj)

        //3. vue官网解决方法：
        //向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
        // this.$set(this.obj,'love','女')
        Vue.set(this.obj,'learn','学习')

        //删除 同步视图 删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。
        Vue.delete(this.obj,'age')
    }

Class 与 Style 绑定

介绍：动态的添加class或者是style样式
绑定 HTML Class
1. 直接绑定变量
2. 对象语法 ***
3. 数组语法
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
1. 对象语法
2. 数组语法
1. 直接变量
  data: { styleObject: { color: 'red', fontSize: '13px' } }

tabs切换

代码演示:

表单输入绑定

介绍
你可以用 v-model 指令在表单、及元素上创建双向数据绑定
通过指令 v-model=‘’ 获取表单输入的信息数据实现双向数据绑定
语法:

data(){
return{
msg:‘’
}
}
修饰符
.lazy 只有当input失去焦点时才更新数据
.number 把input标签中输入的内容转成数字，调用是parseFloat (Nunber())
.trim 去除左右空格
v-model实现原理
v-model只不过是一个语法糖而已,真正的实现靠的还是

v-bind:绑定响应式数据
触发oninput 事件并传递数据

v-model 是什么。语法糖 :value + @input。还要分为两种情况
$event是事件对象，$event.target.value表示input框中的输入值

计算属性和侦听器

计算属性
1. 介绍: 处理数据后把数据缓存起来使用数据的时候使用的缓存的数据,但是如果原数据修改了重新计算
2. 语法
  computed:{
  msg2(){
  console.log(‘计算属性: 对数据进行加工处理缓存数据’);
  return this.msg.split(‘’).reverse().join(‘’);
  }
  }
3. 使用计算属性
  1. 直接获取名字不加()
  2. {{ msg2 }}
侦听器
1. 介绍: Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化
2. 语法:

computed和watch区别（考点）
1. 相同：computed和watch都是观察页面的数据变化的。
2. 不同：
  computed：是计算属性，依赖其它属性值:
  1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
  2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
  watch：没有缓存性，更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；
  1. 不支持缓存，数据变，直接会触发相应的操作；
  2. watch支持异步；