【Vue】基础系列（一）Vue初识 - 模板语法

一、初识Vue

Vue使用前的配置
- 下载vue代码。其中，vue代码分为开发版本（vue.js）以及生产版本（vue.mini.js）。开发版本文件较大，但是里面包含所有语法以及问题，可以方便开发人员在开发过程中找到问题；生产版本为压缩版，可以在上线之前将开发版更改为生产版。
- 引入vue的代码。
```
<script type="text/javascript" src="../js/vue.js"></script>
```
  其中，src中为vue.js存放的位置。
- 阻止vue在启动是生成生产提示。
```
Vue.config.productionTip = false
```
想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
```
new Vue({
    
}
```
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
```
<div id="demo">
    <h1>Hello，{{name}}，{{address}}</h1>
</div>
```
其中，{{???}}是Vue中的语法。
真实开发中只有一个Vue实例，并且会配合着组件一起使用；
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
```
<div id="demo">
    <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
```
其中，name.toUpperCase()的含义是：将name中所有的英文统一为大写字母形式。

二、Vue的模板语法

插值语法
- 功能：用于解析标签体内容。
- 写法：
```
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
```
指令语法
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件等等）。
- 写法：
```
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去学习1</a>
<a :href="school.url" x="hello">点我去学习2</a>
```
  其中，v-bind: 可以将school.name的值赋给href，且其可以简写为冒号。

Vue实例书写

new Vue({
    el:'#root',
    data:{
        name:'jack',
        school:{
            name:'尚硅谷',
            url:'http://www.atguigu.com',
        }
    }
})