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