• Vue.js: Up and Running，中文版是Vue.js快跑：构建触手可及的高性能Web应用
• Vue.js 2 Web Development Projects，中文版是Vue.js项目实战

• 1 v-if与v-show
• 2 向Vue实例添加反应式属性
• 3 重新审视Vue实例的内容
• 4 Vue操作数组
• 5 双向绑定的补充
• 6 computed属性的set
• 7 watch监听对象属性和获取新旧值
• 7.1 监听对象的属性
• 7.2 监听时获取变化前后的值
• 7.3 深度监听
• 8 filter补遗
• 9 ref引用
• 10 处理事件
• 11 过渡与动画

v-if与v-show

<div id="app">
    <div v-show="user">
        <p>User name: {{ user.name }}</p>
    </div>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        user: undefined
    }
});
</script>

向Vue实例添加反应式属性

1. 给要添加的属性提前赋值为undefined，然后再赋值，当然这种其实不叫做添加了，因为已经让Vue初始化了
2. 使用Object.assign()，创建一个新对象覆盖原来data的对象。一会看下边例子。
3. 使用Vue.set(object,name, value)，其中object是data中的对象，name是属性名，value设置的属性的值。在组件里想要使用这个方法，则可以通过this.$set来使用这个方法。

<div id="app" class="container">
    <template v-if="formData.user">
        <div>这是新添加的user属性： {{formData.user}}</div>
    </template>
        <div>这是原来的属性： {{formData.username}}</div>
</div>

<script>
    var app= new Vue({
        el: '#app',
        data: {
            formData: {
                username: 'jenny',
            }
        },

    });
</script>

<div id="app" class="container">
    <template v-if="formData.user">
        <div>这是新添加的user属性： {{formData.user}}</div>
    </template>
        <div>这是原来的属性： {{formData.username}}</div>
    <button @click="addProperty">添加user=cony属性</button>
</div>

<script>
    var app= new Vue({
        el: '#app',
        data: {
            formData: {
                username: 'jenny',
            }
        },
        methods:{
            addProperty:function () {
                this.$set(this.formData,'user','cony')
            }
        }

    });
</script>

重新审视Vue实例的内容

1. 在模板渲染的双花括号里，不要使用this，Vue直接会去找data，computed和methods对应的名称
2. 在methods里访问属性和方法，需要加上this，这个this表示方法所属的Vue实例对象，可以用其调用其他属性和方法（以及computed属性）。
3. 在computed里访问属性和方法，也需要加上this
4. 在watch里访问属性和方法，也需要加上this
5. 在filter中无法通过this访问Vue实例的内容

Vue操作数组

<div id="app" class="container" v-cloak="">
    <p>{{games}}</p>
</div>

<script>
    var app= new Vue({
        el: '#app',
        data: {
            games: ['Baldur\'s gate 3','Baldur\'s gate 2','Neverwinter Nights','TotalWar: ThreeKingdoms', 'Planescape: Torment']
        },
        methods:{
        }
    });
</script>

1. Vue内置了对于.splice等数组常用内部方法的监听，所以可以用这些方法来更改。
2. 用上边提到的Vue.set直接更新整个数组

双向绑定的补充

computed属性的set

<div id="app">
    <p>{{numbers}}</p>
    <p>Sum of numbers: {{ numberTotal }}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            numbers: [5, 8, 3]
        },
        computed: {
            numberTotal: {
                get() {
                    return this.numbers.reduce((sum, val) => sum + val);
                },
                set(newValue) {
                    const oldValue = this.numberTotal;
                    const difference = newValue - oldValue;
                    this.numbers.push(difference)
                }
            }
        }
    });
</script>

watch监听对象属性和获取新旧值

监听对象的属性

<div id="app">
    <input type="text" v-model="inputValue">
    <p>Five seconds ago, the input said "{{ oldInputValue }}".</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            inputValue: '',
            oldInputValue: ''
        },
        watch: {
            inputValue() {
                const newValue = this.inputValue;
                setTimeout(() => {
                    this.oldInputValue = newValue;
                }, 5000);
            }
        }
    });
</script>

<div id="app">
    <p>outer对象的value是{{outer.value}}</p>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            outer: {
                value: 1,
            }
        },
        watch: {
            'outer.value'() {
                console.log('outer.value watcher 被触发了')
            },
            outer() {
                console.log('outer watcher整个对象被替换了')
            }
        }
    });
</script>

监听时获取变化前后的值

<div id="app">
    <p>outer对象的value是{{outer.value}}</p>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            outer: {
                value: 1,
            }
        },
        watch: {
            'outer.value'(newval, oldval) {
                console.log('outer.value watcher 被触发了');
                console.log('新的值是：' + newval);
                console.log('老的值是：' + oldval);
            },
            outer() {
                console.log('outer watcher整个对象被替换了')
            }
        }
    });
</script>

深度监听

<div id="app">
    <p>outer对象的value是{{outer.value}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            outer: {
                value: 1,
                inner:{
                    value:2
                }
            }
        },
        watch: {
            outer: {
                handler(newval, oldval) {
                    console.log(newval, oldval);
                },
                deep: true
            }
        }
    });
</script>

过滤器filter补遗

1. 在Vue实例的filters属性之内编写
2. Vue.filter(filtername,function)来注册

ref引用

处理事件

修饰符

1. prevent，阻止默认事件，常用于a标签，submit类型的按钮之类
2. stop，阻止冒泡，很常用
3. once，只有第一次才生效
4. capture，这是一个新了解的，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理。像反向冒泡。
5. self，event.target是当前元素，即事件不是从内部冒泡上来的。

详细的生命周期

1. new Vue()执行，新实例初始化
2. beforeCreate调用，反应式功能初始化
3. created调用，模板被初始化，会根据组件的template和render函数等初始化模板，模板还未加载到DOM上
4. beforeMount调用，根据模板生成了HTML元素，依然没有挂载到DOM上
5. mounted在生成好HTML元素之后调用，Vue 2.0中不能保证这个钩子调用之后Vue实例立刻被挂载到DOM上，必须在mounted中调用Vue.nextTick()（组件中使用this.$nextTick()）才能确保，这个还有一个回调函数可以执行自己的代码。详细看下边例子。此钩子执行完毕之后，用户可以看到DOM元素，但数据还没更新上去。
6. beforeUpdate在数据还没有更新到DOM上之前调用，去计算新数据和准备更新
7. updated在用数据更新DOM完成之后调用，这个钩子会反复调用，如果有多个地方需要更新数据
8. beforeDestroy调用，在需要从DOM中去除组件的时候调用
9. destroyed调用，从DOM中去除组件之后调用

Vue.nextTick()的例子是：

<script>
new Vue({
    el: '#app',
    mounted() {
// Element might not have been added to the DOM yet
        this.$nextTick(() => {
// Element has definitely been added to the DOM now
        });
    }
});
</script>

过渡与动画

CSS过渡效果

<div id="app">
    <button @click="divVisible = !divVisible">Toggle visibility</button>
    <div v-if="divVisible">This content is sometimes hidden</div>
</div>


<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            divVisible: true
        }
    });
</script>

<transition name="fade">
    <div v-if="divVisible">This content is sometimes hidden</div>
</transition>

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

1. {name}-enter，元素添加进DOM的时候会被加上这个类，在1帧之后就会取消这个类。用来设置元素进入DOM之后初始并且想要逐渐消失的样式，例子里设置了完全透明，在元素进入的时候，一开始就是完全透明的。
2. {name}-enter-active，这个样式在整个加入过程中都生效，和{name}-enter同时添加到元素上，在动画完成后移除。这个类里最好设置CSS的transition属性，包括动画时间，属性和过渡曲线。
3. {name}-enter-to在{name}-enter被移除的时候添加到元素上，一般用于设置逐渐出现在元素上的样式。
4. {name}-leave，在触发要移除DOM的第一帧添加上，然后下一帧就会移除
5. {name}-leave-active，在移除的全过程生效。
6. {name}-leave-to，很像enter-to，当{name}-leave被移除的时候添加到元素上。

JS过渡效果

1. before-enter，在进入动画开始之前执行，用于设置初始样式
2. enter，进入动画开始的时候执行，可以在其中使用done回调来指示动画结束
3. afterEnter，进入动画结束的时候调用
4. enterCancelled，进入动画被取消的时候调用
5. beforeLeave，移出动画开始之前调用，用于设置移出的初始样式
6. leave，移出动画开始的时候执行
7. afterLeave，和上边的阶段类似
8. leaveCancelled和上边的阶段类似

<div id="app">
    <button @click="divVisible = !divVisible">Toggle visibility</button>
    <transition
            v-on:before-enter="handleBeforeEnter"
            v-on:enter="handleEnter"
            v-on:leave="handleLeave">
    <div v-if="divVisible">The content</div>
</transition>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            divVisible: false
        },
        methods: {
            handleBeforeEnter(el) {
                el.style.opacity = 0;
            },
            handleEnter(el, done) {
                TweenLite.to(el, 1, { opacity: 1, onComplete: done });
            },
            handleLeave(el, done) {
                TweenLite.to(el, 1, { opacity: 0, onComplete: done });
            }
        }
    });
</script>