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>
运行结果：
参考：https://cn.vuejs.org/v2/guide/syntax.html，http://www.runoob.com/vue2/vue-template-syntax.html