Vue组件化开发实例

已于 2023-03-21 13:48:54 修改
阅读量202 收藏
点赞数
文章标签： vue.js javascript 前端
于 2023-03-21 13:48:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67587581/article/details/129650581
版权

Vue可以进行组件化开发，组件是Vue的基本结构单元，开发过程中只需要按照Vue规范定义组件，将组件渲染到页面即可。组件可以提高代码的复用性。

例如我们需要实现一个10*10的图片表格，使用常规形式，我们则需要写100个img，工作量十分巨大，。但是如果使用Vue的组件化进行开发，我们只需要定义一个组件写一个for循环传值就可以实现一样的效果，示例代码如下：

css代码部分：

body{
	padding: 0;
	background-color: aqua;
}
.content{
    width: 100vw;
    margin:  0 auto;
    display: flex;
	justify-content: space-around;
	flex-flow: wrap;
}
.item{			
	background-color: #ccc;
}
img{
	width: 10vw;
}

html和js代码部分：

<body>
		
		<div id="app">
			<div class="content">
				<test-div v-for = "i in imgs" :im = "i"><!--循环调用imgs数组里的图片-->
				</test-div>
			</div>   
		</div>
	</body>
	<template id="tem"><!--定义template模板-->
		<div class="item" >
			<img :src="im" v-show="show"/>
		</div>
	</template>
	<script>
		Vue.component("test-div",{
			template:"#tem",
//			与template模板进行绑定
			props:["im"],
//			使用props传值
			data:function(){
				return{
					show:true,
					
				}
			},
			
		})
		var vm = new Vue({
//			实例化Vue对象
			el:"#app",
			data:{
				imgs:["img/JPEG1_01.jpg","img/JPEG1_02.gif","img/JPEG1_03.gif","img/JPEG1_04.gif","img/JPEG1_05.gif","img/JPEG1_06.gif","img/JPEG1_07.gif","img/JPEG1_08.gif","img/JPEG1_09.gif","img/JPEG1_10.gif","img/JPEG1_11.gif","img/JPEG1_12.gif","img/JPEG1_13.gif","img/JPEG1_14.gif","img/JPEG1_15.gif","img/JPEG1_16.gif","img/JPEG1_17.gif","img/JPEG1_18.gif","img/JPEG1_19.gif","img/JPEG1_20.gif",
				"img/JPEG1_21.gif","img/JPEG1_22.gif","img/JPEG1_23.gif","img/JPEG1_24.gif","img/JPEG1_25.gif","img/JPEG1_26.gif","img/JPEG1_27.gif","img/JPEG1_28.gif","img/JPEG1_29.gif","img/JPEG1_30.gif","img/JPEG1_31.gif","img/JPEG1_32.gif","img/JPEG1_33.gif","img/JPEG1_34.gif","img/JPEG1_35.gif","img/JPEG1_36.gif","img/JPEG1_37.gif","img/JPEG1_38.gif","img/JPEG1_39.gif","img/JPEG1_40.gif",
				"img/JPEG1_41.gif","img/JPEG1_42.gif","img/JPEG1_43.gif","img/JPEG1_44.gif","img/JPEG1_45.gif","img/JPEG1_46.gif","img/JPEG1_47.gif","img/JPEG1_48.gif","img/JPEG1_49.gif","img/JPEG1_50.gif","img/JPEG1_51.gif","img/JPEG1_52.gif","img/JPEG1_53.gif","img/JPEG1_54.gif","img/JPEG1_55.gif","img/JPEG1_56.gif","img/JPEG1_57.gif","img/JPEG1_58.gif","img/JPEG1_59.gif","img/JPEG1_60.gif",
				"img/JPEG1_61.gif","img/JPEG1_62.gif","img/JPEG1_63.gif","img/JPEG1_64.gif","img/JPEG1_65.gif","img/JPEG1_66.gif","img/JPEG1_67.gif","img/JPEG1_68.gif","img/JPEG1_69.gif","img/JPEG1_70.gif","img/JPEG1_71.gif","img/JPEG1_72.gif","img/JPEG1_73.gif","img/JPEG1_74.gif","img/JPEG1_75.gif","img/JPEG1_76.gif","img/JPEG1_77.gif","img/JPEG1_78.gif","img/JPEG1_79.gif","img/JPEG1_80.gif",
				"img/JPEG1_81.gif","img/JPEG1_82.gif","img/JPEG1_83.gif","img/JPEG1_84.gif","img/JPEG1_85.gif","img/JPEG1_86.gif","img/JPEG1_87.gif","img/JPEG1_88.gif","img/JPEG1_89.gif","img/JPEG1_90.gif","img/JPEG1_91.gif","img/JPEG1_92.gif","img/JPEG1_93.gif","img/JPEG1_94.gif","img/JPEG1_95.gif","img/JPEG1_96.gif","img/JPEG1_97.gif","img/JPEG1_98.gif","img/JPEG1_99.gif","img/JPEG1_100.gif",]
//				定义一个含有100个图片的数组
			}
		})
	</script>

約束丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue组件实例解析
11-28
实现此例您可以学到： vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一、搭建vue开发环境 1）更换镜像到cnpm npm install -g cnpm –registry=https://registry.npm.taobao.org 2）安装vue-cli cnpm install -g vue-cli 3）初始化vue项目 命令模式进入项目所在的目录，如d:\test\，输入vue init 项目名称即可。如果你想引入vue2.0框架，必须把nodejs、webpack和npm升级到最新版
Vue3动态实例化组件（自定义弹窗）
weixin_43575792的博客
01-19 3037
Vue3动态挂载组件问题操作1.父组件使用2.子组件使用总结 问题 需求：自定义地图弹窗组件，使用技术为vue3+vite3，实现动态实例化组件 操作 1.父组件使用 代码如下（示例）： Popup是自定义的弹窗组件，挂载组件中不能使用vue2中的extend，使用createApp创建实例，同时创建一个dom元素，使用mount将实例化的组件挂载到该元素上。最后将实例化组件内容的源代码传入弹窗，即component.$el。 vue3组件传递参数博主目前介绍两种方式 1.父组件使用provide,子组件使
vue组件化知识
iceylia的博客
08-21 802
vue笔记
Vue组件必须要放在实例化之前
大大大鸡腿的博客
10-27 852
在学习Vue组件过程中，遇到一个问题， new Vue({ el: '#components-demo' }) Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You
vue 实例化几种方式_Vue组件的三种调用方式
weixin_34898216的博客
12-23 1046
最近在写fj-service-system的时候，遇到了一些问题。那就是我有些组件，比如Dialog、Message这样的组件，是引入三方组件库，比如element-ui这样的，还是自己实现一个？虽然它们有按需引入的功能，但是整体风格和我的整个系统不搭。于是就可以考虑自己手动实现这些简单的组件了。通常我们看Vue的一些文章的时候，我们能看到的通常是讲Vue单文件组件化开发页面的。单一组件开发的文章...
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
08-28
本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue组件化开发简单实例(下)
Sobered的博客
06-27 599
儿子访问父亲的值 <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue事件监听练习</title> </head> <body> <div id="calc"> <test></test> </div> </body> </html> &
vue组件化开发简单实例(上)
Sobered的博客
06-25 1329
Vue组件化的实现和使用步骤 注册组件的基本步骤 创建组件构造器 注册组件 使用组件 具体实现[最基础的使用]： <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue事件监听练习</title> </head> <script src="./js/vue.js"></script> <body>
Vue2 中组件的本质、组件的实例化、组件实例的挂载
f18855666661的博客
10-11 1862
这篇博客的内容是讲讲在 Vue2 中，组件在底层的本质。在这里，直接抛出结论：组件的本质就是一个个的构造函数，这些函数以组件的定义 options 对象为参数，在 Vue2 中，最顶级的组件就是我们从 vue.js 中导入的 Vue 函数，而子组件是 Vue 底层通过 extend 函数创建出来的 VueComponent 函数。通过 new 这些组件的构造函数，我们可以创建出组件实例。
Vue组件化实例代码
qq_55278081的博客
08-16 169
代码】Vue组件化实例代码。
Vue拖拽组件开发实例详解
12-01
为什么要封装成一个Vue组件？ 主要目的是可提高代码的复用性和可维护性。 •复用性：组件化后，一些样式和逻辑均通过配置参数的方式去差异化体现，所以参数的可配置性提高了组件的复用率和灵活性。 •可维护性：组件...
Vue组件化通讯的实例代码
12-09
1. Vue的组成文件(.vue) 分为三部分，分别对应html,js,css <template></template> [removed][removed] <style></style> 2. Vue的生命周期函数 beforeCreate() 创建数据之前 created() 创建数据 我们...
vue+swiper实现组件化开发的实例代码
08-29
主要介绍了vue+swiper实现组件化开发的相关资料,需要的朋友可以参考下
vue自动化表单实例分析
12-04
技术栈 Vue，Element(默认表单布局)适合中后台项目快速开发 目标 通过json配置快速生成表单的vue plugin。 设计目标 减少html 重复片段 表单字段组件可扩展 事件、联动通过eventbus 解耦 校验可扩展 表单布局...
vue2编写主体页面
5年编程经验的老猿。
04-28 450
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 558
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
gaoyu007的博客
04-28 335
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
Vue Canvas图片水印的绘制 图片加水印
生产队的驴
04-28 180
/
Vue.js(过渡)
qq_74472152的博客
04-28 667
过渡其实就是一个淡入淡出的效果。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
简述什么是vue组件化开发
06-07
Vue 组件化开发是一种将页面拆分成多个独立、可复用的组件，并通过组合这些组件来构建整个页面的开发方式。在 Vue 组件化开发中，每个组件都是一个独立的模块，包含自己的 HTML 模板、JavaScript 代码和 CSS 样式，可以在页面中任意组合和嵌套。 Vue 组件化开发的主要优点包括： 1. 提高代码的复用性：将页面拆分成多个组件，可以让每个组件都具有独立的功能和样式，并可以在不同的页面中复用。 2. 提高代码的可维护性：将页面拆分成多个组件，可以让每个组件都具有独立的功能和样式，便于开发和维护。 3. 提高开发效率：将页面拆分成多个组件，可以让开发人员同时进行不同的组件开发，从而提高开发效率。 在 Vue 组件化开发中，每个组件都是一个 Vue 实例，可以通过 props 属性和自定义事件来实现组件之间的数据传递和通信。同时，Vue 还提供了 slot 插槽和 mixin 混入等高级特性，可以让开发人员更加灵活地组合和重用组件。 下面是一个简单的 Vue 组件示例，用于演示如何实现一个基本的组件： ``` <template> <div> <h1>{{ title }}</h1> <button v-on:click="increment">{{ count }}</button> </div> </template> <script> export default { props: { title: { type: String, required: true }, count: { type: Number, default: 0 } }, methods: { increment() { this.$emit('increment'); } } }; </script> ``` 在上面的代码中，我们定义了一个名为 `Counter` 的组件，包含一个标题和一个计数器。组件通过 props 属性接收父组件传递的数据，并通过 emit 方法触发自定义事件。最后将组件注册到 Vue 实例中，即可在页面中使用该组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值