<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<!-- watch/computed比较 -->
<div>
<input v-model="firstName" type="text">
<input v-model="lastName" type="text">
<input v-model="fullName" type="text">
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
firstName:'AAA',
lastName:'BBB',
//computed的话不能在date里定义
fullName:'AAA BBB'
}
},
//computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，
// 然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；computed比较适合对多个变量或者对象进行处理后返回一个结果值，
// 也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，
// 只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
// 与watch之间的区别：
// watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
watch:{
firstName(val){
this.fullName = val + ' ' + this.lastName;
},
lastName(val){
this.fullName = this.firstName + ' ' + val;
},
// 对firstName或者lastName属性的监听会在他们第一次变化后开始进行监听，如果我们想在创建时监听他们，要使用 handler 和 immediate对他们监听
//immediate设为true 监听方法会在创建的时候 执行handler里的方法
// firstName:{
// handler:function(val){
// this.fullName = val + ' ' + this.lastName;
// },
// immediate: true
// },
// lastName:{
// handler:function(val){
// this.fullName = this.firstName + ' ' + val;
// },
// immediate: true
// },
},
// computed:{
// fullName(){
// return this.firstName + ' ' + this.lastName;
// }
// }
}
</script>