首页 > Web开发 > 详细

Vuejs入门级简单实例

时间:2017-07-11 22:01:25      阅读:279      评论:0      收藏: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.})  

  大家快来试试吧!!!

Vuejs入门级简单实例

原文:http://www.cnblogs.com/yang-ting/p/7152506.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!