day02 day02_Vue01-基础语法3

Vue02 基础语法 表单元素 要点提示 掌握程度 掌握 1 1 常用特性概述与表单效果概览 常用特性概述与表单效果概览 常见的表单元素有哪些输入框复选框文本域下拉框 1 1 常用特性概述与表单效果概览 课堂问答 知识总结 v model单选框 复选框 要点提示 掌握程度 掌握 1 2 表单基本操作 表单基本操作 单选框如何实现单选 1 两个单选框需要同时通过v model双向绑定一个值2 每一个单选框必须要有value属性且value值不能一样3 当某一个单选框选中的时候v model会将当前的value值改变data中的数据复选框如何实现复选1 复选框需要同时通过v model双向绑定一个值2 每一个复选框必须要有value属性且value值不能一样3 当某一个单选框选中的时候v model会将当前的value值改变data中的数据 1 2 表单基本操作 课堂问答 知识总结 要点提示 掌握程度 应用 1 3 表单基本操作 下 表单基本操作 下 v model下拉框 文本域 如何实现获取下拉框的选中状态1 需要给select通过v model双向绑定一个值2 每一个option必须要有value属性且value值不能一样3 当某一个option选中的时候v model会将当前的value值改变data中的数据如何获取文本域中的值通过v model绑定一个值 1 3 表单基本操作 下 课堂问答 课堂问答 修饰符number trim lazy 要点提示 掌握程度 应用 1 4 表单域修饰符用法 表单域修饰符用法 表单域修饰符有哪些 trim自动过滤用户输入的首尾空白字符 只能去掉首尾的不能去除中间的空格lazy将input事件切换成change事件 lazy修饰符延迟了同步更新属性值的时机 即将原本绑定在input事件的同步逻辑转变为绑定在change事件上 number转换为数值注意点 当开始输入非数字的字符串时 因为Vue无法将字符串转换成数值所以属性值将实时更新成相同的字符串 即使后面输入数字 也将被视作字符串 1 4 表单域修饰符用法 课堂问答 知识总结 自定义指令 要点提示 掌握程度 应用 1 5 自定义指令基本用法 自定义指令基本用法 如何自定义指令Vue directive注册全局指令directives定义局部指令注意 局部指令有s 1 5 自定义指令基本用法 课堂问答 知识总结 自定义指令自定义指令携带参数 要点提示 掌握程度 应用 1 6 自定义指令 带参数 自定义指令 带参数 自定义指令中如何携带参数通过v 指令名 参数 1 6 自定义指令 带参数 课堂问答 知识总结 局部指令 要点提示 掌握程度 应用 1 7 自定义局部指令用法 自定义局部指令用法 局部指令和全局指令有什么区别局部的指令只能在当前页面使用全局的指令能够在任何组件中使用如何自定义局部指令局部指令定义在directives里面 1 7 自定义局部指令用法 课堂问答 知识总结 计算属性computed 要点提示 掌握程度 应用 1 8 计算属性基本用法 计算属性基本用法 计算属性的使用场景模板中放入太多的逻辑会让模板过重且难以维护使用计算属性可以让模板更加的简洁computed中定义的属性可以自定义吗 可以定义好的计算属性如何调用在插值语法中直接写自定义的属性名在方法中直接this 自定义的属性名 1 8 计算属性基本用法 课堂问答 知识总结 计算属性缓存vue中的方法 要点提示 掌握程度 应用 1 9 计算属性与方法的区别 计算属性与方法的区别 计算属性和方法有什么区别计算属性会缓存方法不会缓存 1 9 计算属性与方法的区别 课堂问答 知识总结 watch 要点提示 掌握程度 应用 1 10 侦听器基本用法 侦听器基本用法 侦听器的使用场景一般用于异步或者开销较大的操作侦听器中定义的属性有什么要求watch中的属性一定是data中已经存在的数据Watch中的属性不能自定义 1 10 侦听器基本用法 课堂问答 知识总结 侦听器watch 要点提示 掌握程度 应用 1 11 侦听器案例 侦听器案例 侦听器案例实现思路采用侦听器来监测用户名变化调用后台接口进行验证根据验证的结果调整提示信息 1 11 侦听器案例 课堂问答 知识总结 过滤器局部过滤器和全局过滤器 要点提示 掌握程度 应用 1 12 过滤器基本用法 按键修饰符的用法 如何定义一个过滤器Vue filter或者filters过滤器中的第一个参数代表什么第一个参数表示管道符前面的数据如何定义全局和局部过滤器Vue filter全局Filters局部 1 12 过滤器基本用法 课堂问答 知识总结 上午复习 单选框如何实现单选 通过那个修饰符过滤用户输入的首尾空白字符 如何自定义全局指令 指令中如何传递参数 计算属性和方法区别 Vue 基础语法02天上午复习 上午复习 如何定义一个过滤器 侦听器使用场景 Vue 基础语法02天上午复习 过滤器参数 要点提示 掌握程度 应用 1 13 带参数的过滤器案例 带参数的过滤器案例 过滤器中的参数怎么使用 message filterA arg1 arg2 Vue filter filterA function n a b 在过滤器中第一个参数对应的是管道符前面的数据n此时对应message第2个参数a对应实参arg1字符串第3个参数b对应实参arg2字符串 1 13 带参数的过滤器案例 课堂问答 知识总结 生命周期 要点提示 掌握程度 应用 1 14 实例的生命周期 实例的生命周期 练 vue生命周期有哪些beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed 1 14 实例的生命周期 课堂问答 知识总结 项目介绍 要点提示 掌握程度 应用 1 15 综合案例 图书管理功能概述 属性绑定基本用法 变异方法替换方法 要点提示 掌握程度 应用 1 16 Vue数组处理相关概念 指令v model底层原理分析 1 16 Vue数组处理相关概念 课堂问答 知识总结 变异方法和替换数组有什么区别变异的方法能够实现数据更新视图自动更新替换数组不会修改原始数据导致数据改变视图不一定更新变异方法和替换数组有哪些变异方法pushpopshiftunshiftsplicesortreverse替换数组filterconcatslice Vue set 要点提示 掌握程度 应用 1 17 Vue动态处理响应式数据 Vue动态处理响应式数据 如何动态处理响应式数据Vue set a b c 让触发视图重新更新一遍 数据动态起来a是要更改的数据 b是数据的第几项 c是更改后的数据 1 17 Vue动态处理响应式数据 课堂问答 知识总结 v bind绑定类名 要点提示 掌握程度 应用 1 18 图书列表展示 图书列表展示 数据渲染到页面上思路 1 18 图书列表展示 课堂问答 知识总结 添加图书 要点提示 掌握程度 应用 1 19 综合案例 添加图书 综合案例 添加图书 添加图书通过双向绑定获取到输入框中的输入内容给按钮添加点击事件把输入框中的数据存储到data中的books里面 1 19 综合案例 添加图书 课堂问答 知识总结 修改图书信息 要点提示 掌握程度 应用 1 20 综合案例 修改图书 综合案例 修改图书 修改图书思路点击修改按钮的时候获取到要修改的书籍名单给修改按钮添加点击事件 需要把当前的图书的id传递过去这样才知道需要修改的是哪一本书籍把需要修改的书籍名单填充到表单里面根据传递过来的id查出books中对应书籍的详细信息把获取到的信息填充到表单 1 20 综合案例 修改图书 课堂问答 知识总结 修改图书 要点提示 掌握程度 应用 1 21 修改图书 修改图书 修改图书思路定义一个标识符 主要是控制编辑状态下当前编辑书籍的id不能被修改即处于编辑状态下当前控制书籍编号的输入框禁用通过属性绑定给书籍编号的绑定disabled的属性flag为true即为禁用flag默认值为false处于编辑状态要把flag改为true即当前表单为禁用复用添加方法用户点击提交的时候依然执行handle中的逻辑如果flag为true即表单处于不可输入状态此时执行的用户编辑数据数据 1 21 修改图书 课堂问答 知识总结 删除图书 要点提示 掌握程度 应用 1 22 综合案例 删除图书 综合案例 删除图书 删除图书思路给删除按钮添加事件把当前需要删除的书籍id传递过来根据id从数组中查找元素的索引根据索引删除数组元素 1 22 综合案例 删除图书 课堂问答 知识总结 过滤器 要点提示 掌握程度 应用 1 23 综合案例 常用特性应用场景 上 综合案例 常用特性应用场景 上 全局过滤器使用通过Vue filter定义一个全局过滤器通过过滤器过滤时间的时候需要提供一个时间戳计算属性计算属性计算图书总数任何一本改变后会自动计算自定义指定通过vue directive 1 23 综合案例 常用特性应用场景 上 课堂问答 知识总结 侦听器 要点提示 掌握程度 应用 1 24 综合案例 常用特性应用场景 下 综合案例 常用特性应用场景 侦听器使用场景watch中的属性一定是data中已经存在的数据一般