Vue类型文件的基本结构详解 ------ template、export、组件的挂载以及部份值的调用方法

VUE 基本结构

一、 基本结构

vue文件

• vue文件的基本结构
  此处是我随意敲的代码内容（仅供参考）

代码内有注释

<template>
/*写一个用于挂载的外层根节点，此处用的div标签*/
	<div>
/*这里div里的双大括号也就是moustache语法。
可以将script里数据返回值的名称直接填入大括
号便可以获取到返回值。此处举例获取num的值*/
	  <div class='name'>{{num}}</div>
	  <input :value='content'/>
	</div>
</template>
/*此处sth.vue文件的导入内容也是由它自身的export default抛出的*/
import sth from './spath/sth.vue'
<script>
  export default {
  /*此处component用于挂载从外部导入的vue文件*/
    components: {
  	sth
   }
	data () {
		return {
		/*这里随便举例写了一个数据返回值可以自己定义*/
			num:10
		}
	},
	methods : {
	/*这里的函数也可以获取template内元素的属性
	值以使用,此处是名为changevalue的函数获取的
	是input标签内的value的值*/
	changevalue(value){}
	},
	computed: {
	}
				}
</script>
<style>
/*此处给模板内类名为name的元素添加样式*/
 .name {
   display：block;
   width:200px;
   height:200px;
}
</style>

以上便是一个Vue文件的基本组成 各元素在下表解释

元素名称	元素解释
template 标签	template标签是Vue里的模板标签，是vue组件挂载后所显示的内容 ，将需要显示替换的内容写到此标签内。template中的内容必须要用至少一个DOM元素包裹（因为vue的模版中只有能一个根节点，在template标签内，Vue只能读取templa内的一个节点也就是第一层标签，所以必须用一个标签将所有需要现实的内容包起来）
script标签	负责导入交互组件的标签可以传入多种函数方法及对象
export default	用于导出默认模块，对象内可传多个方法，以便于外部文件引入及组件进行挂载。data,methods.computed都是export向外导出的方法。（因为方法详情介绍比较复杂，这些方法的详解我会放在其他博客）
style标签	用于给模板内容里的元素添加css自定义样式 比如vue的动画组件会用到类名的添加。