【前端知识点总结】Vue(二) Vue指令 及 计算属性

疆子
342 阅读3分钟

Vue 的常用指令

1 . 插值表达式

作用 : 将表达式的结果插入到当前位置

用法 :

  • 先在 data 中定义 Vue 的数据变量
data() {
  return {
    变量名: 变量值
  }
}

  • 标签中直接使用 {{ 表达式 或 变量}}

2 . Vue 常用指令

1 . v-bind

作用 : 动态绑定标签属性

语法 : v-bind:属性名="变量"

简写 : :属性名="变量"

2 . v-on

作用 : 绑定事件

语法 : v-on:事件名="事件处理函数"

简写 : @事件名="事件处理函数"

传参 : @事件名="事件处理函数(实参)"

  • 事件处理函数中使用形参接收

使用 :

  • 事件处理函数定义在 methods 中 和 data 平级
methods: {
  事件处理函数() {
  }
}

3 . 事件对象

无传参 : 第一个形参接收事件对象

有传参 : 需要手动传入 $event

4 . 修饰符

事件修饰符

阻止默认行为 : .prevent

  • 使用 : @click.prevent="事件处理函数" 阻止冒泡 : .stop
  • 使用 : @click.stop="事件处理函数" 触发组件内部的原生事件 : .native
  • 使用 : @click.native="事件处理函数"

属性修饰符

子向父传值 ： .sync

  • 使用 : <组件 :值名.sync = "值">

  • 注意 : 配合传值使用 .lazy : 相当于cheage 事件

按键修饰符

捕获 enter 键 : .enter

  • 使用 : @keydown.enter="事件处理函数"

捕获 esc 键 : .esc

  • 使用 : @keydown.esc="事件处理函数"

5 . v-model

作用 : 将表单元素和数据双向绑定

双向绑定 :

  • 数据修改 => 视图更新
  • 视图修改 => 数据更新

注意事项 : 暂时只能用在表单元素上(后续详解这个指令)

  • 下拉框 : 绑定在 select 标签上
  • 复选框 : 绑定的数据是数组

    • 将复选框的 value 值添加到数组中

    • 绑定的数据是非数组 : 绑定的是复选框的 checked 属性 用法 : v-model="数据变量"

6 . v-if / v-show

作用 : 都是控制元素的显示隐藏

区别 :

  • v-show 操作的相当于 css 的 display: none
  • v-if 直接创建或移除 DOM 元素(销毁于创建)

v-if 还可以搭配 v-else 使用

语法 :

  • v-if = "boolean 值"
  • v-show = "boolean 值"

7 . v-html / v-text

作用 : 修改标签内容

区别 : 相当于原生 DOM 的 innerHTML 和 innerText

语法 :

  • v-html="字符串变量"
  • v-text="字符串变量"

8 . v-for

作用 : 根据目标结构循环渲染标签

语法 :

  • v-for="(item, index) in 数组" :key="index"
  • item 和 index 只能在 v-for 的范围内使用

9 . key 的作用

v-for 的更新监测

数组修改会导致页面更新, 但分以下三种情况:

  • 修改原数组会更新页面
  • 如果没有修改原数组, 可以将新数组覆盖到原数组上造成更新
  • 直接通过索引修改数组的元素不会造成页面更新, 但 this.$set 可以修改指定的元素

v-for 就地复用

Vue 在修改数组后, 会尽可能的复用原来的标签, 减少 DOM 操作, 进行更新

  • 虚拟 DOM
    • 是什么 : 存储了 DOM 关键信息的 JS 对象
    • 作用 : 减少 DOM 操作, 提高渲染性能

key

  • 无 key : 尽可能的就地复用
  • 有 key 值是索引 : 同样尽可能的就地复用
  • 有 key 值是 id : 根据 key 进行比对, 找出差异进行更新

注意事项 :

  • 不能重复
  • 必须是字符串或数字

结论 : 有 id 使用 id, 没 id 用索引

10 . 动态 class 和 动态 style

v-bind 对于样式增强

  • 对于 style 和 class , v-bind 进行的增强，值不仅仅可以是字符串，还可以是对象和数组

动态 class

用法 : :class="{ 类名: boolean 值 }"

  • boolean 为 true 表示生效, 否则不生效

动态 style

用法 : :style="{ CSS属性名: CSS属性值 }"

3 . 计算属性

写在 computed 中的属性就叫计算属性， computed 中的是需要经过逻辑运算的 作用 :

  • 内部依赖其他数据计算得出结果, 依赖的数据发生变化, 会重新计算并返回结果

用法 :

computed: {
  计算属性名() {
    return 值
  }
}

计算属性注意点 ：

  1. 计算属性写在computed中
  2. 计算属性写法上是一个函数或者是一个对象
  3. 计算属性使用的时候不能加()

计算属性语法

普通语法 ：

computed: {
  计算属性名() {
    return 值
  }
}

完整语法 ：

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

完整写法注意点 :

  • 计算属性是一个对象,需要 get() 和 set() 方法
  • 计算属性被动赋值将会执行 set() 函数
  • 只要访问计算属性, get() 函数就会被执行( 带缓存 )

计算属性缓存

  • 计算属性对应函数执行后, 会把return值缓存起来
  • 依赖项不变, 多次调用都是从缓存取值
  • 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值 注意 ：
  • 计算属性只会计算一次，就会把结果存储起来，多次使用计算属性，只需要计算一次
  • 如果依赖的属性发生了改变，计算属性会重新计算一次

4 . 监听属性

需要监听某个属性是否发生改变，就需要使用watch

监听属性语法

简单类型

语法 ：

watch: {
	"被侦听的属性名" (newVal, oldVal){
	
    }
}

作用 ： 监听变量名对应值改变这里自动触发

两个参数 ：

  • newVal : 当前最新值
  • oldVal : 上一刻旧值

复杂类型(深度监听)

语法 :

watch: {
    "要侦听的属性名": {
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

作用 : 可以监听复杂类型里面的值发生的变化(对象的属性)

深度监听属性 : deep : true 为开启深度侦听 handler : 固定方法触发 immediate true 表示开启后直接触发,不用等到值发生改变

avatar
文章
阅读
粉丝