Vuejs入门级简单实例

Posted on 2017-07-11 20:36  ITandYT  阅读(3344)  评论(0)  编辑  收藏  举报

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.})

　　大家快来试试吧!!!