两个月亮

全局前置守卫是导航守卫中的一种，是最常使用的导航守卫。全局前置守卫将在当前网站的任何页面发生跳转时触发，因此，你可以使用该守卫控制用户对某一路径的访问权限。

Vue Router 是 VueJS 官方提供的路由插件，使用该插件你将能更加便利的管理 VueJS 创建的单页面应用程序（Single Page Web Application，SPA）中的组件间的动态切换。你可以使用 a 元素代替 router-link 元素，但并不推荐这么做。使用 router-link 而不是 a 元素可以使你获得来自 vue-router 的更多帮助。

在 VueJS 中，路由可以理解为 Hash 地址 与 组件 的映射关系。由于 VueJS 构建的是单页面应用程序，在构造具有如下效果的页面时，无法直接切换页面（因为仅有一个页面），但可以通过切换组件来达到相同的效果。路由在 VueJS 及 Web 后端中的概念稍有不同，但都表示某两者之间的映射关系。锚点是网页制作中超级链接的一种，是一种能够定位当前页面的元素的超级链接。

VueJS 允许你注册自定义指令，以便封装对 DOM 元素的重复处理行为，提高代码的复用率。VueJS 中的自定义指令分为两类，即全局自定义指令及私有自定义指令。其中，私有自定义指令仅允许当前组件（定义该指令的组件）使用，而全局自定义指令允许当前项目中的任何组件使用。你可以通过终端directives节点来定义私有自定义指令。

在对组件进行封装时，我们可能需要提供一个接口，使得组件的使用者可以向该组件提供模板或其他组件以供当前组件使用，而这个接口就是插槽。在为插槽命名后，你可以通过插槽的名称向对应的插槽提供内容。如果你需要向插槽的使用者提供一些数据，那么你可以通过作用域插槽的方式向插槽的使用者提供数据。在对组件进行封装时，我们可能需要提供一个接口，使得组件的使用者可以向该组件提供模板或其他组件供当前组件使用，而这个接口就是插槽。父组件模板中的表达式只能访问父组件的作用域，子组件模板中的表达式只能访问子组件的作用域。

在组件的动态切换过程中，存在组件的生成与销毁过程。在切换组件后，原组件将被销毁。再次切换为原组件时，由于组件经历了再生成的过程，组件中的数据都将处于初始状态。在实现组件的动态切换功能时，你可能会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。我们可以使用 keep-alive 元素达成该目的。

你将能够获得该组件对应的 Vue 实例对象，这意味着父组件对子组件的每一个属性和方法都拥有有完全的访问权。虽然 Vue 的声明性渲染模型为我们抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个。密码输入框中的内容与数据达成了双向绑定，密码输入框中的内容变换将导致数据发生变化，组件将因此进入。按钮添加 “状态”，在进入生命周期函数后，我们将对。

组件从创建到销毁的这一系列过程被称为组件的生命周期。在Vue中，组件生命周期的节点会被定义为一系列的方法，这些方法称为生命周期钩子。有了这些生命周期方法，我们可以在合适的时机来完成合适的工作。下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。每一个 Vue 组件都是一个通过 Vue 构造函数创建的实例。// 使用生命周期钩子（在 DOM 节点更新前执行该函数）// 使用生命周期钩子（在 DOM 节点更新后执行该函数）

为了选择当前组件的子组件中的元素进行样式设置，先使用属性选择器选择自定义属性以指定当前组件（不同的组件 ，VueJS 为其分配的自定义属性 data-v-* 不同），再通过后代选择器选择当前组件的后代组件中的相应元素。深度选择器可以在保证不发生全局样式冲突的前提下，将父组件中的样式应用到子组件（准确来说应该是当前组件的所有后代组件）中。在使用深度选择器时，你的编辑器也许会在深度选择器下显示红色波浪线以提示开发者代码编写错误，请不要理会，深度选择器在 VueJS 中是合理的。元素中，就能够避免发生样式冲突。

组件实例的作用域是孤立的。也就是说，子组件的是无法直接获取到父组件中的数据的。VueJS 为组件开发提供了 props，通过 props ，父组件中的数据将能够传递给子组件，而子组件则需要提前对 props 进行声明以便接收父组件传递过来的数据。在对通用组件进行封装时，合理地使用 props 能够提升组件的复用性。我们可以在使用组件时，通过使用在子组件中使用 props 定义的属性来向子组件传递数据。细节驼峰式命名排斥现象HTML 是 不区分大小写的。如果在一个 HTML 元素中存在多个同名属

组件化的目的，是为了让页面中的各个部分可以被复用，以减少重复的代码。另一方面，也可以更好地使团队分工协作，让不同的人负责编写不同的组件。

Vue CLI 是 Vue.js 开发的标准工具，它简化了开发者基于 webpack 创建工程化 Vue 项目的过程。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

即使不适用 deep 选项，我们同样也可以侦听对象中的属性的值的变化，只不过不能使得目标对象中的多个属性触发监听器，仅目标对象中的目标属性可以触发侦听器。3. 利用 deep 选项，我们可以使得多个数据共同使用同一个侦听器（使用 deep 选项后，监听的目标对象中的属性值发生变化都将触发侦听器）。当监听的目标数据为一个对象时，对象中的属性的值发生变化并不会触发侦听器。// 当输入的文本不存在于 users 中时，我们将更改输入。// 当输入的文本不存在于 users 中时，我们将更改输入。

无论你使用过滤器函数对文本进行了怎样的操作，使用过滤器对文本进行格式化的结果都将为过滤器函数的返回值，所以在对文本进行一顿操作后，请记得将结果作为过滤器函数的返回值进行返回。Vue.filter() 接收两个参数，其中第一个参数为全局过滤器函数的名称，第二个参数则为全局过滤器的处理函数。但从这个示例中由引出了一个问题，若同时存在同名的全局过滤器及私有过滤器，含有私有过滤器会优先使用哪一个过滤器呢？私有过滤器仅能被创建该过滤器的。// 使用空格来分割获取到的文本，得到包含所有英语单词的数组对象。

内容渲染指令能够更新元素的 textContent。{{}} 与 v-text 的功能类似，都能够更新元素的 textContent，但两者存在两个不同。v-text 会使用指定的值覆盖元素的 textContent，而 {{}} 不会影响元素 textContent 中的其他内容。执行结果：执行结果：在页面首次加载时，{{}} 中的内容如果还未编译完成，就会出现闪现问题。v-text 指令在 textContent 存在原有内容时会发生闪现现象。v-text 在 textContent 不存在原有内

html-webpack-plugin 插件可以自动地将某个路径下的文件复制到其他路径下，该文件并不会存在于物理磁盘中，在 webpack 运行过程中，该文件都将暂存于内存中，在 webpack 停止运行时，将该文件写入物理磁盘（复制的文件中所发生的修改在 webpack 中止运行后将写入原文件中）中。在对 webpack 进行配置之前，需要在项目根目录下新建 webpack 配置文件，该文件的名称为。在 webpack 结束运行前，打包后的文件都将存储在内存中，可以在项目文件根目录中访问到该文件。