不使用脚手架来创建 Vue 3 组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 Component Example</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<counter :initial-value="10"></counter>
<counter :initial-value="20"></counter>
</div>
<script>
// 定义 Counter 组件
const Counter = {
props: ['initialValue'],
data() {
return {
count: this.initialValue
};
},
template: `
<div class="counter">
<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>
</div>
`,
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
};
// 创建 Vue 应用
const app = Vue.createApp({
components: {
Counter
}
});
// 挂载应用到 #app 元素
app.mount('#app');
</script>
<style>
.counter {
display: flex;
justify-content: center;
align-items: center;
}
button {
margin: 0 10px;
padding: 5px 10px;
font-size: 1.2rem;
cursor: pointer;
}
span {
font-size: 1.5rem;
font-weight: bold;
}
</style>
</body>
</html>
本文经过AI辅助创作,作者不保证其准确性和可靠性。任何人因采取本文所述观点、做出决策或实施行动,所造成的损失,本网站概不负责。
2月前更新
您的位置:教程学习
发布于:2024/07/26 23:04:14
评论0条