Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
插值
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="box"> 10 {{message}} 11 </div> 12 <script> 13 //vue实例化 14 //el 绑定html对象，选择器 15 //data:绑定html对象数据，双向绑定。可以用v-model 16 var vm = new Vue({ 17 el:"#box", 18 data:{ 19 message:"hello,vue" 20 } 21 }); 22 23 </script> 24 </body> 25 </html>
HTML
使用v-html绑定html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box" v-html="message"> </div> <script> new Vue({ el:"#box", data:{ message:"<p>我的家</p>" } }) </script> </body> </html>
属性
html属性中的值使用 v-bind指令。比如v-bind:class,v-bind:style等。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/vue.js"></script> 7 <style> 8 .myclass{ 9 background: green; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="box"> 15 <input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改变颜色</label> 16 <input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改变字体大小</label> 17 <div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div> 18 </div> 19 <script> 20 new Vue({ 21 el:"#box", 22 data:{ 23 activeClass:false, 24 activeStyle:false 25 } 26 }) 27 </script> 28 </body> 29 </html>
上面的代码，我们通过v-bind:class和v-bind:style为元素绑定了style和class。并在v-bind中使用了表达式。当activeClass和activeStyle为true的时候，div的class和style都将发生改变。
参数
参数在指数后，用冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
1 <div id="box"> 2 <input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改变颜色</label> 3 <input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改变字体大小</label> 4 <div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div> 5 <pre><a v-bind:href="url">百度</a></pre> 6 </div> 7 <script> 8 new Vue({ 9 el:"#box", 10 data:{ 11 activeClass:false, 12 activeStyle:false, 13 url:'http://www.baidu.com' 14 } 15 }) 16 </script>
上面的代码就是通过v-bind:href，绑定了href属性。
事件绑定
通过使用v-on:参数，可以绑定事件。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/vue.js" ></script> 7 </head> 8 <body> 9 <div id="box"> 10 {{message}} 11 <!-- 12 作者：offline 13 时间：2018-08-28 14 描述：v-on:click，点击事件 15 --> 16 <button v-on:click="reverseMessage">反转字符串</button> 17 <!-- 18 作者：offline 19 时间：2018-08-28 20 描述：v-on:mouseover,鼠标进入事件，v-on:mouseout，鼠标移出事件 21 --> 22 <button v-on:mouseover="overColor" v-on:mouseout="outColor" v-bind:style="color">鼠标经过</button> 23 </div> 24 <script> 25 new Vue({ 26 el:"#box", 27 data:{ 28 message:"hello,vue", 29 color:'color:blue;' 30 }, 31 methods:{ 32 reverseMessage:function(){ 33 this.message=this.message.split('').reverse().join(''); 34 }, 35 overColor:function(){ 36 this.color="color:green"; 37 }, 38 outColor:function(){ 39 this.color="color:blue"; 40 } 41 } 42 }) 43 </script> 44 </body> 45 </html>
上面的代码，通过v-on:click,绑定了click事件。vue中的methods可以定义方法。v-on:mouseover和v-on:mouseout监听了鼠标移入和移出事件。鼠标移入的时候，style的color为green，鼠标移出的时，style的color颜色为blue。
格式化
通过vue的filters属性，能够格式化data属性。下面的代码展示了时间格式化。通过在filters中定义一方法，该方法对属性进行格式化操作，并返回。使用格式化的时候，{{message|format|format2}}。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/vue.js" ></script> 7 </head> 8 <body> 9 <div id="box"> 10 <!-- 11 作者：offline 12 时间：2018-08-28 13 描述：日期格式化 14 --> 15 {{time|formatTime}} 16 </div> 17 <script> 18 new Vue({ 19 el:"#box", 20 data:{ 21 time:"2018-10-11 08:20:11" 22 }, 23 filters:{ 24 formatTime:function(value){ 25 var time = new Date(value); 26 var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); 27 return rtime; 28 } 29 } 30 }) 31 </script> 32 </body> 33 </html>
实例化时间对象，并指定时间。然后将时间格式为年月日格式。
缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：v-bind:class，可以缩写为：class,v-on:click可以缩写为@click。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/vue.js" ></script> 7 <style> 8 .class1{ 9 color: aquamarine; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="box"> 15 <!-- 16 作者：offline 17 时间：2018-08-28 18 描述：日期格式化 19 --> 20 {{time|formatTime}} 21 <div :class="myclass">看我字体的颜色</div> 22 <div @click="clickFunc" :style="style">单击我</div> 23 </div> 24 <script> 25 new Vue({ 26 el:"#box", 27 data:{ 28 time:"2018-10-11 08:20:11", 29 myclass:'class1', 30 style:'cursor:pointer;border:1px solid gray;50px' 31 }, 32 methods:{ 33 clickFunc:function(){ 34 console.log("单击了我"); 35 } 36 }, 37 filters:{ 38 formatTime:function(value){ 39 var time = new Date(value); 40 var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); 41 return rtime; 42 } 43 } 44 }) 45 </script> 46 </body> 47 </html>