vue3基础常用语法

前言:vue2 是option API; vue3是composition API。所以在语法上有很大不同,以下为上手vue3的常用语法。

一、vue3里 script 的三种写法

1.1 最基础 —— vue2的写法

<template>
	<div>{{ num }}</div>
	<button @click="onClick"> +1 </button>
</template>
<script>
export default {
	data() {
		return {
			num : 1,
		};
	},
	methods: {
		onClick() {
			this.num += 1;
		},
	},
}
</script>

总结: 和vue2完全一样,简单明了。无上手难度

1.2 新语法 —— setup() 属性

<template>
	<div>{{ num }}</div>
	<button @click="onClick"> + 1 </button>
</template>
<script>
	import { ref } from 'vue';
	export default {
		// 注意这部分
		setup() {
			let num = ref(1);
			const onClick = () => {
				num.value += 1;
			};
			return {
				num,
				onClick,
			};
		},
	}
</script>

总结: 所有的对象和方法都需要 return 才能在template中使用,写法繁琐,不推荐

1.3 推荐 ——

你可能感兴趣的:(javascript,vue.js,前端,vue3)