互联网公司图片,网站相册优化,wordpress 登陆信息,营销策划与运营方案欢迎来到“雪碧聊技术”CSDN博客#xff01; 在这里#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者#xff0c;还是具有一定经验的开发者#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导#xff0c;我将… 欢迎来到“雪碧聊技术”CSDN博客 在这里您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者还是具有一定经验的开发者相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导我将不断探索Java的深邃世界分享最新的技术动态、实战经验以及项目心得。 让我们一同在Java的广阔天地中遨游携手提升技术能力共创美好未来感谢您的关注与支持期待在“雪碧聊技术”与您共同成长 目录
一、天气案例
1、案例介绍
2、编码
3、简写
注意如果简写的方法包含vue实例以外的方法那就需要声明一下
二、监视属性
1、监视属性是干嘛的
2、监视的两种写法
①创建vue实例时配置watch
举例
②vue实例已经存在通过vm.$watch配置
举例
3、什么属性可以被watch监视
举例
三、深度监视
1、案例如何检测多级的属性
具体编码
2、上述案例存在的问题当numbers下面有几百个属性并且当任意一个属性改变时视为numbers不变
举例
3、如何解决上述问题采用深度监视
举例
4、总结
四、监视属性简写
1、什么情况下能简写监视属性的代码
举例
2、如何简写监视属性的代码
①通过在vue实例中声明监视属性时
②通过vm.$watch声明监视属性时 一、天气案例
1、案例介绍 2、编码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title天气案例/title!-- 引入vue --script typetext/javascript src../js/vue.js/script
/head
body!-- 准备好一个容器 --div idrooth2今天天气很{{weather}}/h2button clickchangeWeather点击切换天气/button/divscript typetext/javascriptnew Vue({el:#root,data:{isHot: true},methods: {changeWeather(){this.isHot !this.isHot}},computed:{weather(){return this.isHot?炎热:凉爽}}})/script
/body
/html
运行效果 3、简写 注意如果简写的方法包含vue实例以外的方法那就需要声明一下 二、监视属性
1、监视属性是干嘛的
被监视的属性发生修改时会触发handler方法并且能够获取到修改前、后的属性。
2、监视的两种写法
①创建vue实例时配置watch
举例 运行结果 ②vue实例已经存在通过vm.$watch配置
举例 运行结果 3、什么属性可以被watch监视
普通属性data里的和计算属性computed里的都可以被watch作为监视属性。
举例 三、深度监视
1、案例如何检测多级的属性 具体编码 运行效果 2、上述案例存在的问题当numbers下面有几百个属性并且当任意一个属性改变时视为numbers不变
举例 运行效果 3、如何解决上述问题采用深度监视
举例 运行效果 4、总结
vue默认不开启深度监视是为了效率。
如果想开启深度监视那么就配置deeptrue即可。
举例 四、监视属性简写
1、什么情况下能简写监视属性的代码
不需要额外的配置时即监视属性的方法体中只有handler方法时才能简写。
举例 2、如何简写监视属性的代码
①通过在vue实例中声明监视属性时 运行效果 ②通过vm.$watch声明监视属性时 以上就是vue中的监视属性的全部内容想了解更多的vue知识请关注本博主~~
