Vue.js核心概念与指令详解

"这是一份关于Vue.js 2.6.14版本的前端学习笔记，涵盖了Vue实例的创建、数据绑定、指令、条件渲染、循环渲染、计算属性、事件处理以及侦听器等多个核心概念。" Vue.js是前端开发中广泛使用的JavaScript框架，其2.6.14版本主要涉及以下知识点： 1. **Vue实例**：Vue实例可以通过`new Vue({})`创建，其中`el`属性用于指定Vue实例接管的DOM元素，`data`可以是对象或函数，用于定义可绑定到模板中的变量和初始值。`methods`用于定义可在模板中调用的方法。 2. **数据绑定与插值**：使用`{{ }}`双大括号进行文本插值，可以插入JavaScript表达式的结果。`v-bind`指令用于动态绑定属性，如`v-bind:class`和`v-bind:style`支持对象和数组语法。事件处理函数通过`v-on`指令绑定，如`v-on:click`，可以传递`$event`参数获取事件对象。 3. **计算属性与方法**：`computed`属性定义了计算属性，这些属性基于其他数据（响应式依赖）计算得出，并且有缓存，只在依赖变化时更新。而`methods`定义的方法没有缓存，每次调用都会执行。 4. **条件渲染与切换**：`v-if`和`v-show`用于根据表达式的真假决定元素是否渲染。`v-if`有惰性初始化，初始为假则不渲染，适合不频繁切换；`v-show`通过改变CSS的`display`属性实现，切换开销小，适合频繁切换。 5. **列表渲染**：`v-for`指令用于遍历数组或对象，可以提供`index`、`key`等额外信息。`v-for`应与`key`属性一起使用，以帮助Vue跟踪每个节点的身份。 6. **表单元素的双向数据绑定**：`v-model`指令用于实现表单元素与Vue实例数据的双向绑定。可以通过`.lazy`、`.trim`、`.number`等修饰符定制行为。 7. **自定义指令与组件**：Vue允许自定义指令，如`v-custom`，但笔记未具体提及。此外，Vue的组件化特性允许创建可复用的UI部件。 8. **事件修饰符**：`v-on`指令可以配合`.stop`、`.prevent`、`.self`等修饰符，控制事件的冒泡、默认行为等。 9. **侦听器（Watchers）**：Vue实例中的`watch`属性用于监听数据变化，可以定义回调函数响应变化。对于计算属性，Vue会自动设置对应的侦听器。 10. **生命周期**：Vue实例有自己的生命周期，包括创建、编译、挂载、更新和销毁等阶段，开发者可以在特定生命周期钩子中插入代码。 以上是Vue.js 2.6.14版本的核心知识点，笔记中还提到`vm.$mount`用于手动挂载Vue实例，`vm.$data`访问所有data内容，以及直接通过`vm.变量名`访问`data`内的数据。这些知识构成了Vue开发的基础。