网站开发属于专利吗,帮助网站源码,263企业邮箱网络登录入口,ui界面设计总结心得一、计算属性
1. 使用插值语法和methods拼接姓名
如果样式要求不多的话这样写没问题#xff0c;如下代码是截取我输入的姓的前三个字母
div idroot姓#xff1a;input typetext v-moudelfirstName名#xff1a;…一、计算属性
1. 使用插值语法和methods拼接姓名
如果样式要求不多的话这样写没问题如下代码是截取我输入的姓的前三个字母
div idroot姓input typetext v-moudelfirstName名input typetext v-moudellastName姓名span{{firstName.slice(0,3)}}-{{lastName}}/span/divscript typetext/javascriptconst vmnew Vue({el:#root,data:{firstName:hb,lastName:bj}})
样式太多的话就都放进methods里面去
注意之前的showInfo是绑定事件加不加都行现在是调用那个函数必须得加
每次改动firstName后者lastName就会重新解析模版调用fullName
div idroot姓input typetext v-modelfirstName名input typetext v-modellastName姓名span{{fullName()}}/span/divscript typetext/javascriptconst vmnew Vue({el:#root,data:{firstName:hb,lastName:bj},methods:{fullName(){// this是vue实例里面就有firstName啥的return this.firstName-this.lastName}}})
2. 使用计算属性拼接姓名
定义要用的属性不存在要通过Vue中已有属性计算得来。
原理底层借助了Objcet.defineproperty方法提供的getter和setter
属性vue认为data里面写的就是属性属性属性值,属性在vm._data里
计算属性就是拿着你已经写完的属性去加工计算放在vm里不在data里
属性放在data里计算属性放在computed
div idroot姓input typetext v-modelfirstName名input typetext v-modellastName姓名span{{fullName}}/span
姓名span{{fullName}}/span
姓名span{{fullName}}/span/divscript typetext/javascriptconst vmnew Vue({el:#root,data:{firstName:hb,lastName:bj},computed:{fullName: {get(){//读取fullName的时候自动调用get// 并且vue给你设置computed里的this是vmconsole.log(get被调用喽)return this.firstName-this.lastName}}}})
如果这个时候我多次调用fullName的话输出get被调用喽只显示一次因为有缓存
get什么时候调用1初次读取fullName 时2所依赖的数据发生变化时所以不用担心姓或者名变化fullName没变
我用computed不是fullName对象.get函数而是我用fullName的时候立马就调用get函数返回一个值放在fullName计算出来的新属性身上在vm中可以查看
set什么时候调用fullName被修改的时候而且必须设置参数你把fullName改成什么就返回什么
set(value){const arrvalue.split(-)this.firstNamearr[0]this.lastNamearr[1]//fullName依赖first和last想真正的改掉就得把谁算出来的改掉}
优势与methods实现相比内部有缓存机制复用效率更高调试方便。
备注 1.计算属性最终会出现在vm上直接读取使用即可不用加括号和methods区别一下子。 2.如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变这很关键。
3. 计算属性的简写
计算属性一般不修改确定只读不改就可以用简写
姓名span{{fullName}}/span
computed:{fullName(){return this.firstName-this.lastName}}
fullName是一个属性不是一个方法只不过是调用里面的getter把返回值直接给了vm所以直接{{fullName}}不可以加
data的数据methods的方法computed的计算属性
二、监视属性
1. 天气切换案例
(1)利用插值语法和三元表达式
div idrooth2今天天气很{{isHot?炎热:凉爽}}/h2button切换天气/button/divscript typetext/javascriptconst vmnew Vue({el:#root,data:{isHot:true}})
(2)利用计算属性
div idrooth2今天天气很{{info}}/h2button clickchange切换天气/button/divscript typetext/javascriptconst vmnew Vue({el:#root,data:{isHot:true},computed:{info(){return this.isHot?炎热:凉爽// isHot不是computed里的找不到所以得this就是vue的}},methods:{change(){this.isHot!this.isHot;}}})
不需要methods也可以这样写
button clickisHot!isHot切换天气/button
xxxyyy绑定事件的时候可以写一些简单的语句
2. 监视属性
(1)watch
watch:{isHot:{immediate:true,//初始化时让handler调用//当isHot发生改变时它就调用handler(newValue,oldValue){console.log(isHot改了,newValue,oldValue)}}}
用handler的时候同时返回两个参数newValue和oldValue
(2)vm.$watch
const vmnew Vue({el:#root,data:{isHot:true},computed:{info(){return this.isHot?炎热:凉爽// isHot不是computed里的找不到所以得this就是vue的}},})vm.$watch(isHot,{immediate:true,//初始化时让handler调用//当isHot发生改变时它就调用handler(newValue,oldValue){console.log(isHot改了,newValue,oldValue)}})
第一个参数是对象名第二个参数是配置对象
区别很明确坚实谁就写第一种否则就写第二种
3. 深度监视
(1).Vue中的watch默认不监测对象内部值的改变一层如果监视那么对象地址不变就不变。 (2).配置deep:true可以监测对象内部值改变多层。 (3).Vue自身可以监测对象内部值的改变但Vue提供的watch默认不可以想要可以就要手动开启deep:true (4).使用watch时根据数据的具体结构决定是否采用深度监视。 div idrooth3a的值是:{{numbers.a}}/h3button clicknumbers.a点我实现a1/buttonh3b的值是:{{numbers.b}}/h3button clicknumbers.b点我实现b1/button/divscript typetext/javascriptnew Vue({el:#root,data:{isHot:true,numbers:{a:1,b:1}},watch:{//监视多级结构中某个属性的变化numbers:{//不加引号报错是因为本来就应该加引号写有的中间不带.的简写了没加// 如果想要给b也加的话一个一个写太麻烦了但是发现直接给number加// 改变a或者bnumber都不输出因为它没有深入的去看a或b的变化deep:true,//监视多级结构中所有属性的变化handler(){console.log(number改了)}}}})/script
4.监视的简写形式
用简写的前提是不需要immediate也不需要deep
(1)watch写法
watch:{isHot(newValue,oldValue){console.log(isHot被改了)}}
(2)$watch写法
vm.$watch(isHot,function(newValue,oldValue){console.log(isHot被改了)})
三、watch对比computed
1.watch
div idroot姓input typetext v-modelfirstName名: input typetext v-modellastName全名 span{{fullName}}/span/divscript typetext/javascriptnew Vue({el:#root,data:{firstName:张,lastName:三,fullName:张-三},watch:{firstName(newValue){this.fullNamenewValue-this.lastName},lastName(newValue){this.fullNamethis.firstName-newValue}}})
监视姓的同时还是监视名
2.computed
computed:{fullName: {get(){console.log(get被调用喽)return this.firstName-this.lastName}}}
加一下就完事了但是computed计算属性里面不能开启异步任务去维护数据的靠的就是返回值watch就可以开延迟什么的。 firstName(newValue){setTimeout((){this.fullNamenewValue-this.lastName},1000)
总结
1、computed能完成的功能watch都可以完成。 2、watch能完成的功能computed不一定能完成例如watch可以进行异步操作。
两个重要的小原则 1、所被Vue管理的函数最好写成普通函数这样this的指向才是vm 或 组件实例对象。 2、所有不被Vue所管理的函数定时器的回调函数、ajax的回调函数等、Promise的回调函数最好写成箭头函数这样this的指向才是vm 或 组件实例对象
