了解 vue 文件和vue各种函数的作用

了解 vue 文件和vue各种函数的作用

整个 vue 文件包含三大部分：template、script、style，在 App.vue 中，没有 style 部分，这个大家不需要了解。

●template

就是放 html 的地方，支持 vue 组件、原生 html。
下面展示一些 内联代码片。

<template>
    <div>
        <h1>Hello TouchVue<h1>
        <my-vue-component />
    </div>
</template>

●script

script 就是放 js 的部分，大家理解为一个配置表即可，复杂的算法与数据传递，都包含在这些配置的细节中，包括以下部分需要配置：

<script type='text/ecmascript-6'>
export default {
	// 注册外部引入的组件
	components: {

	},

	// 过滤器，当静态数据需要一定的变化后显示在 template ，则可以使用它
	filters: {

	},

	// 定义自定义属性；
	props: {

	},

	// 基础数据，template 中可以通过  {{ xxx }} 的形式引入数据，这部分数据是静态的
	data() {
		return {
			value: ''
		}
	},

	// 计算数据，template 中可以通过  {{ xxx }} 的形式引入数据，但部分数据可以是动态的
	computed: {
		value2() {
			return this.value + 'xxx'
		}
	},

	// 监听数据变化，在这里可以监听某个 data 中定义的数据的变化，执行一定的事件
	watch: {

	},

	// 生命周期钩子函数，DOM 加载之前执行
	created() {
		console.log('created')
	},

	// 生命周期钩子函数，DOM 加载之后执行
	mounted() {
		console.log('mounted')
	},

	// 方法定义
	methods: {
		test() {
			console.log('test')
		}
	}
}
</script>