模板语法分为两类：大括号表达式、指令。
这里指令有很多，我这里只讲解两个，v-bind(绑定),v-on(监听)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鸟教程(runoob.com)</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app-7">
<p>{{msg}}</p>
<img v-bind:src="imgUrl" />
<!--下面这个是上面形式的简化,v-bind:的简化形式就是:-->
<img :src="imgUrl" />
<button v-on:click="test()">点击按钮</button>
<!--下面这个是上面形式的简化，v-on:的简化形式，就是@-->
<button @click="test()">点击按钮</button>
</div>
<script type="text/javascript">
var app7 = new Vue({
el: '#app-7',
data: {
msg:'触发火情报警',
imgUrl:'https://cn.vuejs.org/images/logo.svg'
},
methods: {
test:function () {
alert('报警按钮')
}
}
})
</script>
</body>
</html>
注意 vue的函数的简化形式是可以去掉function的，需要进行一些操作，如果去掉function不行，那就将其添加上。