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

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

vue组件的基本使用：入门示例_相对路径_02