vue_01 vue的使用

說實在，看文檔是很累的，看一次忘一次更累，最好就是記下來，直接看到自己想要的那就方便很多！
新手推薦直接應用vue地址，<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
傳統的插值需要綁定元素再賦值，而vue框架是通過改變數據，響應式地改變dom(文档对象模型)

（一）文本插值

    <!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>
          <!-- 开发环境版本，包含了有帮助的命令行警告 -->
          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">{{message}}</div>            (数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值)
    </body>
    <script>
    var app = new Vue({                  （数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值）
                  el: '#app',            （id綁定div，每個實例只能對應一個div）
                  data: {                （存儲全局變量）
                    message: 'Hello Vue!'
                  }
              })
    </script>
    </html>

如下圖

index4.png

（二）生命週期

可能一開始接觸很難明白什麼是生命週期，其實就是一個頁面從加載到運行到關閉的一個週期。
賦上生命週期圖：

index5.png

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">{{message}}</div>
    <script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods:{
            //所有的方法都是寫在這裏
        },
        beforeCreate(){
            console.log('beforeCreate——創建前')
            // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
        },
        created(){
            console.log('created——創建後')
            this.message = '777'
            //  在 created 中，data 和 methods 都已经被初始化好了！
            // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
            //message的值已經從原來的（Hello Vue!）變成了（777）
        },
        beforeMount(){
            console.log('beforeMount——掛載前')
            // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
        },
        mounted(){
            console.log('mounted——掛載後')
            // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了
            //，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
        },
        beforeUpdate(){
            console.log('beforeUpdate——跟新前')
            // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，
            //此时 data 数据是最新的，页面尚未和 最新的数据保持同步
        },
        updated(){
            console.log('updated——跟新後')
             // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
        },
        beforeDestory(){
            console.log('beforeDestory——銷燬前')
            // 處於銷燬狀態，但是實例還能用
        },
        destroyed(){
            console.log('destroyed——銷燬後')
            //銷燬實例的所有數據、方法、過濾器、指令，但是dom不能銷燬
            //跳轉頁面前得銷燬自行運行的方法：比如定時器
        }


    })
    app.message = '666';
    //在實例外通過控制app改變內部數據
    
    </script>
</body>

</html>

下面的代碼會覆蓋上面的代碼，所以一開始的{{message}}=> Hello Vue! => 777 => 666

最后编辑于：2019.07.18 14:19:28