components/ZXL.vue

<template><div><h1>學(xué)亮編程手記{{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 {// 注冊(cè)組件components:{ZXL},data(){} } </script><style></style>

main.js

import Vue from 'vue' // 相對(duì)路徑引入的App.vue文件 import App from './App.vue'// 這行命令的作用是給生產(chǎn)環(huán)境配置的提示消息，如果為true或者默認(rèn)不配置，會(huì)有相關(guān)提示語(yǔ) Vue.config.productionTip = falsenew Vue({// 渲染節(jié)點(diǎn)render: h => h(App),// 掛載函數(shù)，內(nèi)部#app是vue的根節(jié)點(diǎn) }).$mount('#app')

效果

npm run serve

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。