Vue學習2：模板語法

時間 2019-11-08

標籤 vue 學習模板語法简体版

原文原文鏈接

 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>