vue注意项

1.通过官方vue生命周期图，总结其中的几个钩子函数

var vm = new Vue({
        el: '#app',
        data: {

        },
        beforeCreate() {
            alert('组件刚刚被创建，但是没有赋予任何属性，和方法');
        },
        created() {
            alert('我是在创建对象之后调用');
        },
        // beforeCompile和compiled这两个生命钩子函数在2.0之后被created函数代替
        /* beforeCompile() {
             alert('我是在编译之前调用的');
         },
         compiled() {
             alert('我是在编译之后调用的');
         },*/
        beforeMount() {
            alert('我是挂载之前');
        },
        // ready()函数被替换成了mounted
        mounted() {
            this.$nextTick(function () {
                alert('节点完全插入到了dom元素中');
            })
        },
        beforeDestroy() {
            alert('对象销毁之前调用');
        },
　　　　　beforeUpdate(){
　　　　　　alert('组件更新之前')
　　　　 },
　　　　　updated(){
　　　　　　alert('组件更新完毕');
　　　　 },
        destroyed() {
            alert('对象销毁');
        }
    })

　　

2.计算属性

计算属性根据字面意思就是一种属性，而写法看起来却像是一个函数，这个会给人一种误导，所以这一点需要注意，这个属性只是根据返回结果来的。注意计算属性一定要有return

计算属性对象中，有两个函数get(),set(),一般默认的直接返回是调用了其中的get()函数

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            beforeAge: 10
        },
        computed: {
            /*age:function() {
                return this.beforeAge+1
            }*/
            //ES6写法
            /*age(){
                return this.beforeAge+1;
            }*/
            age: {
                get() {
                    return this.beforeAge + 1;
                },
                set() {
                    // 这样是改变不了自己的，因为在get()中返回值是依赖于beforeAge属性的
                    return 20;
                }
            }
        }
    })

</script>

　　

3.在moutend生命钩子加载之前，可能由于网络原因，页面渲染的时候，会出现花括号，这种给人的体验就是非常糟糕的，vue中提供了一种解决这个的方法，就是在挂载点中加一个属性v-cloak

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <p>{{beforeAge}}</p>
        <p>{{age}}</p>
    </div>
</body>
....

3.vue简单实例方法

<script>
    var vm = new Vue({
        // el: '#app',
        data: {
            age: 10
        },
        say(){
            alert('我是自定义方法');
        }
    })
    vm.$mount('#app');  //这个是手动将vue实例化后的对象挂载到dom中
    console.log(vm.$el)  //这个是获取挂载点元素
    console.log(vm.$data)   //这个是获取整个对象中的数据
    vm.$options.say();  //这个是调用vue中自定义方法，而不是methods中的方法，也可以调用自定义属性

</script>

　　

 4.在旧的版本中，v-for循环如果不加:key时，重复数据不让添加，但在目前最新版本中，已经解决这个问题，可以直接使用v-for

posted @ 2017-05-13 14:13  Sentiger  阅读(191)  评论(0)    收藏  举报