//计算属性:本质上是一个函数 实现某种功能或者得到某个结果；使用的时候当作数据属性一样来用
<!--
更改数据后：计算、函数均会执行
-->
{{reverseStr}} {{reverseStr1()}} {{reverseStr}} {{reverseStr1()}}
<input type="text" v-model='firstName' id="">
<input type="text" v-model='lastName' id="">{{result}}
<input type="text" v-model.lazy='userName' id="">{{result}}
<div>{{comKey}}</div>
==============================================================
数据部分：
data() {
return {
msg: 'hello',
firstName: '',
lastName: '',
result: '',
userName: '',
obj: {
a: 10,
b: 20
}
}
},
// 方法区域
methods: {
reverseStr1: function() {
console.log('methods');
return this.msg.split('').reverse().join('').toString();
},
//检测用户名合法性
checkName: function(userName) {
setTimeout(() => {
if (userName === 'admin') {
this.result = 'right';
} else {
this.result = 'wrong';
}
}, 2000);
},
//计算属性:本质上是一个函数 实现某种功能或者得到某个结果；使用的时候当作数据属性一样来用
},
//计算区域
computed: {
reverseStr: function() {
console.log('computed');
return this.msg.split('').reverse().join('').toString();
},
comKey: function() {
return this.obj.a;
}
},
//侦听区域
watch: {
//侦听数据变化
firstName: function(newStr, oldStr) {
// console.log(newStr, oldStr);
this.result = this.firstName + "-" + this.lastName;
this.msg = this.firstName + "-" + this.lastName;
},
lastName: function(newStr, oldStr) {
this.result = this.firstName + "-" + this.lastName;
this.msg = this.firstName + "-" + this.lastName;
},
//第一个参数即对应最新的值：区别两个参数API的使用
userName: function(val) {
this.checkName(val);
this.result = 'checking...';
},
//浅响应
// obj: function() {
// console.log(this.obj.a);
// }
//深响应
obj: {
handler: function() {
console.log(this.obj.a);
},
deep: true,
}
}
过滤器部分
{{info | upper | lower}} {{num | getSum(20,'求和','秋茶')}}
=================================
//全局过滤器
Vue.filter('upper', function(val) {
return val.toUpperCase();
});
Vue.filter('lower', function(val) {
return val.toLowerCase();
});
===========================
let vm = new Vue({
el: "#app",
data() {
return {
info: 'china',
num: 5
}
},
//过滤器局部
filters: {
upper(val) {
return val.toUpperCase();
},
lower(val) {
return val.toLowerCase();
},
getSum(num, str, str1) {
console.log(str, str1);
let sum = 0;
for (let index = 0; index <= num; index++) {
sum += index;
}
return sum;
}
}
});
【3】生命周期钩子：用于组件、响应事件等
<div id="app">
{{info}}
</div>
====================
let vm = new Vue({
//方法1
el: "#app",
template: '<h1>hello</h1>',
data() {
return {
info: 'china',
}
},
beforeCreate() {
console.log('beforeCreated()');
},
created() {
console.log('created()');
console.log(this);
console.log(this.info);
},
beforeMount() {
console.log('beforeMount()');
console.log(this.$el);
},
mounted() {
console.log('mounted()');
console.log(this.$el);
},
beforeUpdate() {
console.log('beforeUpdate()');
console.log(this.info);
},
updated() {
console.log('update()');
console.log(this.info);
},
beforeDestroy() {
console.log('beforeDestroy()');
},
destroyed() {
console.log('destroy()');
}
});