<script src="../libs/vue.js"></script>
<div id="app">
? ? {{fullName}}
? ? <br>
? ? {{lists}}
</div>
<script>
? ? var vue = new Vue({
? ? ? ? el: "#app",
? ? ? ? data: {
? ? ? ? ? ? firstName: 'Foo',
? ? ? ? ? ? lastName: 'Bar',
? ? ? ? ? ? fullName: 'FooBar',
? ? ? ? ? ? lists: [1, 2, 3]
? ? ? ? },
? ? ? ? watch: {
? ? ? ? ? ? /**
? ? ? ? ? ? * 第一個參數val 改變后的值
? ? ? ? ? ? * 第二個參數oldVal 改變前的值
? ? ? ? ? ? */
? ? ? ? ? ? firstName(val, oldVal) {
? ? ? ? ? ? ? ? console.log('val', val)
? ? ? ? ? ? ? ? console.log('oldVal', oldVal)
? ? ? ? ? ? ? ? this.fullName = val + this.lastName
? ? ? ? ? ? },
? ? ? ? ? ? lastName(val) {
? ? ? ? ? ? ? ? this.fullName = this.firstName + val
? ? ? ? ? ? },
? ? ? ? ? ? //數組或對象偵聽數據變化的方式
? ? ? ? ? ? lists: {
? ? ? ? ? ? ? ? handler(val) {
? ? ? ? ? ? ? ? ? ? console.log('val', val)
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? deep: true
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
