Vue学习笔记（上）——包含指令、组件、生命周期等基本知识点.pdf

Vue.js是一种流行的JavaScript框架，用于构建用户界面和单页应用程序。在Vue的学习过程中，涉及的概念和组件繁多，本学习笔记（上）旨在梳理包括指令、组件、生命周期等在内的Vue基本知识点。 1. MVVM模式Vue通过MVVM模式实现数据驱动。其中，View代表视图，即用户看到并与之交互的界面；Model代表数据部分，即后端传递过来的数据；ViewModel则是连接视图与数据的中间件，负责监听数据变化并更新视图，同时也监听视图的动作并更新数据。 2.注意事项Vue在渲染元素时会尽可能高效，复用已有元素，以减少DOM操作，提升性能。在使用v-if/v-else/v-show等条件渲染指令时，如果需要在条件切换时保留输入内容，应为元素添加一个唯一的key属性。 3.全局配置Vue实例提供了一些全局配置，如Vue.config.productionTip用于控制生产环境中的提示信息显示，Vue.config.silent用于关闭Vue日志和警告，Vue.config.devtools用于控制vue-devtools调试工具的启用与禁用。 4.实例配置Vue实例配置中包含el（挂载点）、data（数据对象）、methods（方法）、components（子组件）、computed（计算属性）和filters（过滤器）等选项。其中，el用于指定挂载的DOM元素；data定义组件的数据；methods用于定义方法；components用于定义子组件；computed定义计算属性，这些属性的值会被缓存；filters用于文本格式化等。 5.指令Vue内置了多种指令用于操作DOM，如： - v-model：创建双向数据绑定。 - v-once：确保元素或组件只渲染一次。 - v-clock：用于解决初始化慢时的闪烁问题。 - v-pre：跳过编译该元素及其子元素。 - v-if/v-else：条件渲染。 - v-show：根据条件切换元素的显示/隐藏。 - v-text：更新元素的textContent。 - v-html：更新元素的innerHTML。 - v-on：绑定事件监听器。 - v-bind：动态绑定一个或多个属性，或一个组件prop到表达式。 - v-for：基于源数据多次渲染一个元素或模板块。 - v-slot：用于自定义插槽内容。 6.生命周期Vue实例的生命周期包括： -创建：创建实例时触发。 -挂载：实例创建后，将数据和DOM绑定。 -销毁：实例被销毁，清空所有数据。 -钩子函数：在生命周期的各个阶段提供给用户操作的机会，比如beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed等。 7.组件组件是Vue中可复用的独立单元。定义组件需要使用Vue.extend()方法扩展基础Vue构造器。组件的使用涉及到数据和方法的定义、父子组件通信（props、$emit、$children、$refs、$parent、$root）、slot插槽的使用（具名插槽、作用域插槽），以及组件切换等。 8.全局API Vue提供了一些全局API用于注册全局指令、组件、混入（mixin）、插件等。例如： - Vue.directive：注册或获取全局指令。 - Vue.extend：创建一个“扩展实例构造器”。 - Vue.set：向响应式对象添加属性。 - Vue.mixin：全局注册一个混入。 - Vue.use：安装Vue插件。 9.实例属性包括： - vm.$props：获取当前组件实例的props对象。 - vm.$options：获取当前实例的初始化选项。 - vm.$el：获取当前实例的根DOM元素。 - vm.$children：获取当前实例的直接子组件。 - vm.$root：获取当前组件树的根组件实例。 - vm.$slot：访问被插槽分发的内容。 - vm.$attrs：包含父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。以上所述内容构成了Vue.js框架的核心部分，是学习Vue开发的基础。熟悉这些知识点可以帮助开发者更高效地使用Vue.js进行项目开发。在具体的应用开发中，开发者还需要结合实际情况深入理解每个知识点的使用场景和最佳实践。