最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。
HTML 和 CSS：
v-show的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
注意：
① 如果元素涉及到频繁的切换，最好不要使用 v-if 指令, 应该选择使用 v-show 指令；
② 如果元素可能一直不会被显示出来被用户看到，则选择使用 v-if 指令
二、vue中自定义指令
在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，开发人员仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
1. 自定义全局指令
注册一个 v-focus 指令，实现了在页面加载完成之后自动让输入框获取到焦点的小功能。
全局自定义指令页面载入时，input 元素自动获取焦点：
只要打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。
效果演示：
2. 自定义局部指令
局部自定义指令只要通过指令绑定给了元素，不管元素有没有被插入到页面中去，这个元素肯定会有一个内联样式.
效果演示：
注意：
-
和JS行为有关的操作，一般在 inserted 中去执行；
-
和样式有关的操作，一般在 bind 执行
3. 钩子函数
① 指令定义对象可以提供如下几个钩子函数 (均为可选)：
| 钩子函数 | 使用 |
| --- | --- |
| bind | 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 |
| inserted | 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 |
| update | 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。 |
| componentUpdated | 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 |
| unbind | 只调用一次，指令与元素解绑时调用。 |
② 指令钩子函数会被传入以下参数：
| 参数 | 说明 |
| --- | --- |
| el | 指令所绑定的元素，可以用来直接操作 DOM。 |
| binding | 绑定一个对象。 |
| vnode | Vue 编译生成的虚拟节点。 |
❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
