初學Vue（五）-- 雙向綁定

時間 2019-12-06

標籤初學 vue 雙向綁定简体版

原文原文鏈接

<pre>
<body>vue

</div id="app">
    <input type="text" v-model="name" placeholder="你的名字">
    </h1>你好，{{ name }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: ''
        }
    })
</script>

</body>
</pre>app

el: el用於指定一個頁面中已存在的DOM元素來掛載Vue實例，它可使HTMLElement，也能夠是CSS選擇器,掛載成功事後能夠經過 $.el 來訪問，vue還提供了不少相似的方法去訪問（el也就是element的縮寫，規定做用域）
Vue實例：var app = new Vue({ })

例1：
<pre>this

var app = new Vue({
    el: '#app',
    data: {
        a: 2
    }
})
console.log(app.a); //2

</pre>code

例2：
<pre>生命週期

var maData = {
    a: 1
}
var app = new Vue({
    el: 'app',
    data: myData,       //在這條語句中進行數據綁定，當其中一方改變數據內容時，另外一方也會改變
})

console.log(myData.a);  //1

//修改屬性，原數據也會隨之修改
app.a = 2;
console.log(myData.a);  //2

//反之，修改原數據，Vue屬性也會修改
myData.a = 3;
console.log(app.a);     //3

</pre>事件

數據綁定<例一，例二>
當修改其中一方的數據時，另外一方的數據也會隨之修改此爲數據綁定

生命週期

每一個Vue實例建立時，都會經歷一系列的初始化過程，同時也會調用相應的生命週期鉤子，咱們能夠利用這個鉤子，在合適的時機執行咱們的業務邏輯。若是你使用過jQuery，必定知道它的ready() 方法，Vue的生命週期鉤子與之相似，比較經常使用的有：ip

created： 實例建立完成後調用，此階段完成了數據的觀測等，但還沒有掛載，$el還不能用。須要初始化處理一些數據時會比較有用，後面章節將有介紹。
mounted： el掛載到實例上後調用，通常咱們的第一個業務邏輯會在這裏開始
beforeDestroy： 實例銷燬以前調用。主要解綁一些使用addEventListener監聽的事件等。

** 這些鉤子與el和data相似，也是做爲選項寫入Vue實例內，而且鉤子的this指向的是調用它的Vue實例：element

<pre>作用域

var app = new Vue({
    el: '#app',
    data: {
        a: 2
    },
    created: function() {
        console.log(this.a);    //2
    },
    mounted: function() {
        console.log(this.$el);  //<div id="app"></div>
    },
})

</pre>input

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。