VUE学习（二） | 青训营笔记

魔法少女蕊蕊
129 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第11天

(接上篇）

1.8. 事件处理

1.8.1. 事件的基本用法

  1. 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
  2. 事件的回调需要配置在methods对象中，最终会在vm上
  3. methods中配置的函数，==不要用箭头函数！==否则this就不是vm了
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象 5. @click="demo和@click="demo($event)"效果一致，但后者可以传参

1.8.2. 事件修饰符

Vue中的事件修饰符：

  1. prevent：阻止默认事件（常用）
  2. stop：阻止事件冒泡（常用）
  3. once：事件只触发一次（常用）
  4. capture：使用事件的捕获模式
  5. self：只有event.target是当前操作的元素时才触发事件
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕
  • 修饰符可以连续写，比如可以这么用：@click.prevent.stop="showInfo"

1.8.3. 键盘事件

键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用

Vue中常用的按键别名：

  • 回车：enter
  • 删除：delete (捕获“删除”和“退格”键)
  • 退出：esc
  • 空格：space
  • 换行：tab (特殊，必须配合keydown去使用)
  • 上：up
  • 下：down
  • 左：left
  • 右：right 注意：
  1. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
  • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
  • 配合keydown使用：正常触发事件
  1. 可以使用keyCode去指定具体的按键，比如：@keydown.13="showInfo"，但不3. 推荐这样使用
  • Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

1.9. 计算属性

  • 计算属性：

    • 定义：要用的属性不存在，需要通过已有属性计算得来。

    • 原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。

    • get函数什么时候执行？

      1. 初次读取时会执行一次
      2. 当依赖的数据发生改变时会被再次调用
      3. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

备注：

  • 计算属性最终会出现在vm上，直接读取使用即可
  • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
  • 如果计算属性确定不考虑修改，可以使用计算属性的简写形式

1.10. 监视属性

1.10.1. 监视属性基本用法

监视属性watch：

  1. 当被监视的属性变化时，回调函数自动调用，进行相关操作
  2. 监视的属性必须存在，才能进行监视
  3. 监视有两种写法：
    1. 创建Vue时传入watch配置
    2. 通过vm.$watch监视
vm.$watch('isHot',{
	immediate:true,
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})

1.10.2. 深度监视

  • 深度监视：

    1. Vue中的watch默认不监测对象内部值的改变（一层）
    2. 在watch中配置deep:true可以监测对象内部值的改变（多层）

  • 备注：

    1. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
    2. 使用watch时根据监视数据的具体结构，决定是否采用深度监视

1.10.3. 监视属性简写

如果监视属性除了handler没有其他配置项的话，可以进行简写。

使用计算属性：

new Vue({
    el:'#root', 
    data:{ 
        firstName:'张',
        lastName:'三'
    },
    computed:{
    	fullName(){
		    return this.firstName + '-' + this.lastName
    	}
    }
})

使用监听属性：

new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
		fullName:'张-三'
	},
	watch:{
		firstName(val){
			setTimeout(()=>{
				this.fullName = val + '-' + this.lastName
			},1000);
		},
		lastName(val){
			this.fullName = this.firstName + '-' + val
		}
	}
})

  • computed和watch之间的区别：

    • computed能完成的功能，watch都可以完成
    • watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

  • 两个重要的小原则：

    • 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
    • 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

1.11. 绑定样式

  1. class样式：

  • 写法：class="xxx"，xxx可以是字符串、对象、数组

  • 字符串写法适用于：类名不确定，要动态获取

  • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定

  • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

  1. style样式：
  • :style="{fontSize: xxx}"其中xxx是动态值
  • :style="[a,b]"其中a、b是样式对象

1.12. 条件渲染

  1. v-if：

  • 写法：

    1. v-if="表达式"
    2. v-else-if="表达式"
    3. v-else
  • 适用于：切换频率较低的场景

  • 特点：不展示的`DOM`元素直接被移除

  • 注意：`v-if`可以和`v-else-if`、`v-else`一起使用，但要求结构不能被打断

  1. v-show：

    • 写法：v-show="表达式"
    • 适用于：切换频率较高的场景
    • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
  • 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
avatar
文章
阅读
粉丝