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介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。