VUE - 天天看点

ES6常用语法：

　　1.let

　　　　- 解决了变量提升

　　　　- 带来了块级作用域

2.const

　　　　-解决了变量提升

-定义之后不能修改,否则报错

-定义的时候必须赋值

3.箭头函数

　　　　　- arguments不能使用

- this的指向问题,指向箭头函数被定义时的作用域

Vue的声明周期:

　　1. beforecreated

2. created

3. beforeMount

4. mounted

5.beforeUpdate

6.updated

7.activated

8.deactivated

9.beforeDestory

10.destoryed

　　vue自带虚拟dom。先加载虚拟dom

　　activated & deactivated 来控制组件创建和销毁替代 destoryed & beforeDestory 降低开销组件需要用 <keep-alive><keep-alive/> 该钩子在服务器渲染时不用 , 会缓存数据不会频繁创建销毁

声明周期html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>

</head>
<body>

    <div id="app">
        {{ message }}
        <button @click="myClick">点击修改欢迎语</button>
    </div>

    <script>

        new Vue({
            el: "#app",
            data: {
                message: "Hello Vue",
            },
            methods: {
                myInit: function () {
                    console.log(this.message);
                },
                myClick: function () {
                    this.message = "Hello World";
                }
            },
            beforeCreate(){
                console.group('beforeCreate: ');
                console.log('el: ', this.$el);
                console.log('data: ', this.$data);
                console.log('myInit: ', this.myInit);
                console.log('message: ', this.message);
            },
            created(){
                console.group('created: ');
                console.log('el: ', this.$el);
                console.log('data: ', this.$data);
                console.log('myInit: ', this.myInit);
                console.log('message: ', this.message);
            },
            beforeMount(){
                console.group('beforeMount: ');
                console.log('el: ', this.$el);
                console.log('data: ', this.$data);
                console.log('myInit: ', this.myInit);
                console.log('message: ', this.message);
            },
            mounted(){
                console.group('mounted: ');
                console.log('el: ', this.$el);
                console.log('data: ', this.$data);
                console.log('myInit: ', this.myInit);
                console.log('message: ', this.message);
            },
            beforeUpdate(){
                console.group('beforeUpdate: ');
                console.log('el: ', this.$el);
                console.log('data: ', this.$data);
                console.log('myInit: ', this.myInit);
                console.log('message: ', this.message);
                console.log("beforeData: ", document.getElementById("app").innerHTML);
            },
            updated(){
                console.group('updated: ');
                console.log('el: ', this.$el);
                console.log('data: ', this.$data);
                console.log('myInit: ', this.myInit);
                console.log('message: ', this.message);
                console.log("updated: ", document.getElementById("app").innerHTML);
            }
        })
    </script>
</body>
</html>

1.vue的webpack支持热重载,更改完之后无需刷新页面