Vuejs入门级简单实例

时间 2019-11-09

标签 vuejs 入门简单实例繁體版

原文原文链接

Vue做为2016年最火的框架之一，以其轻量、易学等特色深受你们的喜好。今天简单介绍一下Vue的使用。javascript

首先，须要在官网下载vuejs，或者直接用cdn库。如下实例使用Vue实现数据绑定与判断循环：css

 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代码:html

//声明  
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.})

　　你们快来试试吧!!!vue

1. vuejs最简单入门
2. 超级简单入门vuex 小实例
3. opengl简单入门实例
4. RabbitMQ简单入门实例
5. JCrontab简单入门实例
6. WEBRTC--简单入门实例
7. Axis 简单入门实例
8. ActiveMQ简单入门实例
9. RocketMQ简单入门实例
10. Spring简单入门实例
更多相关文章...
• PHP 完整表单实例 - PHP教程
• Memcached入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用