Vue基礎之數據綁定

時間 2019-12-06

標籤 vue 基礎數據綁定简体版

原文原文鏈接

咱們學習一門新語言或者框架時，第一件事是什麼呢，那必然是向世界say Hello。javascript

建立一個Vue應用

話很少說，先上代碼，讓咱們感覺一下Vue的核心功能html

<!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>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <h1>{{message}}</h1> // {{message}}模板的輸出方式
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app', // app是Vue實例的掛在對象
            data: {
                message: "Hello world" // 字面量
            }
        })
    </script>
</body>
</html>

當修改輸入框內容時，h1標籤內容也作相應改變，雖然代碼很簡單，仍是能體會到雙向綁定的精髓。vue

雙向綁定（面試考點）

經過構造函數建立一個Vue實例 new Vue()，此時app就至關於 new Vue；
傳入el，el是Vue對象中必不可少的，須要把el掛載到頁面已存在的DOM（能夠是DOM元素，或者是CSS選擇器）上；java
```
var app = new Vue({
     el: '#app', // 或者document.getElementById('app')
 })
```
在input標籤上有一個v-model指令，它的值和Vue實例中data裏的message對應，input能夠修改message的值，同時當message改變時也能夠體如今視圖上；

生命週期（開發時必瞭解）

每一個Vue實例在被建立以前都要通過一系列的初始化過程,這個過程就Vue的生命週期。下面是Vue的幾個鉤子函數：面試

beforeCreate: function () {
    console.group('beforeCreate 建立前狀態===============》');
    console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
    console.log("%c%s", "color:red","message: " + this.message)  
},
created: function () {
    console.group('created 建立完畢狀態===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
    console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
    console.group('beforeMount 掛載前狀態===============》');
    console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
    console.log(this.$el);
    console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
    console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
},
mounted: function () {
    console.group('mounted 掛載結束狀態===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
    console.log(this.$el);    
    console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
    console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
},
beforeUpdate: function () {
    console.group('beforeUpdate 更新前狀態===============》');
    console.log("%c%s", "color:red","el     : " + this.$el);
    console.log(this.$el);   
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","message: " + this.message); 
},
updated: function () {
    console.group('updated 更新完成狀態===============》');
    console.log("%c%s", "color:red","el     : " + this.$el);
    console.log(this.$el); 
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","message: " + this.message); 
},
beforeDestroy: function () {
    console.group('beforeDestroy 銷燬前狀態===============》');
    console.log("%c%s", "color:red","el     : " + this.$el);
    console.log(this.$el);    
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","message: " + this.message); 
},
destroyed: function () {
    console.group('destroyed 銷燬完成狀態===============》');
    console.log("%c%s", "color:red","el     : " + this.$el);
    console.log(this.$el);  
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","message: " + this.message)
}

下圖是Vue生命週期過程當中el、data以及data裏面的message字段的變化
npm