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文件的基本组成 各元素在下表解释