Vue.js课堂笔记：指令、事件和组件

"Vue.js 课堂笔记" 在Vue.js框架中，开发者可以利用一系列指令和特性来构建用户界面。以下是对课堂笔记中提到的关键知识点的详细解释： ### 1. 创建Vue项目 Vue项目的创建通常需要以下步骤： 1. 确保安装了Node.js版本在10以上但不超过14系列。 2. 使用`npm install -g @vue/cli`全局安装Vue CLI。 3. 运行`vue create xxx`命令创建一个新的Vue项目，其中`xxx`是项目名称。 4. 使用`npm run serve`启动开发服务器，查看项目。 ### 2. Vue指令 Vue提供了多种指令用于操作DOM，包括： - **表达式**：`{{ 变量 }}`用于插入JavaScript表达式的值。 - **v-html**：`<div v-html='变量'></div>`将变量内容作为HTML插入到元素内。 - **v-text**：`<div v-text='变量'></div>`将变量内容作为纯文本插入到元素内。 - **v-if/v-else/v-else-if**：用于条件渲染，根据变量的值决定元素是否显示。 - **v-show**：与v-if类似，但元素始终会被渲染，只是通过CSS的`display`属性控制可见性。 - **v-for**：循环渲染列表，可以遍历数组或对象。 - 遍历数组：`<div v-for='(item, index) in arr' :key='index'>{{ item }}</div>` - 遍历对象：`<div v-for='(value, key, index) in object' :key='index'>{{ value }}</div>` - **v-bind**：动态绑定属性，如`<div v-bind:title=''></div>`。简写形式为`<div :title=''></div>`。 - **v-on**：绑定事件监听器，例如`<div v-on:click='functionName'></div>`。如果需要传递参数，可以写成`<div v-on:click='functionName(1,2)'></div>`。 ### 3. Vue实例与组件 - **export default**：用于导出Vue实例，包含`data()`和`methods`等属性，如： ```javascript export default { data() { return {}; }, methods: {} } ``` - **组件组成**：一个Vue组件通常包括`template`（模板）、`script`（脚本）和`style`（样式）三个部分。 - **组件导入导出**：使用`import xx from 'x/xxx.vue'`导入组件，然后在`components`对象中定义，如`components: { xx }`，并在模板中使用`<xx></xx>`。 ### 4. 事件修饰符 事件修饰符用来修改事件处理方式： - `.stop`：阻止事件冒泡。 - `.prevent`：阻止事件的默认行为。 - `.capture`：在事件捕获阶段调用处理器。 - `.self`：只有当事件源是当前元素时才触发处理函数。 - `.once`：只执行一次事件处理函数。 - `.passive`：声明事件处理函数不会阻止页面滚动。 ### 5. 按键修饰符 在处理键盘事件时，可以使用按键修饰符： - `.enter`：捕获Enter键。 - `.tab`：捕获Tab键。 - `.delete`：捕获Delete键，注意括号中的内容表示捕获的是删除键的名称。 这些知识点构成了Vue.js的基础，理解和掌握它们对于有效地使用Vue进行前端开发至关重要。在实际项目中，开发者还会遇到更多高级特性，如计算属性、侦听器、插槽、过渡效果、组件通信等，这些都是构建复杂应用所必需的。