vue 计算属性
<div id="app">
{{gettime}} /和computed对应/
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
time:55555
},
/* 计算属性 */
/* 计算属性具有缓存的功能 */
computed:{
/* this指的就是vue实例化对象 */
gettime:function(){
let a =new Date(this.time)
console.log(a);
/* 一定要return */
return a.getFullYear()+'-'+(a.getMonth()+1)+'-'+a.getDate()
}
},
methods: {
},
})
</script>
监听属性
只要data中的值被改变了就会触发
Watch可以有两个传参，第一个形参是被改变后的参数，第二个是原来的参数
new Vue({
el:'#app',
data:{
price:100,
hh:''
},
watch:{
price:function(newPrice,oldPrice){
this.hh='比原价贵了'+ (newPrice-100)
}
},
methods: {
change(){
this.price+=10
}
},
})
引用数据类型改用对象的方式加deep:true深度监听
handler方法名是固定的不可以被篡改
immediate :true会立即执行监听器里面的handler方法
obj:{
deep:true,
handler:function(a,b){
console.log('值被改变了');
},
immediate:true
}
Vue 八大生命周期钩子函数
/* vue实例化对象创建之前 */
beforeCreate() {
},
/* Vue实例化对象创建之后 */
created() {
},
/* Vue的dom挂载之前 */
beforeMount() {
},
/* Vue的dom挂载之后 */
mounted() {
},
/* Vue的data值更新前 */
beforeUpdate() {
},
/* Vue的data值更新后 */
updated() {
},
/* Vue的组件销毁前 */
beforeDestroy() {
},
/* Vue的组件销毁后 */
destroyed() {
},
