day02_Vue01-基础语法3.ppt

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-带参数的过滤器案例,