<div id="demo">

姓: <input type="text" placeholder="First Name" v-model="firstName">

名: <input type="text" placeholder="Last Name" v-model="lastName">

<!--fullName1是根据fistName和lastName计算产生-->

姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1">

姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2">

姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3">

</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">

  const vm = new Vue({

    el: '#demo',

    data: {

      firstName: 'A',

      lastName: 'B',

       fullName2: 'A-B'

    },

    // 计算属性配置: 值为对象

    computed: {//什么时候执行?当fullName1被改变或者与其相关的属性被改变都会执行

      fullName1 () { // 属性的get()

        console.log('fullName1()', this)

        return this.firstName + '-' + this.lastName //this 这里代表着vm实例

      },

      fullName3: {

        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值

        get () {

          console.log('fullName3 get()')

          return this.firstName + '-' + this.lastName

        },

        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值

        set (value) {// fullName3的最新value值  A-B23

          console.log('fullName3 set()', value)

          // 更新firstName和lastName

          const names = value.split('-')

          this.firstName = names[0]

          this.lastName = names[1]

        }

      }

    },

    watch: {

      // 配置监视firstName

      firstName: function (value) { // 相当于属性的set

        console.log('watch firstName', value)

        // 更新fullName2

        this.fullName2 = value + '-' + this.lastName

      }

    }

  })

  // 监视lastName

  vm.$watch('lastName', function (value) {

    console.log('$watch lastName', value)

    // 更新fullName2

    this.fullName2 = this.firstName + '-' + value

  })