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.})
大家快来试试吧!!!
时间： 2024-10-12 09:07:27