面试了许多求职者，很多求职者只知其然，而不知所以然，写此文章为广大前端小伙伴指引迷津。纯干货！纯干货！纯干货！
目录
基础小结
插值指令
- Mustache: {{}}语法, 可以写变量/逻辑表达式/计算值...
- v-once : 元素只渲染一次，不会随着数据的改变而改变
- v-html="" : 解析数据中的html代码，渲染到页面中
- v-text="msg": 写在属性当中, 将数据显示在界面中
- v-pre: 原文输出, 显示原本的Mustache语法
- v-cloak : 一般配合CSS规则一起使用, 够解决插值表达式闪烁的问题
绑定属性
- 作用：动态绑定属性
- 缩写：
: - eg:
:class、:style
事件监听
- 作用: 绑定事件监听器
- 缩写:
@ - eg:
@click - 事件修饰符如下: 饰符 | 作用 | | ----------------------- | ------------------------------------- | | .stop | 阻止冒泡。本质是调用 event.stopPropagation() | | .prevent | 阻止默认事件行为 本质是调用 event.preventDefault() | | .{keyCode | keyAlias } | 当事件是从特定键触发时才触发回调 | | .once | 事件只触发一次 |
条件渲染指令
- v-if 和 v-show对比
- v-if 当条件为false时,压根不会有对应的元素在DOM中
- v-show 当条件为false时, 仅仅是将元素的 display 属性设置 none 而已
- 开发中如何选择呢?
- 当需要在显示与隐藏之间切换很频繁时,使用v-show
- 当只有一次切换时,通过使用v-if
循环遍历指令
v-for遍历数组
- 作用：根据数组中的元素遍历指定模板内容生成内容。
- 语法:
v-for="(item, index) in items"v-for遍历对象 - 作用: 遍历对象
- 语法:
v-for="(value, key, index) in items"Vue中Key属性? - Diff算法就可以正确的识别此节点
- 找到正确的位置区插入新的节点
- key的作用主要是为了高效的更新虚拟DOM
表单绑定
区别:
v-bind: 只能实现数据的单向绑定, 从M自动绑定到v。v-model: 只有v-model才能实现双向数据绑定。- v-model其实是一个语法糖, 他背后本质是包含两个操作
- v-bind绑定一个value属性
- v-on指令绑定当前元素的input事件
v-model的修饰符
| 修饰符 | 作用 |
| --------- | -------------------------------- |
|
.lazy| 当表单失去焦点或按下回车时,data中的数据才会更新 | |.number| 输入的内容转换为number数据类型 | |.trim| 过滤内容的两侧空格
自定义指令
全局指令:全局使用。比如权限码，埋点等
局部指令：只能在当前组件里面使用(当全局指令和局部指令同名时以局部指令为准)。比如获取焦点等。
过滤器
全局管道和局部管道，比如字母转换，单位转换等。
- 作用文本格式化/处理
- 过滤器不改变真正的
data，而只是改变渲染的结果，并返回过滤后的版本 - 它接收
两个参数:过滤器的名称、过滤器函数
<!-- 管道符前面的price: 要把price这段文本进行过滤 -->
<!-- 管道符后面的showPrice: 是通过showPrice这个过滤器来进行操作 -->
<td>{{price | showPrice}}</td>
<script>
const app = new Vue({
filters: {
showPrice(price) {
return '￥' + price.toFixed(2);
}
}
})
</script>
组件样式私有
<stype scoped>
h2 {} // 样式只会在当前组件内生效
</style>
动态组件
<component :is="comName"></component> //comName是变量,值为需要切换的几个组件名
插槽
- 使用: 对引用的组件中传入自定义标签, 是标签不是变量, 变量直接传过来就好了,就不需要插槽了, 但是有时候我们封装的组件中,需要添加一段自定义模块,可以是列表,可以是一句话,这时就需要用到插槽。
- 类型:
匿名插槽、具名插槽
