一、什么是指令语法
vue中模板语法有两大类，第一类是插值语法，第二类就是指令语法。
1.插值语法
插值语法在上一篇“vue的简单使用”中已经提到了。
功能：用于解析标签体的内容
写法：{{XXX}}，XXX为js表达式
2.指令语法
功能：用于解析标签（包括标签属性、标签事件、标签体内容等）
本文来学习指令语法中的v-bind指令，v-bind指令用于绑定标签的属性。
二、v-bind的用法
下面是v-bind的使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的模板语法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>学生姓名</h1>
<h3>我的名字是：{{name}}</h3>
<hr/>
<h1>课程成绩</h1>
<h3>{{lesson.name}},{{lesson.score}}</h3>
<hr/>
<h1>个人主页</h1>
<a v-bind:href="url">{{name}}的个人主页1</a>
<a :href="url">{{name}}的个人主页1</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
name: "张三",
age: 15,
lesson: {
name: "数学",
score: 95
},
url: "https://www.baidu.com"
}
})
</script>
</html>
这是一个简单的示例，其中既使用了插值语法，也使用了v-bind指令语法。
从上面可以看出，v-bind指令语法的写法为：v-bind:XXX="xxx"，其中XXX为属性名，xxx则为js表达式。这个指令语法也可以缩写为:XXX="xxx"的形式。
三、页面测试
（本文仅作个人学习记录用，如有纰漏敬请指正）
标签：Vue,name,bind,XXX,语法,指令,标签 From： https://www.cnblogs.com/jmsstudy/p/17497475.html