Vue教程基础篇.doc

Vue.js 基础知识点总结 以下是对 Vue 教程基础篇的知识点总结： 1. Vue 指令 * `v-bind`：用于绑定数据到 HTML 元素的 attribute 上，简写为 `:`，例如 `<div v-bind:id="'list-' + id"></div>` * `v-model`：用于双向数据绑定，即将数据与表单元素绑定在一起 * `v-html`：用于将 HTML 字符串渲染到页面上 2. 数据和方法 * 在 Vue 实例创建时，data 对象中的所有属性都会被加入响应式系统中 * 当数据改变时，视图会重新渲染 * 只有在实例创建时存在于 data 中的属性才是响应式的 3. 生命周期钩子 * 生命周期钩子函数可以在 Vue 实例的不同阶段被调用，例如created、mounted、updated 等 4. 计算属性 * 计算属性可以基于依赖项进行缓存，只有相关依赖项改变时才会重新求值 * 计算属性可以在模板中使用，例如 `{{ reversedMessage }}` * 计算属性可以有 getter 和 setter，例如 `fullName` 计算属性 5. 方法 * 方法可以在模板中使用，例如 `{{ reversedMessage() }}` * 方法不同于计算属性，方法每次调用都会执行函数 6. class 和 style 绑定 * `v-bind` 可以用于绑定 class 和 style 属性 * 在将 `v-bind` 用于 class 和 style 时，Vue.js 做了专门的增强 7. JavaScript 表达式 * Vue.js 提供了完全的 JavaScript 表达式支持 * 可以在模板中使用 JavaScript 表达式，例如 `{{ number + 1 }}`、`{{ ok ? 'YES' : 'NO' }}` 8. 数据绑定 * Vue.js 提供了多种数据绑定的方式，例如 `v-bind`、`v-model` 等 * 数据绑定可以用于绑定数据到 HTML 元素的 attribute 上 9. 生命周期 * Vue 实例的生命周期包括创建、挂载、更新、销毁等阶段 * 生命周期钩子函数可以在不同的阶段被调用