Vue-应用2

//计算属性:本质上是一个函数实现某种功能或者得到某个结果；使用的时候当作数据属性一样来用

{{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()');
            }
        });