1.2 vue2(组合式API)的语法结构以及外部暴露

vue2

vue3中可以写vue2的语法,vue2的结构像一个花盆里的根(根组件App.vue),根上可以插上不同的枝杈和花朵(组件)。

组件的结构:

html 复制代码
// 这里写逻辑行为
<script lang="ts">
export default{
    name: 'App'
}
</script>
// 这里写页面结构(相当于html)
<template>

</template>
// 这里写页面装饰(相当于css)
<style>

</style>

html和css的基础打好,关于template和style标签的书写就很简单,这里需要着重讲解一下script标签的外部暴露(vue2特有的)

script

vue2 采用组件式API,name,data,methods,...都写在固定的key的内部里面,最后暴露出来。

外部暴露

组件只有导出(暴露),才能被其他组件引用,并且都用键值对写。

复制代码
export default{
	name:'组件的名字'
	data(){
		return {
		// 数据
		// 这里注意,数据只能函数形式写,因为同组件多的话,避免数据污染,每个组件都有自己单独的数据。	
		}
	}
	methods:{
		// 这里写函数
		...
	},
	compute(){
	
	},
	setup(){
	// vue3的组合式API
	// 数据
	let a = 10;
	// 方法
	function 方法名()
	{
		...
	}
	...
	return{将数据,方法交出去,模板中才能使用}
	}
}

vue3 setup

setup与data或者methods等同级别,在setup中定义的数据,data或者methods等可以通过this.访问到,反之则不能。

但是在export default{}中写setup还需要交出去数据和方法,有更优雅的语法糖写法:

复制代码
<script lang="ts" setup>
let a = 123;
...
</script>