「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」。
上一篇我已经说过了vue.js的安装和简单的使用方法，下面我说一下vue的模板语法和数据绑定，之前我也说过什么是模板，也就是root容器里的代码被称为【Vue模板】相信大家看过我上一篇文章的也会印象，下面我仔细和大家在讲讲这一部分内容；模板就是我们vue代码的容器，有模板就肯定有模板语法，看下图红色框中就是模板容器，而绿色框就是模板语法了，像这种我们也可以称为差值语法括号里面放表达式这个语法就是把指定的内容放到指定的位置。
还有另外一种语法是指令语法也就是v-bind: 下面我给大家进行一下简单的代码演示和讲一讲如何使用指令语法；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>搜索，{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<!-- <a href="http://www.baidu.com" >点我去百度搜索1</a><!-- js的使用方式 --> -->
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}搜索1</a>
<a :href="school.url" x="hello">点我去{{school.name}}搜索2</a>
<!-- <a href="url" x="hello">点我去{{school.name}}搜索2</a><!-- 无法绑定 --> -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'jack',
school:{
name:'百度',
url:'http://www.baidu.com',
}
}
})
</script>
</html>
v-bind: 的简单使用已经完成了通过上面代码可以了解，我们这时候也可以通过vue官网的api查询需要的指令语法当然后续我也会使用其他的指令语法例如v-if: v-no 等等的指令下面我配了一张vue的官网图片详情可以到vue的官网上查看：cn.vuejs.org/v2/api/#v-b…
差值语法常用来是改变模板内容的也就是标签里面的内容，而指令语法是用来添加标签属性和事件的。
下面总结一下本章的内容：
1.插值语法：功能：用于解析标签体内容； 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。 举例：-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-????。
此处我们只是拿v-bind举个例子。其他会在以后的文章中会提及；
