做网站买主机还是服务器,网页设计师是什么意思,一个简单企业网的设计与实现,公司使用威联通nas做网站存储文章目录 前文提要天气案例描述样例代码呈现效果#xff1a;事件的响应中可以写一些简单的语句#xff08;不推荐#xff09; 侦听#xff08;监视#xff09;属性watch结合天气案例的第一种写法#xff08;New Vue#xff09;immediate#xff1a; 侦听#xff08;监… 文章目录 前文提要天气案例描述样例代码呈现效果事件的响应中可以写一些简单的语句不推荐 侦听监视属性watch结合天气案例的第一种写法New Vueimmediate 侦听监视属性watch的另一写法vm.$watch写法选择的总结深度监视复杂结构deep配置监测多级结构中单个属性的变化为什么不在监视属性那边直接写numbersdeep应用 注意事项 前文提要
本人仅做个人学习记录如有错误请多包涵
主要学习链接尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 天气案例描述
在h2标签中显示天气点击按钮可以切换天气的显示
样例代码
bodydiv idboxh2今天天气很{{info}}/h2button clickchangeWeather切换天气/button/divscript typetext/javascriptVue.config.productionTip false//阻止vue在启动时生成生产提示const vm new Vue({el: #box,data: {isHot: true},computed: {info() {return this.isHot ? 炎热 : 凉爽//切换天气}},methods:{changeWeather(){return this.isHot!isHot//取反}},})/script
/body呈现效果 点击按钮后可以实现切换天气
事件的响应中可以写一些简单的语句不推荐
只能写很简单的语句所以不能写if、for这样的语句。 因为这样写所以可以不写methods函数直接写在chick后面的冒号中但是不建议这样写。 因为如果这样写了代码就写死了但是可以这么写。 样例代码删除method中的函数修改button绑定事件后面的语句改成这样
button clickisHot!isHot切换天气/button示例代码
bodydiv idboxh2今天天气很{{info}}/h2button clickisHot!isHot切换天气/button/divscript typetext/javascriptVue.config.productionTip false//阻止vue在启动时生成生产提示const vm new Vue({el: #box,data: {isHot: true},computed: {info() {return this.isHot ? 炎热 : 凉爽//切换天气}},/script
/body经过简单的修改代码仍然可以起到最开始描述的效果
侦听监视属性watch
可以监视data中的属性变化computed中的计算属性也可以监视。 监视属性watch 1、监视属性变化的时候handler属性会自动调用 2、被监视的属性必须存在才能进行监视 3、监视的两种写法 1写在new Vue中 2通过vm.$watch监视
结合天气案例的第一种写法New Vue
immediate是watch中监视属性中的一种配置默认不执行也就是默认false。 打开的时候初始化时会调用handler函数需要初始化赋值的时候可以用
样例代码
bodydiv idboxh2今天天气很{{info}}/h2button clickchangeWeather切换天气/button/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {isHot: true},computed: {info() {return this.isHot ? 炎热 : 凉爽//切换天气}},methods: {changeWeather() {return this.isHot !this.isHot//取反}},watch: {isHot: {immediate: true,//不写就默认为false当其为true的时候初始化时调用handler需要初始化赋值的时候可以用handler(newValue, oldValue) {console.log(isHot被修改了, newValue, oldValue)}}}})/script
/body效果图片未点击按钮
immediate
当immediate设置为true的时候Vue初始化的时候会调用一次handler函数新的值就是初始化的值旧的数值是undefined handler函数有两个参数新数值、旧数值如果写两个参数那么第一个就是新数值第二个是旧数值如果只写了一个参数仅存的那个还是新数值这是按照顺序的。
点击按钮 每次点击按钮修改isHot的时候会自动触发监视属性中的handler函数从而提示数值变化。
侦听监视属性watch的另一写法vm.$watch
bodydiv idboxh2今天天气很{{info}}/h2button clickchangeWeather切换天气/button/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {isHot: true},computed: {info() {return this.isHot ? 炎热 : 凉爽//切换天气}},methods: {changeWeather() {return this.isHot !this.isHot//取反}},})vm.$watch(isHot, {immediate: true,//不写就默认为false当其为true的时候初始化时调用handler需要初始化赋值的时候可以用handler(newValue, oldValue) {console.log(isHot被修改了, newValue, oldValue)}})/script
/body$watch的第一个参数是绑定的属性watch中之所以不用加引号是因为使用了对象的简写形式它的完整形式也是’isHot’ 如果第一个参数不带引号则会去访问isHot这个属性然后提示isHot is not defined。
写法选择的总结
如果在编写Vue代码的时候就需要监视、知道监视谁就可以写前一种如果需要根据用户行为来进行判断就选择后一种写法。
深度监视复杂结构deep配置
当watch中监视的属性结构比较复杂的时候例如多级结构watch就需要深度监视监视属性中就要添加deep配置。
例如当属性变成这样的时候变成了对象
numbers:{a:1,b:1
}我只想监视number中a的变化不监视b的变化 示例代码
bodydiv idboxh2a{{numbers.a}}/h2button clicknumbers.a点一下a1/button/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {numbers:{a:1,b:1}},computed: {info() {return this.isHot ? 炎热 : 凉爽//切换天气}},methods: {changeWeather() {return this.isHot !this.isHot//取反}},watch: {a: {handler() {console.log(a被改变了)}}}})/script
/body呈现效果 无论如何点击按钮都无法让handler函数执行触发控制台输出说明这样写存在问题。 不过这要把代码修改一下变成这样就行了其他代码不变
监测多级结构中单个属性的变化
numbers.a: {handler() {console.log(a被改变了)}
}这样子就可以实现检测多层结构属性中单个属性的变化但是如果属性很多很多我们是没有办法写完的。
那么如何检测整个numbers属性呢
为什么不在监视属性那边直接写numbers
如果将代码写成这样无论numbers中的a变化还是b变化了都无法监视到
numbers: {handler() {console.log(numbers被改变了)}
}但是有一种方法可以触发这个handler函数那就是在控制台这么写 numbers是一个指向对象的指针无论对象中的数据怎么变化也就是a、b如何变化它指向的地址没有变化那么就不会触发handler。
这个情况和const有异曲同工之妙当const指向对象的时候它也不管里面对象的情况 参考链接面试官说说var、let、const之间的区别。
deep应用
代码修改其余不变
watch: {numbers: {deep:true,handler() {console.log(numbers被改变了)}}}当你在监视属性总添加了deep并且把它设置为true的时候就可以检测多级属性中单个属性的变化无论是哪个属性变化了通过监测numbers都能知道。
注意事项
无论是methods,computedgettersetterwatch中的handler,都是vue管理的函数这些函数都不能写成箭头函数。
如果写成了箭头函数因为箭头函数没有自己的this那么你在这些函数里面使用this的时候就会向外层寻找this就不会找到Vue实例。
但是如果你在这些函数里面调用了别的函数这些函数是可以通过写成箭头函数消除自己的this从而向外寻找this进而使这些不由Vue管理的函数能够通过this锁定Vue实例。 例如监视属性中的属性可以通过设置延迟晚些修改属性而computer中就不行了。
参考链接computed和watch的对比 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
