Vue学习2：模板语法

用户1149564

发布于 2018-07-31 16:35:33

4620

发布于 2018-07-31 16:35:33

文章被收录于专栏：Micro_awake web

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue学习</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
 8     <script src="vue.js"></script>
 9 </head>
10 <body>
11 <style>
12     .class1{
13         background-color: #444;
14         color: orange;
15     }
16 </style>
17 <div id="app">
18     <!--{{}}用于文本插值-->
19     <p>{{msg}}</p>
20     <p>{{html1}}</p>
21     <!--v-html指令用于输出html代码-->
22     <p v-html="html1"></p>
23     <!--html属性中的值使用v-bind-->
24     <label for="r1">修改颜色</label><input type="checkbox"  v-model="class1" id="r1"><br><br>
25     <div v-bind:class="{'class1':class1}">directive v-bind:class</div>
26 
27     <!--Vue支持完全的javascript表达式-->
28     {{5+5}}
29     {{ok? 'true':'false'}}
30     {{msg.split(' ').reverse().join(',')}}
31 
32     <!--带有v-前缀的是Vue指令，表达式的值改变时，映射到DOM上-->
33     <div class="div1" v-if="seen">you can see that</div>
34     <!--参数-->
35     <!--注意下面两种情况-->
36     <!--v-bind将该元素的href值与表达式href值绑定-->
37     <div><a v-bind:href="href">click this</a></div>
38     <div><a href="href">click this</a></div>
39 
40     <!--修饰符：如.指明的特殊后缀，用于指定应该以特殊方式绑定-->
41 
42     <!--.prevent告诉v-on对于事件调用event.preventDefault()-->
43     <form v-on:submit.prevent="onSubmit"></form>
44 
45     <!--v-model可以实现数据双向绑定-->
46     <!--下面的例子中数据同时变化-->
47     {{msg1}}
48     <input type="text" v-model="msg1">
49 
50     <!--v-bind缩写为:,v-on缩写为@-->
51     <button @click="reverseMsg1">点击反转msg1</button>
52 
53     <!--过滤器-->
54     <div>{{msg2|capitalize}}</div>
55 </div>
56 <script>
57     var vm =new Vue({
58         el: '#app',
59         data: {
60             msg: 'hello msg',
61             ok: 1,
62             html1: '<span color="red">this is red</span>',
63             class1: false,
64             seen: true,
65             href: 'https://g.cn',
66             msg1: 'hello msg1',
67             msg2:'msg2'
68 
69         },
70         methods:{
71             reverseMsg1:function(){
72                 this.msg1= this.msg1.split('').reverse().join('');
73             }
74         },
75         filters:{
76             capitalize:function(msg2){
77                 if(!msg2){
78                     return ''
79                 }
80                 msg2=msg2.toString()
81                 return msg2.slice(0,1).toUpperCase()+msg2.slice(1)
82             }
83         }
84     })
85 </script>
86 </body>
87 </html>

运行结果：