0. 指令、插值
- 插值、表达式
- 指令、动态属性
-
v-html：会有XSS风险，会覆盖子组件
image.png
image.png
00. computed 和 watch
image.png
image.png
image.png
000. class 和 style
image.png
image.png
image.png
1. v-show 和 v-if 的区别？
区别：
v-show 的显示与隐藏，只是在设置为 display: none
v-if 的显示与隐藏，会创建和销毁 DOM 节点
应用场景：
如果只有一次的显示或隐藏，用 v-if；
如果有多次显示或隐藏的切换，用 v-show
image.png
2. 为何 v-for 中要用 key?
3. 描述 Vue 组件生命周期 （有父子组件的情况）
生命周期（单个组件）
- 挂载阶段
created 与 mounted 的区别？
created 页面还没有渲染，但是 Vue 实例已经初始化完了
mounted 页面已经渲染完了 - 更新阶段
- 销毁阶段
lifecycle.png
生命周期（父子组件）
image.png
image.png
image.png
4. Vue 组件如何通讯？
- 父组件 向 子组件传递参数，props
- 子组件 向 父组件触发一个事件，this.$emit
- 兄弟组件之间的通信，自定义事件
// event.js
import Vue from 'vue';
export default new Vue();
// list.vue
import event from './event'
// 调用自定义事件
event.$emit('onAddTitle', this.title)
// 绑定自定义事件
event.$on('onAddTitle', this.addTitleHandler)
// 解绑自定义事件（避免造成内存泄露）
event.$off('onAddTitle', this.addTitleHandler)
【注】beforeDestroy 可能可以执行哪些事情：可以解绑自定义事件，还有就是注意，子组件调用父组件事件，用 this.$emit；而调用自定义事件，用 event.$emit
5. 描述组件渲染和更新的过程？
6. 双向数据绑定 v-model 的实现原理？
7. v-for 与 v-if 不能一起用？
v-for 比 v-if 计算优先级高一些，会影响性能。
8. event 参数？
- even 是原生的
- 事件被挂载到当前元素
9. 事件、按键修饰符有哪些？
image.png
image.png
10. 表单
<input type="text" v-model.trim="name"/> //截取前后的空格
<input type="text" v-model.lazy="name"/> //输入过程中不会变化
<input type="text" v-model.number="name"/> //转换为数字
<input type="checkbox" v-model="check" /> //复选框也是用v-model check是布尔值
<input type="checkbox" id="jack" value="Jack" v-model="checkbox" />
<label for="jack">Jack</label> // checkbox 是数组 []，多选框
<input type="checkbox" id="john" value="john" v-model="checkbox" />
<label for="john">john</label>
<input type="radio" id="male" value="male" v-model="gender" />
<label for="jack">男</label> // checkbox 是值，单选框
<input type="radio" id="female" value="female" v-model="gender" />
<label for="john">女</label>
<textarea v-model="desc"></textarea>
<! 注意，<textarea>{{desc}}</textarea> 是不允许的！>
// 下拉列表选择（单选）selected 是值
<select v-model="selected">
<option disabled value="">请选择</option>
<option disabled>A</option>
<option disabled>B</option>
<option disabled>C</option>
</select>
// 下拉列表选择（多选）selectedList 是数组 []
<select v-model="selectedList" multiple>
<option disabled value="">请选择</option>
<option disabled>A</option>
<option disabled>B</option>
<option disabled>C</option>
</select>
11. Vue 的高级特性
- 自定义 v-model（颜色选择器）
index.vue
image.png
image.png
CustomVModel.vue
image.png
image.png
-
$nextTick
为什么要用 nextTick?
image.png
image.png -
refs
获取DOM元素的方式
image.png
image.png -
slot
image.png
基本使用
image.png
image.png
SlotDemo
image.png
作用域插槽
image.png
image.png
ScopeSlotDemo
image.png
具名插槽
image.png
image.png
- 动态、异步组件
动态组件
image.png
image.png
image.png
异步加载组件（性能优化）
image.png
image.png
-
keep-alive（缓存组件）
image.png
image.png - mixin
image.png
index.vue
image.png
MixinDemo
image.png
image.png
mixin.js
image.png
存在问题
image.png
12. v-show 与 keep-alive 的区别？
v-show：通过原生CSS（display:none）进行控制（渲染）；在比较简单的情况下，即标签不是很多的情况下，可用 v-show进行控制（渲染）
keep-alive：在Vue层级（框架层级）进行渲染；组件较多的情况下，如 tab 切换等情况下，用 keep-alive 比较合适
一个组件，即一个 js 对象
13. vuex 使用
image.png
基本概念
image.png
用于 vue 组件
image.png
image.png
Actions 里面才能做异步操作
应用场景
- 多个视图依赖于同一状态（例如：菜单导航）
- 来自不同视图的行为需要变更同一状态（例如：评论弹幕）
13. Vue-router 使用
image.png
image.png
H5 history 路由模式配置
image.png
Vue-router 路由配置 动态路由
image.png
Vue-router 路由配置 懒加载
image.png
注意
image.png
14. 路由跳转有几种方式？
- router-link
<router-link to="keyframes">点击验证动画效果 </router-link>
- this.$router.push()
描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。 - this.$router.replace()
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。 - this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
