Vue.js前端开发案例教程项目三 Vue.js指令.pptx

Vue.js前端开发案例教程

项目1Vue.js入门项目2Vue.js开发基础项目3Vue.js指令项目4Vue.js组件全书目录项目5过渡动画项目8综合案例——开发图书销售网站项目7网络请求与状态管理项目6路由管理

Vue.js指令项目三

项目目标素养目标技能目标知识目标熟悉指令的概念掌握常用内置指令的使用方法掌握自定义指令的使用方法能够使用条件渲染指令有条件地渲染元素能够使用循环渲染指令循环渲染列表能够使用属性绑定指令动态更改元素的样式能够使用事件处理指令实现用户与页面之间的交互能够使用表单输入绑定指令在表单元素上建立双向数据绑定能够定义并使用自定义指令多读书，读好书，不断提升自己的综合素质积极应对变化和挑战，抓住机遇，成就更好的自己

0102项目描述小刘是一名软件开发工程师，主要负责订餐系统项目的前端开发。

0102项目描述综合考虑订餐系统各模块的结构，小刘决定使用不同的指令制作订餐系统的商品评价模块。指令是Vue.js的核心特性之一。使用指令，可以提高开发效率和代码的可读性。

制作订餐系统商品评价模块项目分析√在项目中新建一个单文件组件√构建组件的基本框架√在组件中定义商品评价模块的相关内容①使用循环渲染指令显示商品评价信息②使用事件处理指令和条件渲染指令筛选商品评价信息③使用属性绑定指令设置不同状态下商品评价类型的样式√查看商品评价模块的页面效果

1.Vue.js指令是什么?2.Vue.js指令有哪些优点？问题项目准备全班学生以3～5人为一组进行分组，各组选出组长。组长组织组员扫码观看“Vue.js指令概述”视频，讨论并回答下列问题。Vue.js指令概述

01认识指令循环渲染指令事件处理指令030502条件渲染指令属性绑定指令表单输入绑定指令0406项目导航

0907自定义指令项目实训项目考核1108项目实施项目总结项目评价1012项目导航

定义认识指令指令是带有“v-”前缀的特殊HTML属性，其值限定为单个表达式。指令包括内置指令和自定义指令。

常用内置指令（1）内容渲染指令（3）循环渲染指令（2）条件渲染指令（4）属性绑定指令（5）事件处理指令将JavaScript中定义的数据渲染到页面上。内容渲染指令包括v-text和v-html。根据条件表达式的返回值有条件地渲染元素。根据给定的数据循环渲染列表。为HTML元素的属性绑定数据，从而响应式更新HTML元素属性的值。监听HTML元素的事件并绑定事件处理器，在事件触发时，执行事件处理器对应的JavaScript代码，实现用户与页面之间的交互。认识指令（6）表单输入绑定指令在表单元素上建立双向数据绑定，实现表单元素与变量的数据同步。

v-if、v-else-if和v-else指令功能：根据不同的条件表达式渲染不同的?HTML?元素。用法①：单独使用v-if指令有条件地渲染HTML元素，语法格式如下。标签名v-if=条件表达式…/标签名条件渲染指令返回值为?true?时，说明成功渲染元素。返回值为?false时，说明不会渲染元素或移除已渲染的元素。

v-if、v-else-if和v-else指令用法②：v-if?指令与?v-else-if?和?v-else?指令结合使用，语法格式如下。标签名v-if=条件表达式A…/标签名标签名v-else-if=条件表达式B…/标签名标签名v-else…/标签名条件渲染指令注意：v-else?指令依附的元素必须紧跟在?v-if?指令或?v-else-if?指令依附的元素后面，v-else-if指令依附的元素必须紧跟在?v-if?指令依附的元素后面，否则?v-else?指令或?v-else-if?指令不会被识别，其依附的元素会直接被渲染。

高手点拨v-if?指令必须依附于某个元素，如果要使用?v-if?指令同时控制多个元素，可通过在template标签上使用v-if指令实现，语法格式如下。templatev-if=条件表达式标签名…/标签名…/templatev-else-if指令和v-else指令也可以用在template标签上。v-if、v-else-if和v-else指令条件渲染指令

v-show指令功能：根据条件表达式的返回值显示或隐藏HTML元素。用法：v-show指令的用法与v-if指令的用法基本一样，语法格式如下。标签名v-show=条件表达式…/标签名条件渲染指令v-show?指令是通过为元素添加或移除“display:none”样式来控制元素的隐藏与显示的，且无论条件表达式返回什么值，渲染过程