Vue3.0 CLI - 2.1 - Component 组件入门教程
在Vue.js之中, Component
是构建任何类型的应用程序的核心概念之一。在本教程中,我会向你展示如何使用Vue3.0 CLI
来创建并使用组件。我们将在VueCLI
中的模板中构建两个简单的组件,并将它们添加到父级组件中。由此深入了解组件的工作原理。
步骤1:创建Vue3.0项目
首先,我们要使用Vue3.0 CLI
创建一个新的Vue
项目。请确保在安装Vue3.0 CLI
之前已经安装了Node.js
和npm
。口令:vue create component-tutorial
步骤2: 创建一个子级组件
现在,我们将创建一个简单的HelloWorld
子级组件。使用以下命令在项目中生成新的Vue
组件: 口令:vue i --save-dev @vue/cli-plugin-babel
<template>
<div class='hello'>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld", // 组件名称
props: {
msg: String, //组件启动时传入的参数
},
};
</script>
<style>
.hello {
font-size: 2rem;
}
</style>
步骤3: 创建父级组件
现在,我们将使用父级组件来引用子级组件。我们将在父级组件App.vue
中添加HelloWorld
组件作为子级组件。使用以下命令更新App.vue
:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld :msg="message" />
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
data() {
return {
message: "Welcome to Your Vue.js App",
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
步骤4: 运行 Vue3.0 项目
使用以下命令在本地启动Vue3.0
:npm run serve
示例1:组件标题大小调整
修改子级组件HelloWorld
标题的大小。在组件的<style>
标签下添加 h1
标签及属性自定义调整:
<style>
.hello {
font-size: 2rem;
}
h1 {
font-size: 3rem;
font-weight: bold;
color: #02B875;
}
</style>
示例2:组件信息传递
修改父级组件App.vue
信息内容,传入到子级组件中。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld :msg="message" :des="`使用Vue3.0构建应用程序.`" />
</div>
</template>
在子级组件HelloWorld
的props
属性下,添加des
参数:
<template>
<div class='hello'>
<h1>{{ msg }}</h1>
<h3>{{ des }}</h3>
</div>
</template>
<script>
export default {
name: "HelloWorld", // 组件名称
props: {
msg: String,
des: String,
},
};
</script>
<style>
.hello {
font-size: 2rem;
}
h1 {
font-size: 3rem;
font-weight: bold;
color: #02B875;
}
h3 {
color: #6264a7;
}
</style>
现在的Vue3.0
项目将显示子级组件HelloWorld
的标题调整后及信息传播完成的输出。
这是一个非常基础的Vue3.0 CLI - Component 组件入门教程
。它将对刚刚接触Vue.js的学习者很有帮助。通过这个简单的教程,您现在应该有一个更好的理解,以便构建和使用组件。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue3.0 CLI – 2.1 – component 组件入门教程 - Python技术站