那今天，我就給大家詳細(xì)的說(shuō)道說(shuō)道這個(gè) Vue.js ，以下是我們這次詳解的目錄，朋友們可以根據(jù)自己的情況選擇性閱讀，所有操作均附有代碼實(shí)現(xiàn)。
1. Vue.js 如何綁定到頁(yè)面中，使用他的功能。
2. Vue 實(shí)例化對(duì)象的生命周期。
3. Vue 的 所有 數(shù)據(jù)綁定指令
那接下來(lái)，我們就開(kāi)始今天的介紹啦！
1. Vue.js 如何綁定到頁(yè)面中，使用他的功能。
先看下面的一段代碼：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body> <button id="app1" onclick="app1.func()">我是app1，點(diǎn)我</button></body><script type="text/javascript" src="js/jquery-3.1.1.min.js?1.1.11" ></script><script type="text/javascript" src="js/vue.js?1.1.11" ></script><script type="text/javascript">//通過(guò)Vue.js的構(gòu)造函數(shù) 實(shí)例化出一個(gè)根實(shí)例var app1= new Vue({
el:"#app1",
data:{
message:"我在app1中顯示出來(lái)了嗎？",
func:function(){
alert(this.message);
}
}
});
console.log(app1.$data.message); //這個(gè)要知道哈，app1就是一個(gè)變量，一個(gè)對(duì)象類型的變量，鏈?zhǔn)秸Z(yǔ)法直接用即可</script></html>效果如下：
上述代碼就是點(diǎn)擊按鈕有彈窗，下面解析一下這段代碼。
var app1= new Vue({
el:"#app1",
data:{
message:"我在app1中顯示出來(lái)了嗎？",
func:function(){
alert(this.message);
}
}
});
console.log(app1.$data.message);
通過(guò)Vue.js的構(gòu)造函數(shù)實(shí)例化出一個(gè)根實(shí)例 app1 ，說(shuō)白了，這就是我們面向?qū)ο蟮膶?duì)象的實(shí)例化，直接 new 一個(gè)對(duì)象。
el:"#app1", 這是在 掛載我們實(shí)例化對(duì)象的元素節(jié)點(diǎn)，就是這個(gè)app1 對(duì)象作用域是那一個(gè)標(biāo)簽里面的。這里可以是 id、class、tagname。但是主要還是用id，因?yàn)樗奈ㄒ恍浴?/p>
data:{} 是定義 這個(gè)對(duì)象的變量和方法，注意所有在和 app1 有關(guān)聯(lián)的變量、方法都必須在data中聲明。
注意： (1)作用域。js5 只有函數(shù)作用域，所以 data 中的函數(shù)如果想調(diào)用變量，就必須通過(guò) this. 調(diào)用，或者直接通過(guò)對(duì)象名調(diào)用。
(2)外部調(diào)用。app1.$data.message； 在js中直接調(diào)用 vue 對(duì)象的屬性、方法時(shí)，需要鏈?zhǔn)秸Z(yǔ)法，一層層點(diǎn)出來(lái)，這里用 $data ，主要還是和js的變量作區(qū)別
(3)與HTML代碼的綁定。 這里我是通過(guò) js 的onclick直接綁定的，當(dāng)然 vue 有自己的事件綁定，這里暫且不講，如果用 js 的行內(nèi)綁定，注意需要帶對(duì)象名。這就是純 OOP思想了。相信大家對(duì)面向?qū)ο笠膊荒吧绻娴牟恢朗巧锻嬉獾?，趕緊百度學(xué)去。
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
