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 = falsenew vue({// 渲染节点render: h => h(app),// 挂载函数，内部#app是vue的根节点 }).$mount('#app')

效果

npm run serve

总结

以上是尊龙游戏旗舰厅官网为你收集整理的vue组件的基本使用：入门示例的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。