vue组件的基本使用:入门示例
2023-09-14 09:01:59 时间
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_(组件)过渡效果
- Vue_(组件)实例方法
- vue父组件传字符串到子组件不需要写 v-bind 绑定或语法糖 :
- vscode自动生成vue模板教程
- vue-cli3父子组件传值
- 自定义vue全局组件use使用
- Vue less使用scope时渗入修改子组件样式
- [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
- vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- 自己写的一个Vue
- 浅谈 vue实例 和 vue组件
- GVA gin-vue-admin前后端部署教程
- vue v-show指令
- vuejs单文件组件:安装 webpack 和 vue-cli
- vue脚手架搭建报错:vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOU
- 使用nodejs&webpack&vue-cli脚手架工具搭建项目
- Vue.js 组件(component)demo小案例
- Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
- vue图片上传组件
- 126:vue+openlayers 加载谷歌地图(另一种URL方式)
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(三)系统登录
- vue创建备忘录