亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

初學(xué)Vue(五)-- 雙向綁定

Thanatos / 419人閱讀

摘要:需要初始化處理一些數(shù)據(jù)時會比較有用,后面章節(jié)將有介紹。主要解綁一些使用監(jiān)聽的事件等。這些鉤子與和類似,也是作為選項寫入實例內(nèi),并且鉤子的指向的是調(diào)用它的實例


你好,{{ name }}


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

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,       //在這條語句中進行數(shù)據(jù)綁定,當(dāng)其中一方改變數(shù)據(jù)內(nèi)容時,另一方也會改變
})

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

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

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

數(shù)據(jù)綁定<例一,例二>

當(dāng)修改其中一方的數(shù)據(jù)時,另一方的數(shù)據(jù)也會隨之修改此為數(shù)據(jù)綁定

生命周期

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

created: 實例創(chuàng)建完成后調(diào)用,此階段完成了數(shù)據(jù)的觀測等,但尚未掛載,$el還不能用。需要初始化處理一些數(shù)據(jù)時會比較有用,后面章節(jié)將有介紹。

mounted: el掛載到實例上后調(diào)用,一般我們的第一個業(yè)務(wù)邏輯會在這里開始

beforeDestroy: 實例銷毀之前調(diào)用。主要解綁一些使用addEventListener監(jiān)聽的事件等。

** 這些鉤子與el和data類似,也是作為選項寫入Vue實例內(nèi),并且鉤子的this指向的是調(diào)用它的Vue實例:

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/105593.html

相關(guān)文章

  • 學(xué)習(xí)Vue.js的個小例子

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

    array_huang 評論0 收藏0
  • 初學(xué)Vue(四)-- 計算屬性,監(jiān)視方法

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

    kelvinlee 評論0 收藏0
  • 初學(xué)Vue(三) -- 前后端數(shù)據(jù)交互

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

    Ethan815 評論0 收藏0
  • 跨域、vue雙向綁定相關(guān)面試題

    摘要:跨域雙向綁定相關(guān)面試題題目一題目數(shù)據(jù)雙向綁定的實現(xiàn)原理網(wǎng)址題目二題目懶加載原理網(wǎng)址題目三題目中和的區(qū)別網(wǎng)址題目四題目前端跨域究竟跨的是什么網(wǎng)址題目五題目倒計時器小 跨域、vue雙向綁定相關(guān)面試題題目一:題目:vue數(shù)據(jù)雙向綁定的實現(xiàn)原理網(wǎng)址:http://bbs.daxiangclass.com/?... 題目二:題目:懶加載原理?網(wǎng)址:http://bbs.daxiangclass....

    miracledan 評論0 收藏0
  • 初學(xué)Vue(一) -- Vue簡單入門

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

    Alliot 評論0 收藏0

發(fā)表評論

0條評論

Thanatos

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<