如果是nodejs环境
<template>
<div>
<h1>Hello, Vue 3!</h1>
</div>
</template>
<script>
import { onMounted } from 'vue';
export default {
name: 'MyComponent',
setup() {
// 在这里定义响应式状态和其他逻辑
onMounted(() => {
// 这里的代码将在组件挂载到DOM后执行
console.log('组件已挂载');
});
// 返回响应式状态供模板使用
}
};
</script>如果是cdn版本vue3的浏览器环境<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<button @click="counter += 1">增加 1</button>
<p>
这个按钮被点击了 {{ counter }} 次。
</p>
</div>
<script>
const { onMounted }= Vue;
const app = {
setup(){
onMounted(() => {
// 这里的代码将在组件挂载到DOM后执行
console.log('组件已挂载');
});
return {
// 例如，一些数据或方法
};
},
data() {
return {
counter: 0
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html> 网友回复
我知道答案，我要回答
私活外包
