Vue.js第1篇：初識Vue
阿新 • • 發佈：2018-11-30
1、Vue簡介
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。（來源於官網）
2、學習前提
你已瞭解關於 HTML、CSS 和 JavaScript 的中級知識。如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來吧！
3、安裝
直接下載並用 <script> 標籤引入，Vue 會被註冊為一個全域性變數。
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
Vue.js v2.5.17下載連結：https://pan.baidu.com/s/1dB5BcmOshbe8Pz11WBktyQ
在開發環境下不要使用壓縮版本（vue.min.js），不然你就失去了所有常見錯誤相關的警告!
4、建立一個Vue例項
每個 Vue 應用都是通過用 Vue 函式建立一個新的 Vue 例項開始的：
var vm = new Vue({
// 選項
})Vue的示例程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue</title> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"></div> <script type="text/javascript"> new Vue({ //el發生行為的目的地 //el:'#app', el:document.getElementById('app'), //template:裝載的模板 template:'<div><h1>大家好！{{text}}</h1></div>', //動態資料的宣告 data:function(){ return { text:'hello vue' }; } }); </script> </body> </html>
options選項描述new Vue({options});
- el是發生行為的目的地，即template模板填充的位置
el:'#app' 代表id="app"的DOM元素 el:document.getElementById('app')是頁面效能優化的寫法。
- template 裝載的模板
- data:動態資料的宣告