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支援熱重載,更改完之後無需重新整理頁面