首页 > 代码库 > vue基础学习(三)

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>

 

vue基础学习(三)