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 = falsenew Vue({// 渲染節點render: h => h(App),// 掛載函數，內部#app是vue的根節點 }).$mount('#app')

效果

npm run serve

總結

以上是生活随笔為你收集整理的vue组件的基本使用：入门示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。