Vue.js 3 项目开发:迈向现代化前端开发的必经之路
<template>
<div class="container">
<h1>欢迎来到Vue.js 3项目</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: '使用Vue 3创建的现代化前端应用'
}
}
}
</script>
<style scoped>
.container {
text-align: center;
padding: 40px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
margin-top: 50px;
}
</style>
这个简单的Vue.js 3示例展示了如何创建一个组件,该组件包含一个标题和一个消息。它还演示了如何使用<style scoped>
来保证样式只应用于当前组件的元素,而不会影响到其他组件。这是开始使用Vue.js 3并开始构建现代化前端应用的好方法。
评论已关闭