Vue.js初次尝试，模板语法（七）
2018-11-06 本文已影响16人
葉糖糖
缩写，message可以使用msg。那么对于Vue.js指令的缩写，又有哪些黑科技呢？请跟着我，一起往下看。
Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写。所以压根不用担心记不住，代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法—缩写</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--完整语法-->
<a v-bind:href="url">完整语法</a>
<!--缩写-->
<a :href="url">缩写语法</a>
<!--完整语法-->
<button v-on:click="SayHello">确定</button>
<!--缩写语法-->
<button @click="SayHello">缩写</button>
</div>
</body>
</html>
<script type="text/javascript">
//定义data数据，数据类型是Json对象
var data = {url:"http://www.baidu.com"};
//创建Vue实例
var app =new Vue({
el:'#app',
data:data,
methods:{
SayHello:function () {
alert("hello");
}
}
})
</script>
PS：是不是感觉很简单？加油！
