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