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

Thanatos 發布于2019-08-23 18:38 / 361人閱讀

摘要：需要初始化處理一些數據時會比較有用，后面章節將有介紹。主要解綁一些使用監聽的事件等。這些鉤子與和類似，也是作為選項寫入實例內，并且鉤子的指向的是調用它的實例

你好，{{ name }}

el: el用于指定一個頁面中已存在的DOM元素來掛載Vue實例，它可以使HTMLElement，也可以是CSS選擇器,掛載成功過后可以通過 $.el 來訪問，vue還提供了很多類似的方法去訪問（el也就是element的縮寫，規定作用域）

Vue實例：var app = new Vue({ })

例1：


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

例2：


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

數據綁定<例一，例二>

當修改其中一方的數據時，另一方的數據也會隨之修改此為數據綁定

生命周期

每個Vue實例創建時，都會經歷一系列的初始化過程，同時也會調用相應的生命周期鉤子，我們可以利用這個鉤子，在合適的時機執行我們的業務邏輯。如果你使用過jQuery，一定知道它的ready() 方法，Vue的生命周期鉤子與之類似，比較常用的有：

created： 實例創建完成后調用，此階段完成了數據的觀測等，但尚未掛載，$el還不能用。需要初始化處理一些數據時會比較有用，后面章節將有介紹。

mounted： el掛載到實例上后調用，一般我們的第一個業務邏輯會在這里開始

beforeDestroy： 實例銷毀之前調用。主要解綁一些使用addEventListener監聽的事件等。

** 這些鉤子與el和data類似，也是作為選項寫入Vue實例內，并且鉤子的this指向的是調用它的Vue實例：


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

GPU云服務器云服務器雙向綁定雙向數據綁定 js雙向綁定 vue3 學習筆記 (五)——vue3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105593.html

學習Vue.js的五個小例子

摘要：前言最近在學習，學著寫了幾個小例子，自己記錄一下，例子都比較簡單，希望給初學的小伙伴一些參考。后記文章可能比較簡單，只是分享了幾個小例子，沒有對的用法進行詳細說明，大家可以看官方文檔。參考資料中文文檔五個小案例帶你學習火熱的前言最近在學習vue.js，學著寫了幾個小例子，自己記錄一下，例子都比較簡單，希望給初學vue.js的小伙伴一些參考。雙向數據綁定點擊查看數據綁定是vue...

array_huang 2019-08-22 10:35 評論0 收藏0
初學Vue（四）-- 計算屬性，監視方法

摘要：計算屬性與監視方法計算屬性計算屬性，顧名思義是可以計算數據的屬性，為什么要特意出個計算屬性呢，因為如果直接將兩個數據加起來的話，使用加法計負數的算雙向綁定數據時就會出現問題計算屬性用法代碼案例加法計算器首先計算器我們想要用戶輸入所以計算屬性與監視方法計算屬性 -- computed 計算屬性，顧名思義是可以計算數據的屬性，為什么要特意出個計算屬性呢，因為vue如果直接將兩個數據加起...

kelvinlee 2019-08-26 14:00 評論0 收藏0
初學Vue(三) -- 前后端數據交互

摘要：而我們自定義的對應的是，對應的是，獲得到的前端數據是用戶輸入雙向綁定到了實例的內的，獲取到的數據是用戶輸入雙向綁定到的假設用戶輸入了是，是，那么判斷條件的代碼就是推薦學了node.js、vue.js入門或了解普通js與node傳輸數據的觀看在vue實例中用vue的方式將數據傳遞到后臺完整html代碼完整js代碼利用插件vue-resource 在vue中并沒有方法讓我們進...

Ethan815 2019-08-23 18:29 評論0 收藏0
跨域、vue雙向綁定相關面試題

摘要：跨域雙向綁定相關面試題題目一題目數據雙向綁定的實現原理網址題目二題目懶加載原理網址題目三題目中和的區別網址題目四題目前端跨域究竟跨的是什么網址題目五題目倒計時器小跨域、vue雙向綁定相關面試題題目一：題目：vue數據雙向綁定的實現原理網址：http://bbs.daxiangclass.com/?... 題目二：題目：懶加載原理？網址：http://bbs.daxiangclass....

miracledan 2019-08-23 10:40 評論0 收藏0
初學Vue（一） -- Vue簡單入門

摘要：可以進行計算從開始計數雙向綁定數據和輸出綁定事件書寫區事件區域，所有事件控制寫在這里有簡寫形式可以直接把替換為，。 vue - 國人開發制作的類似于 view 的發音 vue經過了幾次大的版本波動 0.x 0.6版本 1.x 版本 2.x 版本 - 現在常用的為什么要介紹版本改動呢，因為不同版本語法和用法有差別，用起來比較麻煩 react 因為版權原因，導致百度等企業...

Alliot 2019-08-23 18:05 評論0 收藏0