设计网站页面好处,温州英文seo,中国建设银行网上银行网站,北京市朝阳区网站开发公司前端技术Vue学习笔记 文章目录 前端技术Vue学习笔记1、指令修饰符2、v-bind对于样式控制的增强2.1、v-bind对于样式控制的增强--class2.2、v-bind对于样式控制的增强--操作style 3、v-model应用于其他表单元素4、计算属性4.1、**computed计算属性 vs methods方法的区别**4.2、计…前端技术Vue学习笔记 文章目录 前端技术Vue学习笔记1、指令修饰符2、v-bind对于样式控制的增强2.1、v-bind对于样式控制的增强--class2.2、v-bind对于样式控制的增强--操作style 3、v-model应用于其他表单元素4、计算属性4.1、**computed计算属性 vs methods方法的区别**4.2、计算属性的完整写法4.3、成绩添加案例 5、watch 监视器 1、指令修饰符
通过 “.” 指明一些指令后缀不同后缀封装了不同的处理操作 —简化代码
按键修饰符 keyup.enter -- 键盘回车监听 v-model修饰符 v-model.trim -- 去除首尾空格 v-model.number -- 转数字 事件修饰符 事件名.stop -- 阻止冒泡 事件名.prevent -- 阻止默认行为
练习代码
bodydiv idapp !-- 键盘回击事件绑定处理 --h3键盘回击事件绑定处理/h3用户名:input typetext v-modelusername keyup.enterfn/br/!-- v-model修饰符 v-model.trim(去除首尾空格) v-model.number转数字 --h3v-model修饰符/h3年龄:input typetext v-model.numberage /br/英文名input typetext v-model.trimusName /br/!-- 事件修饰符事件名.stop(阻止冒泡) 事件名.prevent(阻止默认行为)--h3 事件修饰符/h3div classfather clickfdiv classson click.prevents/div/div!-- click.prevent阻止默认跳转到百度首页--a hrefhttps:www.baidu.com click.prevent点击跳转到百度/a/divscriptconst app new Vue({el : #app,data : {username : ,usName : ,age : },methods : {fn(e){//e.key Enter 等价于keyup.enter// if(e.key Enter){}console.log(键盘回车事件触发this.username)},f(){alert(这是父元素盒子)},s(){alert(这是子元素盒子)} }})/script/body2、v-bind对于样式控制的增强
为了方便开发者进行样式控制Vue拓展了v-bind的语法可以针对class类名和style行内样式进行控制。
2.1、v-bind对于样式控制的增强–class
语法 :class“对象/数组” 对象–建就是类名值是布尔值。如果值为true有这个类否则没有这个类 适用场景一个类来回切换 数组–数组中的所有类都会添加到盒子上本质就是一个class列表 适用场景批量添加或删除类
案例练习京东秒杀tab导航高亮
body!-- 案列京东秒杀tab导航高亮 gezi是一个样式类--div idapp h3v-bind对于样式控制的增强--class/h3ulli v-for(item,index) in list clickactiveIndex index a :class{gezi : index activeIndex} href#{{ item.name }}/a/li /ulhr/divscriptconst app new Vue({el : #app,data : {activeIndex : 0,list : [{id : 1,name : 京东秒杀},{id : 2,name : 京东抢购}, {id : 3,name : 京东商场}]},methods : {}})/script/body2.2、v-bind对于样式控制的增强–操作style
语法 :style “样式对象”
适用场景某个具体属性的动态设置 注意
当遇到像background-color这样带横杠的属性名必须以驼峰命名或者以引号处理在{}中是以json的格式写的所以键值要加引号
模版语法 案列进度条实现
htmlheadtitle 进度条--style /titlescript src../../vue.js/scriptstyle.progress{height: 25px;width: 400px;border-radius: 15px;background-color: black;border: 3px solid black;box-sizing: border-box;margin-bottom: 30px;}.inner{height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: blueviolet;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}/style/headbody!-- div classbox :style{width : 400px,height : 400px,background-color: red } --!-- div classbox :style{width : 400px,height : 400px,backgroundColor: red } --!-- 案列京东秒杀tab导航高亮 --div idapp h3进度条--style/h3div classprogressdiv classinner :style{width: count%}/divspan :style{ padding-left: count % }{{ count }}%/span/div button clickcount-- v-showcount0-/buttonbutton clickcount v-showcount100/button/divscriptconst app new Vue({el : #app,data : {count : 50 //默认为50%},methods : {}})/script/body
/html3、v-model应用于其他表单元素
常见的表单元素都可以用v-model绑定关联 --快速获取或设置表单元素的值
它会根据控件类型自动选取正确的方法来更新元素
例如输入框input:text、文本域(textarea)、复选框(input:checkbox)、单选框(input:radio)、下拉菜单select等等。
案例注册案例
bodydiv idappdiv :class[register]h3用户注册信息/h3!-- 输入框 --用户名:input typetext v-model.trimusername nameusername/brbr是否单身input typecheckbox v-modelisSingle/brbr!-- 单选框 前置理解)1.name给单选框加上name属性可以分组--- 统一组互相互斥2.value给单选框加上value属性用于提交给后台的数据结合Vue使用 --》v-model --性别 input typeradio namesex value1 v-modelsex男input typeradio namesex value0 v-modelsex女brbr!-- 下拉框 前置理解)1.option 需要设置 value值提交给后台2.select 的 value值关联了选中的 option 的 value值结合Vue使用 --》v-model 结合$0.value进行查看--所在城市 select v-modelcityIdoption value1白银/optionoption value2靖远/optionoption value3会宁/optionoption value4景泰/option/selectbrbrbutton注册/button/div/divscriptconst app new Vue({el : #app,data : {username : ,sex : 1,isSingle : true,cityId : 4}})/script/body测试结果
4、计算属性 概念基于现有的数据计算出来的新属性。依赖的数据变化自动重新计算 语法
声明在computed配置项中一个计算属性对应一个函数和普通属性一样使用{{计算属性名}}
计算属性换言之就是将一段求值的代码进行封装。
小黑笔城 bodydiv idapph3计算属性练习/h3 table classbordered-tabletrtd名称/tdtd数量/td/trtr v-for(item,index) in list td{{item.name}}/tdtd{{item.num}}/td/tr/tableh3文件总数{{totalNum}}/h3/divscriptconst app new Vue({el : #app,data : {list : [{id : 1,name : 铅笔,num : 10},{id : 2,name : 订书机,num : 20},{id : 2,name : 打印机,num : 2},{id : 2,name : 钢笔,num : 36}]},computed : {totalNum(){//基于现有数据编写求值逻辑//计算属性函数内部可以直接通过 this 访问到 vue 实例//需求对this.list数组里面的 num 进行求和 --》reducelet totalthis.list.reduce((sum,item) sum item.num,0) return total}}})/script/body
测试结果
4.1、computed计算属性 vs methods方法的区别
computed计算属性 作用封装一段对于数据的处理求得一个结果 语法写在computed 配置项中作为属性直接使用–this.计算属性 {{计算属性名}} 缓存特性提升性能计算属性会对计算出来的结果缓存再次使用直接读取缓存依赖项变化会自动重新计算 --并再次使用缓存 methods方法 作用给实例提供一个方法调用以处理业务逻辑 语法写在methods配置项中 作为方法需要调用 —this.方法名() {{方法名}} 事件名“方法名”
使用计算属性缓存特性 使用methods方法中的函数时 4.2、计算属性的完整写法
计算属性默认的简写只能读取访问不能“修改” 如果需要“修改” -- 需要写计算属性的完整写法 案例改名卡的练习 bodydiv idapph3计算属性的完整写法/h3 姓input typetext v-model.trimxing/名input typetext v-model.trimming/全名{{fullName}}brbr新名 input typetext v-model.trimnewNamebrbrbutton clickmodify改名卡/button/divscriptconst app new Vue({el : #app,data : {xing : 张,ming : 飞,newName : },methods : {modify(){//通过this.计算属性进行修改计算属性的值this.fullName this.newName}},computed : {//简写 --获取没有配置设置的逻辑// fullName(){// return this.xing this.ming// }//完整写法 -- 获取 设置fullName : {// 1. 当fullName计算属性被获取求值时执行get有缓存时从缓存中获取数据// 会将返回值作为求值的结果get(){return this.xing this.ming},// 2. 当fullName计算属性被修改赋值时执行set// 修改的值传递给set方法的形参set(value){this.xing value.slice(0,1)this.ming value.slice(1)}}}})/script/body测试结果
4.3、成绩添加案例
题目要求
代码完成
htmlheadtitle计算属性/titlescript src../../vue.js/scriptstyle.bordered-table {border: 1px solid #000; /* 设置表格边框样式 */}.right{float: left;width: 200px;height: 200px;padding-left: 300px;padding-top: 30px;}.left{float: left;width: 260px;height: 400px;}.low60{color : red}/style/headbodydiv idappdiv classlefth3成绩案例/h3 table classbordered-tabletrtdID/tdtd名称/tdtd数量/tdtd操作/td/trtr v-for(item,index) in list td{{index}}/tdtd{{item.name}}/tdtd :class{low60 : item.score 60} {{item.score}}/td
!-- 让低于60分的爆红 --tda hrefhttps:www.baidu.com click.preventdel(item.id)删除/a/td/tr/tableh3总分{{totalScore}}/h3h3平均分{{averageScore}}/h3/divdiv classrighth3新科目/h3科目: input typetext placeholder请输入科目 v-model.trimnewProject /br分数input typetext placeholder请输入分数 v-model.numbernewScore /brbr button clickaddProject添加/button/div/divscriptconst app new Vue({el : #app,data : {list : [{id : 1,name : 语文,score : 90},{id : 2,name : 数学,score : 40},{id : 3,name : 英语,score : 60},{id : 4,name : 化学,score : 80}],newProject : ,newScore : },methods :{del(id){//通过id删除数组的指定元素this.list this.list.filter(item item.id ! id);},addProject(){//数组中添加元素 元素值为this.projectInfoif(this.newProject.trim() ){alert(添加的内容不能为空)}else if(this.newScore ){alert(添加的内容不能为空)}else if(typeof this.newScore ! number){alert(请输入正确的成绩)}else{//向数组添加一个元素this.list.unshift({id : new Date(),name : this.newProject,score : this.newScore})}this.newProjectthis.newScoreconsole.log(this.newProject this.newScore)}},computed : {totalScore : {get(){let a this.list.reduce((sum,item) sum item.score,0)// console.log(总分数 a)return a},set(value){}},averageScore : {get(){let a 0if(this.list.length 0){console.log(11111)return 0}else{a this.list.reduce((sum,item) sum item.score,0) / this.list.length// console.log(平均分 a)return a} },set(value){}}}})/script/body
/html测试结果 技术使用 5、watch 监视器
作用监视数据变化执行一些业务逻辑 或 异步操作。(当数据发生改变时触发) 语法
简单写法 -- 简单类型数据直接监视 完整写法 -- 添加额外配置项 deep: true 对复杂类型深度监视监视的是一个数据对象而非单个数据 immediatetrue 初始化立即执行一次handler方法 统计求和
