vue定义组件和挂载组件

在使用vue进行单页面应用开发时，用到最多的组件的定义和挂载，今天小编和大家分享一下vue组件定义和挂载的方法。

vue组件的定义

<template>
  <div class="hello">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld', //组件的名称
  data(){
  return {
      msg:'',// 组件自定义变量
      }
  }
}
</script>
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

vue组件的挂载

<template>
<!-- 组件使用 -->
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>、
// 组件的引用
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
  //组件注册
    HelloWorld
  }
}
</script>

<style>
</style>

以上就是vue组件的定义和基本使用，希望可以帮助到大家。