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
Vue.js 模板语法
原文地址：https://www.cnblogs.com/why-not-try/p/9027802.html