旅游网站建设策划,seo顾问多少钱,定制营销型网站什么意思,网站聚合优化computed和watch的区别 1.computed能完成的功能#xff0c;watch都可以实现 2.watch能完成的#xff0c;computed不一定能实现#xff0c;例如#xff1a;watch可以进行异步操作 两个重要的小原则 1.所被Vue管理的函数#xff0c;最好写成普通函数#xff0c;这样this的指…computed和watch的区别 1.computed能完成的功能watch都可以实现 2.watch能完成的computed不一定能实现例如watch可以进行异步操作 两个重要的小原则 1.所被Vue管理的函数最好写成普通函数这样this的指向才是vm或组件实例对象 2.所有不被Vue所管理的函数定时器回调函数ajax的回调函数Promise的回调函数最好写成箭头函数 这样的this指向才是vm或组件实例对象 条件渲染 !DOCTYPE html
html langen
headmeta charsetUTF-8title条件渲染/titlescript typetext/javascript src../js/vue.js/script
/head
bodydiv idrooth2{{n}}/h2button clickn点我加一/button!-- 用v-show作条件渲染 --h2 v-showfalse欢迎来到{{name}}/h2!-- 用v-if作条件渲染 --h2 v-iffalse欢迎来到{{name}}/h2div v-shown1Angular/divdiv v-shown2React/divdiv v-shown3Vue/div/div/body
script typetext/javascriptVue.config.productionTipfalseconst vm new Vue({el:#root,data:{name:尚硅谷,n:0}})
/script/html v-for指令 1.用于展示列表数据 2.语法v-for(item,index) in xxx :keyyyy 3.可遍历数据对象字符串用的少指定次数用的少
!DOCTYPE html
html langen
headmeta charsetUTF-8title基本列表/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- v-for指令1.用于展示列表数据2.语法v-for(item,index) in xxx :keyyyy3.可遍历数据对象字符串用的少指定次数用的少--div idrooth2人员列表/h2ulli v-forp in persons :keyp.id{{p.name}}-{{p.age}}/li/ulh2汽车信息/h2ulli v-for(a,b) of car{{a}}--{{b}}/li/ulh2字符串/h2ulli v-for(char,index) of str :keyindex{{char}}--{{index}}/li/ulh2指定次数/h2ulli v-for(number,index) of 5 :keyindex{{number}}--{{index}}/li/ul/div/body
script typetext/javascriptVue.config.productionTipfalseconst vm new Vue({el:#root,data:{persons:[{id:001,name:张三,age:18},{id:002,name:李四,age:19},{id:003,name:王五,age:20}],car:{name:奥迪A8,price:70w,color:黑色},str:hello}})
/script
/html key
面试题reactvue中的可以有什么作用key的内部园路 1.虚拟DOM中的key的作用 key是虚拟DOM对象的标识当数据发生改变时Vue会根据【新数据】生成【新的虚拟DOM】 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】差异比较比较规则如下 2.对比规则 (1)旧虚拟DOM中找到了与新虚拟DOM相同的key 1.若虚拟DOM中的内容没变直接使用之前的真实DOM 2.若虚拟DOM中内容变了则生成新的真实DOM随后替换页面中之前的真实DOM (2)旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM随后渲染到页面 3.用index作为key可能引发的问题 1.若对数据进行逆序添加逆序删除等破坏顺序的操作 会产生没有必要的真实DOM更新 》页面效果没问题但效率低 2.若结构中还包含输入类的DON 会产生错误DOM更新》界面更新有问题 开发中如何选择key 1.最好使用每条数据的唯一的标识作为key 比如id 手机号身份证号学号等 2.如果不存在对数据的逆序添加逆序删除等破坏顺序的操作仅用于渲染列表用于战术 使用index作为key是没有问题的
!DOCTYPE html
html langen
headmeta charsetUTF-8title:key的原理/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- 面试题reactvue中的可以有什么作用key的内部园路1.虚拟DOM中的key的作用key是虚拟DOM对象的标识当数据发生改变时Vue会根据【新数据】生成【新的虚拟DOM】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】差异比较比较规则如下2.对比规则(1)旧虚拟DOM中找到了与新虚拟DOM相同的key1.若虚拟DOM中的内容没变直接使用之前的真实DOM2.若虚拟DOM中内容变了则生成新的真实DOM随后替换页面中之前的真实DOM(2)旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM随后渲染到页面3.用index作为key可能引发的问题1.若对数据进行逆序添加逆序删除等破坏顺序的操作会产生没有必要的真实DOM更新 》页面效果没问题但效率低2.若结构中还包含输入类的DON会产生错误DOM更新》界面更新有问题开发中如何选择key1.最好使用每条数据的唯一的标识作为key 比如id 手机号身份证号学号等2.如果不存在对数据的逆序添加逆序删除等破坏顺序的操作仅用于渲染列表用于战术使用index作为key是没有问题的--div idrooth2人员列表/h2button click.onceadd添加一个老刘/buttonulli v-for(p,index) of persons :keyp.id{{p.name}}-{{p.age}}input typetext/li/ul/div/body
script typetext/javascriptVue.config.productionTipfalseconst vm new Vue({el:#root,data:{persons:[{id:001,name:张三,age:18},{id:002,name:李四,age:19},{id:003,name:王五,age:20}],},methods: {add(){const p {id:004,name:老刘,age:40}this.persons.unshift(p)}},})
/script
/html 列表过滤即进行一个模糊搜索的处理
!DOCTYPE html
html langen
headmeta charsetUTF-8title列表过滤/titlescript typetext/javascript src../js/vue.js/script
/head
bodydiv idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordulli v-for(p,index) of filPersons :keyindex{{p.name}}-{{p.age}}--{{p.sex}}/li/ul/div/body
script typetext/javascriptVue.config.productionTipfalse//用watch实现//#region// new Vue({// el:#root,// data:{// keyWord:,// persons:[// {id:001,name:马冬梅,age:18,sex:女},// {id:002,name:周冬雨,age:19,sex:女},// {id:003,name:周杰伦,age:20,sex:男},// {id:004,name:温兆伦,age:22,sex:男}// ], // filPersons:[]// },// watch:{// keyWord:{// immediate:true,// handler(val){// this.filPersonsthis.persons.filter((p){// return p.name.indexOf(val)!-1// })// }// }// }// })//#endregion//用computed实现new Vue({el:#root,data:{keyWord:,persons:[{id:001,name:马冬梅,age:18,sex:女},{id:002,name:周冬雨,age:19,sex:女},{id:003,name:周杰伦,age:20,sex:男},{id:004,name:温兆伦,age:22,sex:男}], },computed:{filPersons(){return this.persons.filter((p){return p.name.indexOf(this.keyWord)!-1})}}})
/script
/html 列表的年龄排序问题
!DOCTYPE html
html langen
headmeta charsetUTF-8title列表排序/titlescript typetext/javascript src../js/vue.js/script
/head
bodydiv idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordbutton clicksortType 2年龄升序/buttonbutton clicksortType 1年龄降序/buttonbutton clicksortType 0原顺序/buttonulli v-for(p,index) of filPersons :keyindex{{p.name}}-{{p.age}}--{{p.sex}}/li/ul/div/body
script typetext/javascriptVue.config.productionTipfalse//用computed实现new Vue({el:#root,data:{keyWord:,sortType:0, //0代表原顺序1降序2升序persons:[{id:001,name:马冬梅,age:33,sex:女},{id:002,name:周冬雨,age:45,sex:女},{id:003,name:周杰伦,age:12,sex:男},{id:004,name:温兆伦,age:22,sex:男}], },computed:{filPersons(){const arr this.persons.filter((p){return p.name.indexOf(this.keyWord)!-1})//判断是否需要排序if(this.sortType){arr.sort((p1,p2){return this.sortType1?p2.age-p1.age:p1.age-p2.age})}return arr}}})
/script
/html
