1 <div id="dv">

 2     <!-- v-cloak能够解决表达式闪烁问题

 3     （当网速较慢时，会先出现{{msg}}，当请求完毕后才会将数据替换） -->

 4     <p v-cloak>===={{msg}}====</p>

 5     <p>========={{msg2}}========</p>

 6     <h4 v-text="msg">============</h4>

 7     <!--默认 v-text 没有闪烁问题-->

 8     <!-- v-text会覆盖元素中原本内容，

 9          而插件表达式不会覆盖，可在前后增加想要的元素 -->

10     <div v-text="msg3"></div>

11     <div>{{msg3}}</div>

12     <div v-html="msg3"></div>

13     <!-- v-html能够将数据当成HTML文本显示，会覆盖原有内容 -->

14     <!-- v-text与插件表达式只会讲数据当成普通文本显示 -->

15

16

17     <!-- v-bind：用于绑定属性的指令 -->

18     <input type="text" v-bind:value="mytitle">

19     <!-- v-bind可以简写成 : -->

20     <!-- v-bind原理是将被绑定的属性的值当成js代码执行，

21          所以可以在其中写合法的表达式-->

22     <input type="text" :value="mytitle+'123'" @click = "show">

23

24     <!-- v-on：事件绑定机制 -->

25     <!-- v-on：缩写@ -->

26     <input type="button" value="按钮" v-on:click = "show">

27 </div>

28

29

30 <script src="./lib/vue-2.4.0.js"></script>

31 <script>

32     var vm = new Vue({

33         el: '#dv',//el：代表被操作的元素

34         data:{//存储数据,这里面的数据名不是固定的

35             msg:'123',

36             msg2:'456',

37             msg3:'<h1>哈哈，你好Vue</h1>',

38             mytitle:'这是我自己定义的title'

39         },

40         methods:{//这个methods属性定义了当前Vue实例中所有可用的方法

41             show:function () {

42                 alert("hello");

43             }

44         }

45     });

46 </script>

 1     <div id="dv">

 2         <h4>{{msg}}</h4>

 3         <input type="text" v-bind:value="msg">

 4         <input type="text" v-model="msg">

 5         <!-- v-bind只能实现数据的单向绑定 -->

 6         <!-- v-model能够实现数据的双向绑定

 7              注意：v-model只能运用在表单元素中-->

 8     </div>

 9     <script src="./lib/vue-2.4.0.js"></script>

10     <script>

11         var vm = new Vue({

12             el: '#dv',

13             data:{

14                 msg:'123',

15             },

16             methods:{

17             }

18         });

19     </script>

 1 <!-- 注意：这里的class都需要使用 v-bind 进行数据绑定 -->

 2 <div id="dv">

 3     <!-- 第一种使用方式：直接传递一个数组 -->

 4     <h2 v-bind:class="['red','thin']">hello world!</h2>

 5     <!-- 第二种使用方法：可在数组中使用三元表达式 -->

 6     <h2 v-bind:class="['red','thin',flag?'italic':'']">hello world!</h2>

 7     <!-- 第三种使用方法：使用对象代替三元表达式，提高可读性 -->

 8     <h2 v-bind:class="['red','thin',{'spacing':flag}]">hello world!</h2>

 9     <!-- 第四种：使用对象代替数组 -->

10     <!--<h2 v-bind:class="{red:true,italic:true,spacing:true,thin:true}">hello world!</h2>-->

11     <h2 v-bind:class="obj">hello world!</h2>

12 </div>

13 <script src="./lib/vue-2.4.0.js"></script>

14 <script>

15     var vm = new Vue({

16         el: '#dv',

17         data:{

18             flag:true,

19             obj:{red:true,italic:true,spacing:true,thin:true}

20         },

21         method:{}

22     });

23 </script>

24

25

26

27 <div id="dv2">

28     <!-- 内联样式绑定： -->

29     <!-- 第一种：传入一个对象 -->

30     <h3 :style="{color:'red','font-weight':200}">内联样式绑定</h3>

31

32     <!-- 第二种：将对象提取出来 -->

33     <h3 :style="styleFlag">内联样式绑定</h3>

34

35     <!-- 第三种：通过数组同时传入多个对象 -->

36     <h3 :style="[styleFlag,styleFlag2]">内联样式绑定</h3>

37 </div>

38 <script>

39     var vm2= new Vue({

40         el:'#dv2',

41         data:{

42             styleFlag:{color:'red','font-weight':200},

43             styleFlag2:{color:'#000'}

44         }

45     });

46 </script>

 1     <div id="dv">

 2         <!-- v-for遍历数组，item代表数组的每一项（与PHP类似）,i代表每一项的索引 -->

 3         <!--<p v-for="item in arr">{{item}}</p>-->

 4         <p v-for="(item,i) in arr">项：{{item}}----索引：{{i}}</p>

 5         <br>--------------------<br>

 6

 7         <!-- v-for遍历 对象数组，有i代表索引与上相同 -->

 8         <p v-for="user in users">user.id：{{user.id}}----user.name：{{user.name}}</p>

 9         <br>--------------------<br>

10         <!-- v-for遍历对象，出现形式为 键值对 的形式，

11         第一个参数为值，第二个参数为键，有第三个参数 i 为索引值 -->

12         <p v-for="(val,key) in obj">值：{{val}}----键：{{key}}</p>

13

14         <!-- v-for迭代数字 -->

15         <p v-for="num in 3"></p>

16     </div>

17

18     <script src="./lib/vue-2.4.0.js"></script>

19     <script>

20         var vm = new Vue({

21             el:'#dv',

22             data:{

23                 arr:[1,2,3,4],

24                 users:[

25                     {id:1,name:'user1'},

26                     {id:2,name:'user2'},

27                     {id:3,name:'user3'},

28                     {id:4,name:'user4'}

29                 ],

30                 obj:{

31                     id:1,

32                     name:'user',

33                     sex:'男',

34                     age:'22'

35                 }

36             }

37         })

38     </script>

 1 <div id="dv">

 2         <input type="button" value="toggle" @click="flag=!flag">

 3         <!-- v-if会重复的创建与删除元素，v-show只是切换改变display：none样式 -->

 4         <!-- v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗 -->

 5

 6         <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if -->

 7         <!-- 如果元素可能永远也不会被显示出来，则不要使用v-show -->

 8         <h3 v-if="flag">这是一个v-if控制的元素</h3>

 9         <h3 v-show="flag">这是一个v-show控制的元素</h3>

10     </div>

11     <script src="./lib/vue-2.4.0.js"></script>

12     <script>

13         var vm = new Vue({

14             el:'#dv',

15             data:{

16                 flag:false

17             }

18         });

19     </script>