vue3入门 - 按钮组件demo - 04

概述

我们在完成Vue3的安装之后（如何安装请查看之前的文章），通过修改vue自带的demo的基础上去学习vue，在自带demo的基础上去新增一个按钮组件。对vue的核心之一组件有更深入的理解。

框架加载过程

在开始写按钮组件之前，我们要了解vue的整个加载过程。
index.html ->> main.js ->> app.vue ->> index.js ->> HellWorld.vue

index.html	main.js	app.vue	index.js	HellWorld.vue
入口父页面	main.js关联到app.vue	父组件	路由配置文件	子组件

HellWorld.vue 就是一个组件。

操作步骤如下：

1、 执行命令，访问vue生成的页面

npm run serve
浏览器访问： http://localhost:8080/ 

2、修改 app.vue

在第6行，增页面导航

 <router-link to="/button">button</router-link>

3、修改index.js

index.js 是路由管理文件，新增按钮组件路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/button',
    name: 'button',
    component: () => import('../views/button.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4、在 views 文件里面新建 button.vue 文件

<template>
  <div>
    <!-- 绑定数据，在一秒内改变数据 -->
    <button class="demoBtn">{{msg}}</button>

    <!--绑定默认属性内容 -->
    <button  class="demoBtn">{{defaultMsg}}</button>
    
    <!-- 按钮点击事件，通过指令触发 -->
    <button class="demoBtn" v-on:click="doClick">{{clickMsg}}</button>

  </div>
</template>

<script>
export default {
  name: "myBtn",
  data: function() {
    return {
      msg: "我的按钮"
    };
  },

  //属性定义
  props: {
    defaultMsg: {
      default: "默认按钮"
    },
    clickMsg:{
        default:"点击按钮"
    }
  },

  //在组件初始化之后，一秒钟改变按钮的数据
  mounted() {
    //组件正式被初始化之后调用，数据驱动去改版按钮的内容
    var self = this;
    setTimeout(function() {
      self.msg = "改变按钮";
    }, 1000);
  },

  //点击按钮事件--方法
  methods: {
    doClick: function() {
      alert(this.clickMsg);
    }
  }
};
</script>

<style>
.demoBtn {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  font-size: 16px;
}
</style>

总结

一个简单的按钮组件，包括数据绑定， 属性绑定， 事件绑定就完成了。同时用到了指令，数据驱动。 后续在这个demo上进行相应的扩展。