JavaScript
框架html
簡化Dom操做(使用Vue提供的特殊語法,Vue會自動的去操縱使用特殊語法的DOM元素)前端
響應式數據驅動 (頁面是由數據生成的)vue
漸進式的框架,你能夠將Vue做爲你應用的一部分嵌入其中ios
解耦視圖和數據npm
可複用的組件axios
前端路由技術app
狀態管理框架
虛擬DOMmvvm
步驟函數
導入開發版本的Vue.js
建立Vue實例對象, 設置el屬性和data屬性
使用簡潔的模板語法把數據渲染到頁面上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HelloVue</title> <!-- 開發環境版本,包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> window.onload = function(){ const app = new Vue({ <!-- el類型:String或HTMLElement --> el: '#app', <!-- data類型:Object或function --> <!-- 注意:組件當中data必須是一個函數 --> data: { message: 'Hello Vue!' } }) } </script> </head> <body> <div id="app"> {{ message }} </div> </body> </html>
el:掛載點
el是用來設置Vue實例掛載(管理)的元素
做用範圍:Vue會管理el選項命中的元素及其內部的後代元素
能夠使用其餘的選擇器,可是建議使用ID選擇器
能夠使用其餘的雙標籤,不能使用HTML和BODY
data:數據對象
Vue中用到的數據定義在data中
data中能夠寫複雜類型的數據
渲染複雜類型數據時,遵照js的語法便可
<body> <div id="app"> {{ message }} <h2>{{ person }}</h2> <h2>{{ person.name }}</h2> <h3>{{ words}}</h3> <h3>{{ words[2] }}</h3> </div> <script> const app = new Vue({ el: '#app', data: { message: 'Hello Vue!', person:{ name:"lak", gender:"女" }, words:["GG","TT","YY","MM"] } }) </script> </body>
也稱爲生命週期鉤子,即生命週期函數
生命週期圖示
初始化階段
beforeCrete
函數,created
函數,beforeMount
函數,mounted
函數
運行狀態階段
beforeUpdade
函數,updateed
函數
銷燬階段
beforeDestory
函數,destoryed
函數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HelloVue</title> <!-- 開發環境版本,包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 官網提供的 axios 在線地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> window.onload = function(){ const app = new Vue({ el:"#app", data:{ msg:"GG" }, method:{}, //1.生命週期中的第一個函數,該函數在執行時Vue實例僅僅完成了 // 自身事件的綁定和生命週期函數的初始化工做,Vue實例中還沒 // 有Data,el,methods相關屬性 beforeCreate(){ console.log("beforeCreate:" + this.msg);//拿不到該屬性 }, //2.生命週期中的第二個函數,該函數在執行時Vue實例已經初始化 // 化了data屬性和methods中相關方法 created(){ console.log("create:" + this.msg); }, //3.生命週期的第三個函數,該函數在執行時Vue將el中指定做用範圍 // 做爲模板編譯 beforeMount(){ console.log("beforeMount:" + document.getElementById("sp").innerText); //beforeMount:{{msg}} }, //4.生命週期的第四個函數,該函數在執行過程當中,已經將數據渲染到 // 界面中而且已經更新頁面 mounted(){ console.log("beforeMount:" + document.getElementById("sp").innerText); //beforeMount:GG }, //5.生命週期的第五個函數,該函數是data中數據發生變化時執行的, // 此事件執行時僅僅時Vue實例中的data數據變化,而頁面中顯示的仍是 // 原始數據 beforeUpdate(){}, //6.生命週期的第六個函數,此事件執行時Vue實例中的data數據 //變化,頁面中的數據也相應發生了變化 update(){}, //7 beforeDestory(){}, //8 destoryed(){}, }) } </script> </head> <body> <div id="app" > <span id="sp">{{msg}}</span> </div> </body> </html>