<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- 在线引入vue3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- id 绑定应用范围 -->
<div id="app">
{{test}}
</div>
</body>
<script>
//使用 vue3 的基本格式
const {createApp , ref } = Vue
const app = createApp({
// 逻辑代码全部写在setup里面
// 因为没有语法糖,无论是定义的"变量"或者"函数"都必须!
// 把名称再多写一次!放在在最后return里面
setup(){
//测试变量
const test = ref("2023")
//测试函数
const fun_test = () => {
console.log("test");
}
//h5页面必须把名称return,vite中不需要(重要区别)
return {
test,
fun_test
}
}
})
//应用vue(就是挂载在上面ID绑定的元素上)
app.mount("#app")
</script>
</html>
全网最简洁,拒绝废话,之前我搜索教程的时候得到的答案太繁琐了,做蛋炒饭还把铁锅的铸造过程写出来,真的很难为我们这种新人,从一堆JS代码中找基本逻辑就算了,额,为什么h5中介绍使用vue3,要插几十行css代码,希望幸运儿能看到这篇教程,少浪费点时间。