Vue.js v2.x基础教程：模板语法、指令与事件处理

"Vue.js基础学习记录v2.x" 在Vue.js的基础学习中，我们可以了解到一系列关键概念和语法，这些都是构建Vue应用的核心要素。以下是详细的知识点总结： 1. **模板语法** - **插值**：Vue使用`{{ }}`来插入变量的值。为了防止XSS攻击，可以使用`v-html`，但需要注意安全处理，如后台转义或设置httpOnly cookie。 - **表达式**：Vue还支持简单的JavaScript表达式，它们可以在`{{ }}`中使用。 2. **指令** - **v-bind**：用于动态绑定属性，可以简写为`:attr`。 - **v-if/v-show**：用于条件渲染，`v-if`更适用于条件不常变化的情况，而`v-show`适合频繁切换。 - **v-on**：用于绑定事件监听器，可简写为`@event`。 - **v-for**：用于列表渲染，语法如`v-for="item in items"`，并且可以指定`key`以跟踪元素身份。 3. **类与样式绑定** - **HTML Class**：可以通过对象语法或数组语法动态绑定。 - **内联样式**：同样支持对象语法或数组语法，用于动态绑定CSS样式。 4. **条件渲染** - **v-if/v-else/v-else-if**：用于条件性地显示或隐藏元素，`v-if`和`v-else-if`可以形成条件链，而`v-else`用于没有满足条件时的默认渲染。 - **template**：可以用作条件渲染的包装元素，当条件不满足时，template元素本身不会被渲染。 5. **列表渲染** - **v-for**：遍历数组或对象，可以使用`item in items`语法，`item`是当前项，`items`是源数据。 - **key**：用于跟踪每个节点的身份，提高渲染效率，通常使用唯一ID作为key值，例如`v-for="(item, index) in items" :key="item.id"`。 - **数组更新检测**：Vue不能检测到数组某些方法（如索引赋值）的变动，推荐使用`push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `sort()`, `reverse()`等方法，或者使用`Vue.set()`或`Array.prototype.splice()`来修改数组。 6. **事件处理** - **监听事件**：通过`v-on:click`等指令绑定事件处理函数。 - **阻止默认行为**：使用`.prevent`修饰符，如`v-on:submit.prevent`。 - **事件修饰符**：还有其他修饰符如`.stop`（阻止冒泡）、`.capture`（捕获阶段触发）、`.self`（仅在当前元素上触发）等。 7. **数据过滤** - **简单过滤**：可以使用`filter()`方法根据用户输入筛选列表，配合`v-model`监听输入，然后更新显示的数据。 在实际开发中，我们通常会使用计算属性（computed properties）来处理复杂的逻辑，这样可以避免对原始数据的直接操作，确保数据的正确性和响应性。计算属性在Vue实例中定义，根据依赖自动缓存结果，只有当依赖改变时才会重新计算。例如，创建一个计算属性用于过滤列表： ```javascript computed: { filteredList() { return this.list.filter(item => item.includes(this.searchText)); } } ``` 这里，`searchText`是用户输入，`list`是原始数据，`filteredList`则存储了过滤后的结果。这样，我们可以直接在模板中使用`filteredList`，同时保持`list`的完整性。