Vue3 组件基础简单应用

最新推荐文章于 2024-07-24 23:00:08 发布

javaGHui

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量184

点赞数

分类专栏： Vue相关文章标签：前端 vue

本文链接：https://blog.csdn.net/jiayou2020527/article/details/132115584

版权

Vue相关专栏收录该内容

15 篇文章 1 订阅

订阅专栏

去官网学习→组件基础 | Vue.js

运行示例：

自定义组件代码： MyComponent.vue

<template>
    <h2>MyComponent.vue 组件</h2>
</template>

<script>
    // 导出
    export default{
        name:"MyComponent"
    }
</script>

<!-- scoped 只在此组件中生效 ， 不加全局生效 -->
<style scoped>
    h2{
        color: #0400ff;
    }
</style>

根组件代码： App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png"/>
  <!-- 默认的 HelloWorld.vue
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  -->

  <h2>Vue 组件基础</h2>
  <MyComponent/>
  <!-- 也可这样写 -->
  <my-component/>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

//导入MyComponent.vue
import MyComponent from './components/MyComponent.vue'
export default {
  name: 'App',
  components: {
   // HelloWorld

   MyComponent

  }
}
</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>