JavaScript+Vue.jsWeb开发实战教程课件 第七章 Vue 3模板与常用指令.pptxVIP

Vue3模板与常用指令演讲人：XXXXXXJavaScript+Vue.jsWeb开发实战教程07

学习目标掌握单文件组件的使用方法掌握实现双向数据绑定的方法掌握指令的使用方法掌握事件对象的使用方法掌握事件修饰符的使用方法能够创建并使用单文件组件能够灵活使用双向数据绑定能够灵活使用事件对象能够熟练运用事件修饰符

思维导图

7.1单文件组件Vue是一个支持组件化开发的框架。在创建Vue项目后，项目目录包含一些扩展名为.vue的文件，每个.vue文件都可以用来定义一个单文件组件。Vue中的单文件组件是Vue组件的文件格式，每个单文件组件由模板、样式和逻辑3个部分构成。下面分别对这3个部分进行介绍。

7.1单文件组件模板用于搭建当前组件的DOM结构，其代码写在template标签中。template标签是Vue提供的容器标签，只起到包裹作用，其不会被渲染为真正的DOM元素。每个单文件组件最多可以包含一个顶层template标签。模板01样式是通过CSS代码为当前组件设置的，其代码写在style标签中。每个单文件组件中可以包含多个style标签。如果当前组件不需要设置样式，则可以省略style标签。样式02逻辑是指通过JavaScript代码处理组件的数据与业务，其代码写在script标签中。每个单文件组件只能包含一个script标签。如果当前组件没有逻辑代码且存在templa