Vue 易忘知识点
说明
收集了一些平常工作中用的非常少,但又不能忘了的知识点。
1. 指令
- v-html:把后端返回带有 html 标签的数据,渲染成对应的网页 UI。使用时会覆盖标签包裹的内容
- v-for:
- 标识 key 值类型:为 String 或 Number
- 循环对象(值名索): v-for="(value, key, index) in obj" 中 value 是键值, key 是键名, index 是索引
- v-slot:
- 具名插槽:v-slot:name1 简写成 #name1,只能用在 组件名或 template 上
- 作用于插槽:编写基础组件时,可以在 slot 标签上绑定一些属性,父组件使用时就可以用 #name1="obj" 中的 obj 来接收这些属性。(相当于数据的子传父)
- 自定义指令:
- 注册自定义指令及其内部的函数触发时机
// 1. 全局定义自定义指令 t-copy
Vue.directive('t-copy', {
// 第一次绑定到 dom 元素时触发(el 是被绑定的 dom 元素,binding 是指令后面的内容)
bind(el, binding) {
console.log('触发了 v-t-copy 指令的 bing 函数')
el.style.color = binding.value
},
// 第一次绑定时不触发,dom 更新时触发
update(el, binding) {
console.log('触发了 v-t-copy 指令的 update 函数')
el.style.color = binding.value
}
})
// ----------------------------------------------------------
// 2. 如果 bind 和 update 逻辑完全一样,可以简写
Vue.directive('t-copy', () => {
el.style.color = binding.value
})
----------------------------------------------------------
// 3. 组件内使用自定义指令 t-copy
<template>
<p v-t-copy="bindingDate"></p>
</template>
2. 事件绑定
- $event:
- 若事件不携带参数,则方法默认接收原始 dom 事件对象 e
- 若事件携带了参数,还想在方法中拿到 原始 dom 事件对象 e 就用 $event
- 若子组件传了参数过来,并且自己又携带了参数,则方法中自己的参数会覆盖子组件的参数,此时可用 $event 获取子组件的参数
3. 事件修饰符
- @click.prevent:阻止事件默认行为。例如:阻止 submit 提交、阻止 a 链接跳转
- @click.stop:阻止冒泡
4. 按键修饰符
- @keyup.esc:弹起 esc 时触发
- @keyup.enter:弹起 enter 时触发
5. 指令修饰符
- v-model.number:把表单值转为数值类型
- v-model.trim:去掉表单首尾空字符
- v-model.lazy:表单失去焦点时才更新 data 中的数据