Vue作為2016年最火的框架之一,以其輕量、易學等特點深受大家的喜愛。今天簡單介紹一下Vue的使用。
首先,需要在官網下載vuejs,或者直接用cdn庫。以下實例使用Vue實現數據綁定與判斷循環:
1 <!DOCTYPE html> 2 .<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app1"> 9 <!--vue判斷--> 10 <span v-if="ok"> 11 {{message}} 12 </span> 13 <!--vue循環--> 14 <ul> 15 <li v-for="l in list"> 16 my name is {{l.name}},I am {{l.age}} years old 17 </li> 18 </ul> 19 </div> 20 <!--引入cdn庫,引入js需要在最底部--> 21 <script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script> 22 <script src="js/v1.js" type="text/javascript" charset="utf-8"></script> 23 </body> 24 </html>
js代碼:
//聲明
02.var app1=new Vue({
03. //綁定 DOM 元素
04. el:'#app1',
05. data:{
06. message:"hello world",
07. list:[
08. {name:'lvxueyuan',age:15},
09. {name:'xueyuan',age:15},
10. {name:'yuan',age:15},
11. {name:'lv',age:15},
12. {name:'lvxue',age:15}
13. ],
14. ok:1
15. }
16.})
大家快來試試吧!!!
