Vue组件基本使用

Vue组件分3个步骤：

①、引入Vue组件

②、把Vue组件映射成标签

③、在template中使用标签

1、HelloWorld.vue

<template>    <div>        <p class="msg">{{msg}}</p>    </div></template><script>    /* 向外默认暴露一个配置对象 */    export default{ /* 与vue一致 */        data() {            return {                msg: 'Hello Vue Component'            }        },    }</script><style>    .msg{        color: red;        font-size: 30px;    }</style>

2、App.vue

/* 这是一个根组件 */<template>    <div>        <img class="logo" src="./assets/logo.png" alt="logo">        <!-- 3、使用组件标签 -->        <HelloWorld/>    </div></template><script>    /* 1、引入组件 */    import HelloWorld from './components/HelloWorld.vue'    /* 向外默认暴露一个配置对象 */    export default{        /* 2、映射组件标签 */        components: {            HelloWorld        }    }</script><style>    .logo{        width: 200px;        height: 200px;    }</style>

3、main.js

/* 入口js */import Vue from 'vue'/* 1、引入App.vue组件 */import App from './App.vue'Vue.config.productionTip = falsenew Vue({  el: "#app",  /* 2、映射组件标签 */  components: { App },  /* 3、使用组件标签 */  template: "<App/>"});

说明：这里是App.vue使用HelloWorld.vue组件；在main.js中使用了App.vue组件。