vue组件的基础使用

1.定义组件

<template>
   <div>
     <div class="one">确定</div>
   </div>
</template>

<script>
export default {
  name: "Mybutton"
}
</script>

<style scoped>
.one{
  background:#ff0000;
  height: 40px;
  width: 50px;
  border: 1px solid #42b983;
}
</style>
2，使用组件

<template>

  <mybutton></mybutton>
</template>

<script>
import Mybutton from "../components/Mybutton"

export default {
  name: 'Home',
  components: {
    Mybutton
  }
}
</script>
文章来自  www.96net.com.cn