写在前面
这一篇主要介绍的是使用非完整版的 vue.js 做项目时，其中的 *.vue 文件的语法标准，以及每一部分的含义。
1. <template></template>
template 模板标签里包含的内容是要渲染在页面的内容，是 XML 语法格式，不是 HTML 语法格式，XML 和 HTML 语法基本类似，但是 XML 比 HTML 更加严格些，如在闭合标签这一块，XML 严格要求单标签必须闭合，如 <input/>，但在 HTML 中，单标签可闭合可不闭合，且最新的语法和推荐的语法是不闭合。
还有就是在 XML 中，当标签内的内容为空时，可直接闭合，如 <div/> ，但是在 HTML 中则无这种语法。
由于 XML 更加严格，因此 Vue 为了能更好地写 *.vue 文件的编译器，于是规定 template 模板标签里的内容必须用 XML 语法。
2. <script></script>
该标签内的语法为：
<script>
export default {
options//里面的内容能写的和 new Vue(options) 里的一样，
//只是不能有 template选项了，因为写在了外面<template>内
//并且里面的 methods属性必须是函数
}
</script>
3. <style></style>
存放 css 代码，或者 scss 代码，用于给上述的 <template> 里的元素添加样式
4. .vue 文件使用
import Xxx from './xxx.vue' //Xxx是一个 options 对象
new Vue({
render: h=>h(Xxx)
}).$mount('#app')
5. HTML模板-template语法
在这里 HTML 模板指的是符合 HTML 语法的字符串，在 Vue 中称之为 template 模板
1.显示表达式
直接在 HTML 模板中插入相应的表达式，简单理解就是在 HTML 模板中插入变量、表达式等数据
文本插值
文本插值是在 HTML 标签的内容里面插入表达式，将变量用 {{}} 包起来就会被当作变量编译
{{ object.a }}
{{ n+1 }} //n 是构造选项 options 里的 data 的数据属性
{{ fn() }} //fn 是构造选项里的 methods 里的函数
{{ null / undefined }} //如果表达式的值计算出来是 null 或 undefined ，则不显示在页面
文本指令
文本指令是通过添加 vue 指令将表达式写进标签内部
<div v-text="表达式"> </div>
取消模板编译
若想在 HTML 中插入的是 {{n}} 的普通字符串，则需要告诉 vue 该文本是普通字符串，不要编译，如下：
<div v-pre> {{n}} </div> //{{n}}普通字符串，v-pre表示不会对模板编译
2.显示富文本-HTML
<div v-html="x"> </div> //x的内容为 html 字符串，会被解析成对应的 html 元素
3.绑定属性
在 HTML 标签的属性里插入变量或表达式，可以用文本插值 {{}}，但不推荐，因为文本插值一般是用于标签内部的内容的，因此用新的属性绑定指令 v-bind
<img v-bind:src="x"> </img> // x 是变量，会被编译
//缩写
<img :src="x"> </img> // 是上述的 v-bind: 的简写，直接在属性前加 :
4.绑定对象
<div :style="{border: '1px solid red', height: 100'}"> //这里可以把 100px 简写成 100
</div>
5.绑定事件
<button v-on:click="add"> +1 </button> //函数名，在点击时会调用该函数 add()
<button v-on:click="add(1,3)"> 加法 </button> //传参函数，在点击时执行该函数 add(1,3)
<button v-on:click="n+=1">将n+1</button> //表达式，在点击时执行表达式
//缩写
<button @click="add"> +1 </button>
6.条件判断
<div v-if="x > 0">
x大于0时展示的部分
</div>
<div v-else-if="x === 0">
x等于0时展示的部分
</div>
<div v-else>
x大于0时展示的部分
</div>
7.循环
语法
v-for = "(value,key) in 对象或数组"
遍历数组
<ul>
<li v-for="(u,index) in users" :key="index"> //一定要绑定个 key 属性，值为 key 不重复的值，此处的 :key="index"有bug
索引:{{index}} 值：{{u.name}}
</li>
</ul>
遍历对象
<ul>
<li v-for="(value,name) in users" :key="name">
属性名:{{name}} 属性值：{{u.value}}
</li>
</ul>
8.显示与隐藏
<div v-show="表达式"> </div> 当表达式为真时显示该模块
<div v-show="n%2 === 0"> n是偶数 </div>
9.总结
Vue 用自己的指令来操作 DOM， 通过声明式编程将命令式编程简答化