1.使用idea创建一个静态web的工程
![5f7ae05f76b8fc247384669250395921.png](https://i-blog.csdnimg.cn/blog_migrate/2bbb3f21920b8cf586c0080fe7e38cb0.jpeg)
2.执行命令,初始化项目
![240457eaaf73869289000eeb42cdcedd.png](https://i-blog.csdnimg.cn/blog_migrate/793ef235fd47bc49c986689bd0071413.jpeg)
3.安装Vue环境
![c0e83505ee874a2f8a9ec3eba82d75dd.png](https://i-blog.csdnimg.cn/blog_migrate/183a49cdf160a81c1225feafd5b469ee.jpeg)
4.computed使用
Title
日期①: {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
日期②: {{birth}}
4.watch基本使用和深度监控
Title
+
名称:{{person.name}} 年龄:{{person.age}}
5.method使用
这个就不举例子了,如果连这个都不会,赶紧去看一下Vue基础知识
6.说一说computed,watch和method
computed
1.是计算值,属性调用
2.computed定义的方法我们是以属性访问的形式调用的,{{computedTest}}
3.具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数
4.防止文本插值中逻辑过重,导致不易维护
watch
1.是观察的动作,
2.监听props,$emit或本组件的值执行异步操作
3.无缓存性,页面重新渲染时值不变化也会执行
method
- methods是函数调用,必须要加上()来调用,如{{methodTest()}}
- methods无缓存功能
7.总结:
1、有时候,computed和watch可以实现相同的功能;
2、当需要在数据变化时执行异步或开销较大的操作时,使用watch会更好一些。因为computed会立即返回,此时异步操作可能还没有完成;
3、使用immediate:true,会在初始化watch时就立即执行handler回调函数,而不用等下一次数据更新。
4、使用deep:true,才会递归监听对象的属性(如果监听的是对象或数组)