vue组件的基本使用：入门示例

我就是我 2023-10-02 17:25 28阅读 0赞

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_8_color_FFFFFF_t_70_g_se_x_16]

### components/ZXL.vue ###

<template>
      <div>
        <h1>学亮编程手记{
        {
        a}}</h1>
        <button @click="add">按我加1</button>
      </div>
    </template>
    <script>
    export default {
        
      data() {
        
        return {
        
          a: 100
        }
      },
      methods:{
        
        add() {
        
          this.a ++
        }
      }
    }
    </script>
    <style>
      
    </style>

### App.vue ###

<template>
      <div>
        <ZXL></ZXL>
        <ZXL></ZXL>
        <ZXL></ZXL>
      </div>
    </template>
    
    <script>
    // 引入组件
    import ZXL from './components/ZXL.vue'
    
    export default {
        
      // 注册组件
      components:{
        
        ZXL
      },
      data(){
        
       
      }
    }
    </script>
    
    <style>
    
    </style>

### main.js ###

import Vue from 'vue'
    // 相对路径引入的App.vue文件
    import App from './App.vue'
    
    // 这行命令的作用是给生产环境配置的提示消息，如果为true或者默认不配置，会有相关提示语
    Vue.config.productionTip = false
    
    new Vue({
        
      // 渲染节点
      render: h => h(App),
      // 挂载函数，内部#app是vue的根节点
    }).$mount('#app')

### 效果 ###

npm run serve

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_8_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8b4e961f463b4f1891e9b87427318e3c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_8,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/02391390ce6b444eb0b97d9c3aa5ce9b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_20,color_FFFFFF,t_70,g_se,x_16