那今天，我就給大家詳細的說道說道這個 Vue.js ，以下是我們這次詳解的目錄，朋友們可以根據自己的情況選擇性閱讀，所有操作均附有代碼實現。
1. Vue.js 如何綁定到頁面中，使用他的功能。
2. Vue 實例化對象的生命周期。
3. Vue 的 所有 數據綁定指令
那接下來，我們就開始今天的介紹啦！
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的構造函數 實例化出一個根實例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的構造函數實例化出一個根實例 app1 ，說白了，這就是我們面向對象的對象的實例化，直接 new 一個對象。
el:"#app1", 這是在 掛載我們實例化對象的元素節點，就是這個app1 對象作用域是那一個標簽里面的。這里可以是 id、class、tagname。但是主要還是用id，因為他的唯一性。
data:{} 是定義 這個對象的變量和方法，注意所有在和 app1 有關聯的變量、方法都必須在data中聲明。
注意： (1)作用域。js5 只有函數作用域，所以 data 中的函數如果想調用變量，就必須通過 this. 調用，或者直接通過對象名調用。
(2)外部調用。app1.$data.message； 在js中直接調用 vue 對象的屬性、方法時，需要鏈式語法，一層層點出來，這里用 $data ，主要還是和js的變量作區別
(3)與HTML代碼的綁定。 這里我是通過 js 的onclick直接綁定的，當然 vue 有自己的事件綁定，這里暫且不講，如果用 js 的行內綁定，注意需要帶對象名。這就是純 OOP思想了。相信大家對面向對象也不陌生，如果真的不知道是啥玩意的，趕緊百度學去。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
