資訊專(zhuān)欄INFORMATION COLUMN
摘要：需要初始化處理一些數(shù)據(jù)時(shí)會(huì)比較有用，后面章節(jié)將有介紹。主要解綁一些使用監(jiān)聽(tīng)的事件等。這些鉤子與和類(lèi)似，也是作為選項(xiàng)寫(xiě)入實(shí)例內(nèi)，并且鉤子的指向的是調(diào)用它的實(shí)例
el: el用于指定一個(gè)頁(yè)面中已存在的DOM元素來(lái)掛載Vue實(shí)例，它可以使HTMLElement，也可以是CSS選擇器,掛載成功過(guò)后可以通過(guò) $.el 來(lái)訪(fǎng)問(wèn)，vue還提供了很多類(lèi)似的方法去訪(fǎng)問(wèn)（el也就是element的縮寫(xiě)，規(guī)定作用域）
Vue實(shí)例：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, //在這條語(yǔ)句中進(jìn)行數(shù)據(jù)綁定，當(dāng)其中一方改變數(shù)據(jù)內(nèi)容時(shí)，另一方也會(huì)改變
})
console.log(myData.a); //1
//修改屬性，原數(shù)據(jù)也會(huì)隨之修改
app.a = 2;
console.log(myData.a); //2
//反之，修改原數(shù)據(jù)，Vue屬性也會(huì)修改
myData.a = 3;
console.log(app.a); //3
數(shù)據(jù)綁定<例一，例二>
當(dāng)修改其中一方的數(shù)據(jù)時(shí)，另一方的數(shù)據(jù)也會(huì)隨之修改此為數(shù)據(jù)綁定
生命周期
每個(gè)Vue實(shí)例創(chuàng)建時(shí)，都會(huì)經(jīng)歷一系列的初始化過(guò)程，同時(shí)也會(huì)調(diào)用相應(yīng)的生命周期鉤子，我們可以利用這個(gè)鉤子，在合適的時(shí)機(jī)執(zhí)行我們的業(yè)務(wù)邏輯。如果你使用過(guò)jQuery，一定知道它的ready() 方法，Vue的生命周期鉤子與之類(lèi)似，比較常用的有：
created： 實(shí)例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測(cè)等，但尚未掛載，$el還不能用。需要初始化處理一些數(shù)據(jù)時(shí)會(huì)比較有用，后面章節(jié)將有介紹。
mounted： el掛載到實(shí)例上后調(diào)用，一般我們的第一個(gè)業(yè)務(wù)邏輯會(huì)在這里開(kāi)始
beforeDestroy： 實(shí)例銷(xiāo)毀之前調(diào)用。主要解綁一些使用addEventListener監(jiān)聽(tīng)的事件等。
** 這些鉤子與el和data類(lèi)似，也是作為選項(xiàng)寫(xiě)入Vue實(shí)例內(nèi)，并且鉤子的this指向的是調(diào)用它的Vue實(shí)例：
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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105593.html
摘要：前言最近在學(xué)習(xí)，學(xué)著寫(xiě)了幾個(gè)小例子，自己記錄一下，例子都比較簡(jiǎn)單，希望給初學(xué)的小伙伴一些參考。后記文章可能比較簡(jiǎn)單，只是分享了幾個(gè)小例子，沒(méi)有對(duì)的用法進(jìn)行詳細(xì)說(shuō)明，大家可以看官方文檔。參考資料中文文檔五個(gè)小案例帶你學(xué)習(xí)火熱的 前言 最近在學(xué)習(xí)vue.js，學(xué)著寫(xiě)了幾個(gè)小例子，自己記錄一下，例子都比較簡(jiǎn)單，希望給初學(xué)vue.js的小伙伴一些參考。 雙向數(shù)據(jù)綁定 點(diǎn)擊查看 數(shù)據(jù)綁定是vue...
摘要：計(jì)算屬性與監(jiān)視方法計(jì)算屬性計(jì)算屬性，顧名思義是可以計(jì)算數(shù)據(jù)的屬性，為什么要特意出個(gè)計(jì)算屬性呢，因?yàn)槿绻苯訉蓚€(gè)數(shù)據(jù)加起來(lái)的話(huà)，使用加法計(jì)負(fù)數(shù)的算雙向綁定數(shù)據(jù)時(shí)就會(huì)出現(xiàn)問(wèn)題計(jì)算屬性用法代碼案例加法計(jì)算器首先計(jì)算器我們想要用戶(hù)輸入所以 計(jì)算屬性與監(jiān)視方法 計(jì)算屬性 -- computed 計(jì)算屬性，顧名思義是可以計(jì)算數(shù)據(jù)的屬性，為什么要特意出個(gè)計(jì)算屬性呢，因?yàn)関ue如果直接將兩個(gè)數(shù)據(jù)加起...
摘要：而我們自定義的對(duì)應(yīng)的是，對(duì)應(yīng)的是，獲得到的前端數(shù)據(jù)是用戶(hù)輸入雙向綁定到了實(shí)例的內(nèi)的，獲取到的數(shù)據(jù)是用戶(hù)輸入雙向綁定到的假設(shè)用戶(hù)輸入了是，是，那么判斷條件的代碼就是 推薦學(xué)了node.js、vue.js入門(mén)或了解普通js與node傳輸數(shù)據(jù)的觀看 在vue實(shí)例中用vue的方式將數(shù)據(jù)傳遞到后臺(tái) 完整html代碼 完整js代碼 利用插件vue-resource 在vue中并沒(méi)有方法讓我們進(jìn)...
摘要：跨域雙向綁定相關(guān)面試題題目一題目數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理網(wǎng)址題目二題目懶加載原理網(wǎng)址題目三題目中和的區(qū)別網(wǎng)址題目四題目前端跨域究竟跨的是什么網(wǎng)址題目五題目倒計(jì)時(shí)器小 跨域、vue雙向綁定相關(guān)面試題題目一：題目：vue數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理網(wǎng)址：http://bbs.daxiangclass.com/?... 題目二：題目：懶加載原理？網(wǎng)址：http://bbs.daxiangclass....
摘要：可以進(jìn)行計(jì)算從開(kāi)始計(jì)數(shù)雙向綁定數(shù)據(jù)和輸出綁定事件書(shū)寫(xiě)區(qū)事件區(qū)域，所有事件控制寫(xiě)在這里有簡(jiǎn)寫(xiě)形式可以直接把替換為，。 vue - 國(guó)人開(kāi)發(fā)制作的 類(lèi)似于 view 的發(fā)音 vue經(jīng)過(guò)了幾次大的版本波動(dòng) 0.x 0.6版本 1.x 版本 2.x 版本 - 現(xiàn)在常用的 為什么要介紹版本改動(dòng)呢，因?yàn)椴煌姹菊Z(yǔ)法和用法有差別，用起來(lái)比較麻煩 react 因?yàn)榘鏅?quán)原因，導(dǎo)致百度等企業(yè)...
閱讀 1679·2021-11-16 11:41
閱讀 2468·2021-11-08 13:14
閱讀 3119·2019-08-29 17:16
閱讀 3089·2019-08-29 16:30
閱讀 1852·2019-08-29 13:51
閱讀 367·2019-08-23 18:38
閱讀 3236·2019-08-23 17:14
閱讀 640·2019-08-23 15:09
