vue基础学习（三）

03-01  vue的生存周期-钩子函数

　　　　　<style>
            [v-cloak]{display:none;}
        </style>
        <div id="box" v-cloak>
            {{msg}}
            <p v-text="msg"></p>
        </div>
        <script>
            //解决模板{{XX}}闪烁问题：
            //   css:    [v-cloak]{display:none;}     在模板中加v-cloak属性
                //或：v-text = 'msg'  v-html = 'msg'  也能防止闪烁


            //vue生存周期：

            //    钩子函数：
            //    created：        ——>  实例以创建
            //    beforeCompile：  ——>  编译之前
            //    compiled:        ——>  编译之后
            //    ready:           ——>  插入到文档中

            //    beforeDestroy:       ——>  销毁之前
            //    destroyed:           ——>  销毁之后

            window.onload = function () {
                var vm = new Vue({
                    el: '#box',
                    data: {
                        msg:'well'
                    },
                    created: function(){
                        alert('实例已创建')
                    },
                    beforeCompile: function () {
                        alert('编译之前')
                    },
                    compiled: function () {
                        alert('编译之后')
                    },
                    ready: function () {
                        alert('插入到文档')
                    },

                    //销毁之前和销毁之后只有在$destroy执行的时候才有
                    beforeDestroy: function () {
                        alert('销毁之前')
                    },
                    destroyed: function () {
                        alert('销毁之后')
                    }
                })

                //点击页面销毁Vue对象
                document.onclick = function () {
                    alert('123');
                    vm.$destroy();
                }
            }
        </script>

03-02  vue的计算属性一

　　　　　<div id="box" v-cloak>
            a==>{{a}}
            <br />
            b==>{{b}}
        </div>
        <script>
            window.onload = function () {
                var vm = new Vue({
                    el: '#box',
                    data: {
                        a: 1
                    },
                    computed: {     //里面其实是属性，是函数的写法，但不是函数.可以写一些业务代码，return不能少
                        b: function () {
                            //return 2;
                            return this.a + 2;
                        }
                    }
                });

                document.onclick = function () {
                    vm.a = 101;
                }
            }
        </script>

03-03  vue的计算属性二

　　　　　<div id="box">
            a==>{{a}}
            <br />
            b==>{{b}}
        </div>
        <script>
            //computed 与 data里面的属性区别：
            //computed里面可以放一些业务逻辑代码，切记要return
            window.onload = function () {
                var vm = new Vue({
                    el: '#box',
                    data: {
                        a: 1
                    },
                    computed: {     //里面其实是属性，是函数的写法，但不是函数.可以写一些业务代码，return不能少
                        //b: function () {  //简写.默认调用的是get
                        //    //return 2;
                        //    return this.a + 2;
                        //}
                        b: {
                            get: function () {
                                return this.a + 6;
                            },
                            set: function (val) {   
                                this.a = val;
                            }
                        }
                    }
                });
                document.onclick = function () {
                    //vm.a = 101;
                    vm.b = 1000;
                }
            }
        </script>

03-04  vue的简单方法

　　　　 <div id="box">
            {{a}}
        </div>

        <script>
            //vm.$mount('#box');   //手动挂载vue程序  等价于：el: '#box'
            //vm.$el      //就是元素
            //vm.$data          //就是vue的data
            //vm.$options.aa();  调用自定义属性或函数
            //vm.$destroy       //销毁


            window.onload = function () {
                var vm = new Vue({
                    //el: '#box',
                    aa: function () {      //自定义属性
                        alert(111)
                    }, 
                    data: {
                        a: 1
                    }
                });

                vm.$mount('#box');      //手动挂载vue程序
                //console.log(vm.$el);
                vm.$el.style.background = 'red';
                alert(vm.$data.a);
                vm.$options.aa();      //vm.$options.aa()  调用自定义属性
                vm.$log()     //查看现在数据状态  
            }
        </script>

03-04  vue的循环索引：track_by="$index"

<div id="box">
            <ul>
                <li v-for="val in arr" track-by="$index">{{val}}</li>
            </ul>
            <input type="button" value="添加" @click="add()"/>
        </div>

        <script>
            //track-by="$index"     在有重复数据的，按索引循环

            window.onload = function () {
                var vm = new Vue({
                    data: {
                        arr:['apple','pear','orange']
                    },
                    methods: {
                        add: function () {
                            this.arr.push('tomato');
                        }
                    }
                }).$mount('#box');
            }
        </script>