前言
本文希望读者有一定的Vue开发经验，样例采用vue中的单文件组件，也是我的个人笔记，欢迎一起进步
必须有根元素
这是一个最简单的vue单文件组件，<template></template>被称为模板，模板中必须有一个根元素
<template>
<div>
</div>
</template>
<script>
</script>
模板中可以写什么？
1、静态内容（不变的内容称为静态内容）
html元素、vue组件
<template>
<div>
<hello-world></hello-world>
</div>
</template>
备注：组件名使用<hello-world></hello-world>或者<HelloWorld></HelloWorld>均可以
2、插值，也称mustcache语法
{{}}中写的是JS表达式，如果对JS表达式不理解的话，只需要记住能写在return语句后面的，带有返回值的语句，就是JS表达式
注意：{{}}语法不能用在元素属性上，只能用在元素内容上
模板的当前环境为组件对象（或者Vue对象）所以不用写this了,Vue框架已经帮你处理
<template>
<div>
<hello-world>
{{ baby }}
</hello-world>
</div>
</template>
3、指令
html元素或者组件上，能写一种v-开头的属性，这些属性称为指令，指令中的值也是JS表达式，当前环境也为组件对象或者Vue对象
再次强调，指令中写的也是JS表达式，如果对JS表达式不理解的话，只需要记住能写在return语句后面的，带有返回值的语句，就是JS表达式
指令只能作用在元素的属性、或者组件的属性上，这点要与{{}}区分开！
<template>
<div>
<hello-world @click="fk">
</hello-world>
</div>
</template>
4、特殊属性（Vue框架自己添加的属性）
如key、ref等属性，这些属性都是Vue框架规定好的属性。
<template>
<div>
<hello-world @click="fk" ref="first">
{{ baby }}
</hello-world>
</div>
</template>
总结一下
1、元素（组件）内容用插值语法{{}}
2、元素（组件）属性用指令，v-xxx
3、插值和指令中的值都是JS表达式
4、只需要记住能写在return语句后面的，带有返回值的语句，就是JS表达式
5、本文只介绍单文件组件中的模板基础知识