vue是國人開發的一個js框架，國人用得比較多。 Vue等框架與jQuery的區別 jQuery基於dom操作 Vue框架以數據驅動、組件化開發為核心 下載vue.js 如果安裝了node，執行命令 npm install vue 下載vue.js，可在vue後面加上 @版本號 指定要下載的vue. ...
vue是國人開發的一個js框架，國人用得比較多。
Vue等框架與jQuery的區別
-
jQuery基於dom操作
-
Vue框架以數據驅動、組件化開發為核心
下載vue.js
如果安裝了node，執行命令 npm install vue 下載vue.js，可在vue後面加上 @版本號 指定要下載的vue.js版本，未指定時預設下載最新穩定版。
在代碼中引入下載的vue.js：
<script type="text/javascript" src="vue.js"></script>
上線時要換為生產版 vue.min.js
demo vue.js的簡單使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--留坑，後續填數據 --> <div id="app"></div> <div class="red"></div> <div></div> <script> new Vue({ el:'#app', //通過id來指定 template:'<p>hello vue1</p>' //要填充的內容。可以去嵌套元素，比如'<div><p></p></div>'；但只能有一個根元素，'<div></div><div></div>'這樣就不行 }); new Vue({ el:'.red', //通過class來指定 template:'<p>hello vue2</p>' }); new Vue({ el:'div', //通過元素名來指定。不常用，因為控制不精細 template:'<p>hello vue3</p>' }); </script> </body> </html>
new Vue()只會產生一個Vue對象，只能填一個坑。
比如有2個<div class="red">，一個new Vue()只能填一個。
demo 動態數據
<div id="app"></div> <script> new Vue({ el:'#app', template:'<p>姓名：{{name}}，年齡：{{age}}</p>', //可以用{{ }}占位 data:function(){ return{ name:'chy', //數據 age:20, } } }); </script>
