一、Vue.js入门.md

### Vue.js 入门知识点详解 #### 一、Vue.js 概述 Vue.js 是一套用于构建用户界面的渐进式框架，它采用 MVVM 架构，这使得开发者能够轻松地管理和维护复杂的前端应用程序。 - **M (Model)**: 代表数据模型，负责管理应用的数据逻辑。 - **V (View)**: 代表用户界面，是应用的视图层，用来展示数据。 - **VM (ViewModel)**: 实现 Model 与 View 的关联，即当 Model 数据发生变化时，能够自动更新 View；同样地，当用户交互改变 View 时，能够自动更新 Model。这是通过双向数据绑定机制实现的，其核心是利用 JavaScript 的 `Object.defineProperty()` 方法来劫持数据变化。 #### 二、Vue.js 的安装与配置 Vue.js 不支持 IE8 及以下版本的浏览器，因为它使用了 IE8 无法模拟的 ECMAScript5 特性，例如 `Object.defineProperty()`。 - **开发版**: 包含所有警告及调试信息，适合在开发过程中使用。 - **生产版**: 删除了警告和调试信息，适合在项目发布时使用。 引入 Vue.js 通常有两种方式： 1. **通过 CDN 引入**: ```html <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> ``` 2. **通过 NPM 安装**: ```bash npm install vue ``` #### 三、Vue 实例的基本使用 创建 Vue 实例的基本语法如下： ```javascript // ViewModel const vm = new Vue({ el: '#app', // View: element，指明在页面中需要渲染的 View data: { // Model: 模型，在页面渲染时使用到的数据 message: 'Hello Vue.js' } }) ``` 在创建后的 Vue 实例中，可以直接访问到在 `data` 中定义的属性，这是因为创建 Vue 实例时会将 `data` 中的数据处理并挂载到 Vue 实例下供直接调用。需要注意的是，如果 `data` 中定义的数据属性名以 `$` 或 `_` 开头，则不会挂载到 Vue 实例下，需要通过 `vm.$data.$xx` 的形式来访问这些属性。 #### 四、Vue 模板语法 Vue 提供了一种简单而强大的模板语法，允许开发者直接在 HTML 中嵌入 JavaScript 表达式来渲染数据。 - **文本插值语法** (`{{ }}`): 在 `{{ }}` 标记内部写的是 JavaScript 表达式的内容。 ```html {{ express }} ``` - **`v-html` 指令**: 会将指定表达式内容以 HTML 文本的方式渲染。不建议将接收到的用户输入使用 `v-html` 渲染，因为这样极易导致 XSS 跨站脚本攻击。 ```html <!-- 使用 v-html 指令 --> <span v-html="html"></span> <span v-text="text"></span> ``` - **`v-bind` 指令**: 用于动态绑定属性。例如： ```html <a v-bind:href="href">超级链接</a> <a :href="href">超级链接</a> <!-- 简写 --> ``` #### 五、Vue 指令详解 - **`v-text`**: 渲染纯文本。 - **`v-html`**: 渲染 HTML。 - **条件渲染相关的指令**: - **`v-show`**: 通过 CSS 的 `display` 属性来控制元素的显示/隐藏。 - **`v-if`**: 当条件返回值为 `true` 时显示元素，否则隐藏。 - **`v-else`**: 与 `v-if` 结合使用，表示 `v-if` 条件不成立时渲染的内容。 - **`v-else-if`**: 可以连续使用 `v-if` 和 `v-else-if` 来实现多重条件判断。 `v-if` 和 `v-show` 的主要区别在于，`v-if` 是通过添加/删除 DOM 节点来实现显示/隐藏，而 `v-show` 是通过修改元素的 CSS 样式来实现。 - **`v-for`**: 用于列表渲染，可以遍历数组、对象等。 ```html <div id="app"> <ul> <li v-for="(item, index) in items"> {{ item }} --- {{ index }} </li> </ul> </div> ``` 如果遍历的是数组，`index` 返回的是索引；如果是对象，则第一个参数为键，第二个参数为对应的值。 - **`v-on`**: 用于绑定事件监听器，例如： ```html <button v-on:click="doSomething">点击我</button> ``` - **`v-bind`**: 动态绑定属性，可以简写为 `:`。 ```html <img :src="imageSrc" alt="示例图片"> ``` - **`v-pre`**: 实现预格式化，保留模板中的原始内容。 - **`v-cloak`**: 防止页面加载时显示 `{{ }}` 标签中的表达式，直到 Vue 实例准备好渲染页面。 以上是 Vue.js 基础入门所需要了解的关键概念和技术点。通过理解这些基础知识，你可以开始使用 Vue.js 构建自己的前端应用程序。随着经验的积累，还可以进一步学习 Vue 的高级特性，如组件、路由、状态管理等。