插值语法
{{ }}就属于插值语法，它会自动在Vue实例的data中找到对应的值插入
<body>
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr>
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
new Vue({
el:'#root',
data:{
name:'jack'
}
})
</script>
指令语法
在标签属性中，我们不能像插值语法一样直接写url。这样会被直接解析为字符串
例如下面这个例子：
<div id="root">
<a href="{{url}}">点击去特曼博客</a>
</div>
<script type="text/javascript">
// 创建Vue实例
new Vue({
el:'#root',
data:{
url:'https://www.yuofyou.cn',
}
})
</script>因为href是a标签的一个属性，所以不能再使用插值语法{{}}
此时我们应该使用 v-bind给标签里的属性进行动态绑定
我们只需要在href前面加上v-bind:(或者可以只使用简写冒号:)，此时这里href里的值就会被当成表达式去执行
<body>
<div id="root">
<a v-bind:href="url">点击去特曼博客</a>
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
new Vue({
el:'#root',
data:{
url:'https://www.yuofyou.cn',
}
})
</script>多层级
试想：我们能不能在data中写两个url
new Vue({
el:'#root',
data:{
name:'jack',
url:'https://www.yuofyou.cn',
url:'https://www.baidu.com'
}这里注意，如果这样写了以后 url的值会被新的url覆盖（替换掉）
如果想实现这种效果，我们需要把数据设计成多个层级的
在data中建立一个名字为school的层级 ，school后面跟{ }
在{ }中我们就可以写另外一个url
在实际应用的时候，我们只需要在url前面加上school即可
<body>
<div id="root">
<a v-bind:href="url">点击去特曼博客</a>
<a :href="school.url">点击去{{school.name}}</a>
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
new Vue({
el:'#root',
data:{
name:'jack',
url:'https://www.yuofyou.cn',
school:{
name:"百度",
url:'https://www.baidu.com'
}
}
})
</script>总结
引号包着的不一定是字符串，前面有v-bind这里url就会被当成表达式去执行
v-bind可以给标签里的属性动态的绑定值，不一定是href
v-bind也可以简写为冒号:
标签体中可以用插值语法
标签属性中可以用指令语法
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容
写法：{{xxx}} xxx是js表达式 且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定时间。。。。）
举例：v-bind:href="xxx" 或简写为 :href="xxx" xxx同样要写js表达式
且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是 :v-??? 此处只是拿v-bind举个例子