000 vue各种基本指令

一：vue实例

1.实例

　　新建项目：

2.程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9 </head>
10 <body>
11     <!-- 第一个vue示例 -->
12     <div id="app">
13         <p>{{msg}}</p>
14     </div>
15     <script>
16         // 创建vue实例
17         var vm = new Vue({
18             el: '#app',
19             data: {
20                 msg: 'hello vue!'
21             }
22         });
23     </script>
24 </body>
25 </html>

　　效果：

二：知识点

1.v-cloak解决插值闪烁问题

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         [v-cloak] {
10             display: none;
11         }
12     </style>
13     
14 </head>
15 <body>
16     <!-- 解决插值表达式闪烁问题 -->
17     <div id="app">
18         <p v-cloak>{{msg}}</p>
19     </div>
20 
21     <script src="./lib/vue-2.4.0.js"></script>
22     <script>
23         var vm = new Vue({
24             el: '#app',
25             data: {
26                 msg: 'hello vue!'
27             }
28         });
29     </script>
30 </body>
31 </html>

2.v-text与插值表达式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9       
10     </style>
11     
12 </head>
13 <body>
14     <!-- 解决插值表达式闪烁问题 -->
15     <div id="app">
16         <p v-text="msg"></p>
17     </div>
18 
19     <script src="./lib/vue-2.4.0.js"></script>
20     <script>
21         var vm = new Vue({
22             el: '#app',
23             data: {
24                 msg: 'hello vue!'
25             }
26         });
27     </script>
28 </body>
29 </html>

　　效果：

　　区别：

　　v-text默认没有闪烁问题的

　　插值表达式可以在前后放其他的内容

　　v-text会覆盖元素中原本的内容，插值表达式只会替换自己的占位符，不会把整个元素的内容进行清空

3.v-html渲染html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9       
10     </style>
11     
12 </head>
13 <body>
14     <!-- 解决插值表达式闪烁问题 -->
15     <div id="app">
16         <p v-html="msg2"></p>
17     </div>
18 
19     <script src="./lib/vue-2.4.0.js"></script>
20     <script>
21         var vm = new Vue({
22             el: '#app',
23             data: {
24                 msg: 'hello vue!',
25                 msg2:'<h1>这是一个H标签</h1>'
26             }
27         });
28     </script>
29 </body>
30 </html>

　　效果：

4.v-bind：绑定属性指令

　　其中，在v-bind后的mytitle被认为是一个变量，然后可以进行表达式运算

　　可以被简写为:title="mytitle"。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9       
10     </style>
11     
12 </head>
13 <body>
14     <!-- 解决插值表达式闪烁问题 -->
15     <div id="app">
16         <input type="button" value="按钮" v-bind:title="mytitle">
17     </div>
18 
19     <script src="./lib/vue-2.4.0.js"></script>
20     <script>
21         var vm = new Vue({
22             el: '#app',
23             data: {
24                 msg: 'hello vue!',
25                 mytitle:'自定义属性'
26             }
27         });
28     </script>
29 </body>
30 </html>

　　效果：

5.v-on：事件机制

　　可以简写@click="show”

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9       
10     </style>
11     
12 </head>
13 <body>
14     <!-- 解决插值表达式闪烁问题 -->
15     <div id="app">
16         <input type="button" value="按钮" v-on:click="show">
17     </div>
18 
19     <script src="./lib/vue-2.4.0.js"></script>
20     <script>
21         var vm = new Vue({
22             el: '#app',
23             data: {
24                 msg: 'hello vue!'
25             },
26             methods:{
27                 show:function(){
28                     alert("hello on");
29                 }
30             }
31         });
32     </script>
33 </body>
34 </html>

三：案例

1.跑马灯

　　method中的方法调用data中的数据需要使用this

　　使用=>，使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9 </head>
10 <body>
11     <div id="app">
12         <input type="button" value="浪起来" @click="lang">
13         <input type="button" value="低调" @click="stop">
14         <h4>{{msg}}</h4>
15     </div>
16     <script>
17         var vm=new Vue({
18             el:'#app',
19             data:{
20                 msg:'继续方玉，不要浪 ',
21                 timeId:null
22             },
23             methods:{
24                 lang(){
25                     if(this.timeId!=null) return;
26                     this.timeId=setInterval(() => {
27                         var start=this.msg.substring(0,1);
28                         var end=this.msg.substring(1);
29                         this.msg=end+start
30                     },1000)    
31                 },
32                 stop(){
33                     clearInterval(this.timeId);
34                     this.timeId=null;  //需要重新置为null
35                 }
36             }
37         })
38     </script>
39 </body>
40 </html>

　　效果：

四：事件修饰符

1.事件修饰符的介绍

　　stop：阻止冒泡

　　prevent：阻止默认事件

　　capture：添加事件监听器时使用事件捕获模式

　　self：只当事件在该元素本身触发时触发回调

　　once：事件只触发一次

2.stop

　　基础程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .inner {
11             height: 150px;
12             background-color: darkcyan;
13         }
14     </style>
15 </head>
16 <body>
17     <div id="app" >
18         <div class="inner" @click="divhandle">
19                 <input type="button" value="浪起来" @click="btnhandle">
20         </div>
21         
22     </div>
23     <script>
24         var vm=new Vue({
25             el:'#app',
26             data:{
27                 msg:'继续方玉，不要浪 '
28             },
29             methods:{
30                 divhandle(){
31                     console.log("div 触发");
32                 },
33                 btnhandle(){
34                     console.log("input 触发");
35                 }
36             }
37         })
38     </script>
39 </body>
40 </html>

　　效果：

·　　阻止冒泡程序：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .inner {
11             height: 150px;
12             background-color: darkcyan;
13         }
14     </style>
15 </head>
16 <body>
17     <div id="app" >
18         <div class="inner" @click="divhandle">
19                 <input type="button" value="浪起来" @click.stop="btnhandle">
20         </div>
21         
22     </div>
23     <script>
24         var vm=new Vue({
25             el:'#app',
26             data:{
27                 msg:'继续方玉，不要浪 '
28             },
29             methods:{
30                 divhandle(){
31                     console.log("div 触发");
32                 },
33                 btnhandle(){
34                     console.log("input 触发");
35                 }
36             }
37         })
38     </script>
39 </body>
40 </html>

3.prevent

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .inner {
11             height: 150px;
12             background-color: darkcyan;
13         }
14     </style>
15 </head>
16 <body>
17     <div id="app" >
18         <a href="http://www.baidu.com" @click.prevent="linkclick">百度</a>
19     </div>
20     <script>
21         var vm=new Vue({
22             el:'#app',
23             data:{
24                 msg:'继续方玉，不要浪 '
25             },
26             methods:{
27                 linkclick(){
28                     console.log("百度");
29                }
30             }
31         })
32     </script>
33 </body>
34 </html>

4.capture

　　从外到里进行捕获

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .inner {
11             height: 150px;
12             background-color: darkcyan;
13         }
14     </style>
15 </head>
16 <body>
17     <div id="app" >
18         <div class="inner" @click.capture="divhandle">
19                 <input type="button" value="浪起来" @click.stop="btnhandle">
20         </div>
21         
22     </div>
23     <script>
24         var vm=new Vue({
25             el:'#app',
26             data:{
27                 msg:'继续方玉，不要浪 '
28             },
29             methods:{
30                 divhandle(){
31                     console.log("div 触发");
32                 },
33                 btnhandle(){
34                     console.log("input 触发");
35                 }
36             }
37         })
38     </script>
39 </body>
40 </html>

5.self

　　只有自己触发才会触发，类似于冒泡或者捕获这种被动的触发就不会被触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .inner {
11             height: 150px;
12             background-color: darkcyan;
13         }
14     </style>
15 </head>
16 <body>
17     <div id="app" >
18         <div class="inner" @click.self="divhandle">
19                 <input type="button" value="浪起来" @click="btnhandle">
20         </div>
21         
22     </div>
23     <script>
24         var vm=new Vue({
25             el:'#app',
26             data:{
27                 msg:'继续方玉，不要浪 '
28             },
29             methods:{
30                 divhandle(){
31                     console.log("div 触发");
32                 },
33                 btnhandle(){
34                     console.log("input 触发");
35                 }
36             }
37         })
38     </script>
39 </body>
40 </html>

6.once

　　只触发一次，以后不再起作用，而且可以串联

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .inner {
11             height: 150px;
12             background-color: darkcyan;
13         }
14     </style>
15 </head>
16 <body>
17     <div id="app" >
18         <a href="http://www.baidu.com" @click.prevent.once="linkclick">百度</a>
19     </div>
20     <script>
21         var vm=new Vue({
22             el:'#app',
23             data:{
24                 msg:'继续方玉，不要浪 '
25             },
26             methods:{
27                 linkclick(){
28                     console.log("百度");
29                }
30             }
31         })
32     </script>
33 </body>
34 </html>

五：v-model

1.v-model数据双向绑定

　　如果在input中输入文本，则vm.msg可以查看新输入的文本；同样，在控制台上vm.msg='6667777'进行赋值，则input框中的数据也会进行改变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9 </head>
10 <body>
11     <div id="app">
12             <input type="text" v-model="msg">
13     </div>
14     
15     <script>
16         var vm=new Vue({
17             el:'#app',
18             data:{
19                 msg:'学习代码'
20             },
21             methods:{
22 
23             }
24         })
25     </script>
26 </body>
27 </html>

2.简易计算器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9 </head>
10 <body>
11     <div id="app">
12         <input type="text" v-model="n1">
13         <select name="" id="" v-model="opt">
14             <option value="+">+</option>
15             <option value="-">-</option>
16             <option value="*">*</option>
17             <option value="/">/</option>
18         </select>
19         <input type="text" v-model="n2">
20         <input type="button" value="=" @click="calc">
21         <input type="text" v-model="result">
22     </div>
23     <script>
24         var vm=new Vue({
25             el: '#app',
26             data: {
27                 n1: 0,
28                 n2: 0,
29                 result: 0,
30                 opt: '+'
31             },
32             methods:{
33                 calc(){
34                     switch(this.opt){
35                         case '+': 
36                             this.result=parseInt(this.n1)+parseInt(this.n2);
37                             break;
38                         case '-':
39                         this.result=parseInt(this.n1)-parseInt(this.n2);
40                             break;
41                         case '*':
42                         this.result=parseInt(this.n1)*parseInt(this.n2);
43                             break;
44                         case '/':
45                         this.result=parseInt(this.n1)/parseInt(this.n2);
46                             break;
47                     }
48                 }
49             }
50         });
51     </script>
52 </body>
53 </html>

六：在vue中使用样式

1.第一种方式，使用数组

　　里面需要使用引号

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <h1 :class="['red','italic']">这是一个H1</h1>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32 
33             }
34         })
35     </script>
36 </body>
37 </html>

　　效果：

2.第二种方式，数组中使用三元表达式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <h1 :class="['red','italic',flag?'active':'']">这是一个H1</h1>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 flag: true
33             }
34         })
35     </script>
36 </body>
37 </html>

3.第三种，对象的方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <h1 :class="['red','italic',{'active':flag}]">这是一个H1</h1>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 flag: true
33             }
34         })
35     </script>
36 </body>
37 </html>

4.第四种，直接使用对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <h1 :class="{red:flag,italic:flag,active:flag}">这是一个H1</h1>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 flag: true
33             }
34         })
35     </script>
36 </body>
37 </html>

5.v-bind绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <h1 :class="classobj">这是一个H1</h1>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 flag: true,
33                 classobj: {'red':true,'italic':true,'active':true}
34             }
35         })
36     </script>
37 </body>
38 </html>

6.内联样式，：style方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 flag: true,
33                 classobj: {'red':true,'italic':true,'active':true}
34             }
35         })
36     </script>
37 </body>
38 </html>

　　可以将程序放到vue中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <h1 :style="classobj">这是一个H1</h1>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 flag: true,
33                 classobj: {color:'red','font-weight':200}
34             }
35         })
36     </script>
37 </body>
38 </html>

7.使用数组的方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <h1 :style="[classobj,classobj2]">这是一个H1</h1>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 flag: true,
33                 classobj: {color:'red','font-weight':200},
34                 classobj2: {'font-style':'italic'}
35             }
36         })
37     </script>
38 </body>
39 </html>

七：v-for

1.v-for迭代普通数组

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <p v-for="(item,i) in list">{{item}}---{{i}}</p>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 list:[2,5,3,9,6]
33             }
34         })
35     </script>
36 </body>
37 </html>

　　效果：

2.v-for迭代对象数组

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <p v-for="item in list">{{item.id}}---{{item.name}}</p>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 list:[
33                     {id:1,name:'a'},
34                     {id:2,name:'b'},
35                     {id:3,name:'c'}
36                 ]                
37             }
38         })
39     </script>
40 </body>
41 </html>

3.v-for迭代数字

4.v-for迭代对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         .red {
11             color: red;
12         }
13         .thin {
14             font-weight: 200;
15         }
16         .italic {
17             font-style: italic;
18         }
19         .active {
20             letter-spacing: 0.5em;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="app">
26         <p v-for="(val,key,i) in list">{{val}}---{{key}}-----{{i}}</p>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                 list:{
33                     id:1,
34                     name:'tom',
35                     address:'BJ'
36                 }           
37             }
38         })
39     </script>
40 </body>
41 </html>

　　效果：

5.添加

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <style>
10         
11     </style>
12 </head>
13 <body>
14     <div id="app">
15         <div>
16             <label>id
17                 <input type="text" v-model="id">
18             </label>
19             <label>name
20                 <input type="text" v-model="name">
21             </label>
22             <input type="button" value="添加" @click="add">
23         </div>
24         <p v-for="item in list">
25             <input type="checkbox">{{item.id}}---{{item.name}}
26         </p>
27     </div>
28     <script>
29         var vm = new Vue({
30             el:'#app',
31             data:{
32                     id:'',
33                     name:'',
34                     list:[
35                         {id:1,name:'tom'},
36                         {id:2,name:'bob'},
37                         {id:3,name:'tiny'},
38                         {id:4,name:'bean'}
39                     ]          
40             },
41             methods:{
42                 add(){
43                     // this.list.push({id:this.id,name:this.name})
44                     this.list.unshift({id:this.id,name:this.name})
45                 }
46             }
47         })
48     </script>
49 </body>
50 </html>

　　效果：

八：v-if与v-show

1.说明

　　v-if：每次都会重新删除或者创建元素

　　v-show：每次都不会进行dom的删除和创建操作，只是切换了dispaly:none模式

2.程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9 </head>
10 <body>
11     <div id="app">
12         <p v-if="flag">这是一个P</p>
13         <p v-show="flag">这是一个P</p>
14     </div>
15 
16     <script>
17         var vm=new Vue({
18             el:'#app',
19             data:{
20                 flag:true
21             }
22             
23         })
24     </script>
25 </body>
26 </html>