VUE组件

最新推荐文章于 2024-08-15 13:48:12 发布
最新推荐文章于 2024-08-15 13:48:12 发布
阅读量272 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qixiang_chen/article/details/86522133
版权

介绍几种VUE组件定义方法

定义VUE 字符串组件

	Vue.component('order-item',
		{
			//定义VUE组件的属性名称
		 	props: ['items','prdtlist'],
			template:
				'<table>'+
				'<tr>'+
				'	<td colspan="10">'+
				'		订单明细'+
				'	</td>'+
				'</tr>'+
				'<tr>'+
				'	<th>主键</th>'+
				'	<th>产品</th>'+
				'	<th>数量</th>'+
				'	<th>价格</th>'+
				'	<th>金额</th>'+
				'	<th>操作</th>'+
				'</tr>'+
				'<tr v-for="oi in items">'+//遍历数据模型
				'	<td>{{oi.id}}</td>'+
				'	<td>'+
				'		<select v-model="oi.prdtId">'+//绑定产品下拉框
				'			<option v-for="p in prdtlist" :value="p.code">{{p.name}}</option>'+
				'		</select>'+
				'	</td>'+
				'	<td><input type="text" v-model="oi.num"/></td>'+
				'	<td><input type="text" v-model="oi.price"/></td>'+
				'	<td>{{oi.num*oi.price}}</td>'+
				'	<td><button v-on:click="dodelete(oi.uuid)">删除</button></td>'+//绑定事件处理
				'</tr>'+
			'</table>	'
		}
	);

使用VUE组件

		<!-- 使用VUE组件显示订单明细列表 -->
		<order-item v-bind:items="order.items"
			v-bind:prdtlist="prdtlist"></order-item>

订单页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表</title>
<link rel="stylesheet" type="text/css" href="/static/js/base.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/base.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	function doadd()
	{
		$('#orderadd').css('display','block');
	}
	function doclose()
	{
		$('#orderadd').css('display','none');
	}
	function additem()
	{
		vue.order.items.push({
			id:'',
			prdtId:'1',
			uuid:Math.random()
		});
	}
	function openorder(id)
	{
		$('#orderadd').css('display','block');
		vue.loadorder(id);
	}
</script>
</head>

<body>
	<div id="app">
	<input type="button" value="添加" onclick="doadd()"/>
	<table>
		<tr>
			<th>全选</th>
			<th>名称</th>
			<th>时间</th>
			<th>金额</th>
			<th>省份</th>
			<th>地区</th>
			<th>县市</th>
		</tr>
		<tr v-for="o in orderlist">
			<td>{{o.id}}</td>
			<td><a v-bind:href="'javascript:openorder(\''+o.id+'\')'">{{o.name}}</a></td>
			<td>{{o.ts}}</td>
			<td>{{o.amount}}</td>
			<td>{{o.provinceName}}</td>
			<td>{{o.cityName}}</td>
			<td>{{o.countyName}}</td>
		</tr>
	</table>

	<div class="pdiv" v-html="pagehtml"></div>

	<div id="orderadd" style="display:none">
		<table>
			<tr>
				<td colspan="2">
					订单主表
					<input type="button" value="关闭" onclick="doclose()"/>
					<input type="button" value="添加订单明细" onclick="additem()"/>
					<input type="button" value="保存订单" v-on:click="saveorder()"/>
				</td>
			</tr>
			<tr>
				<td>名称</td>
				<td><input type="text" v-model="order.name"/></td>
			</tr>
			<tr>
				<td>时间</td>
				<td><input type="text" v-model="order.ts"/></td>
			</tr>
			<tr>
				<td>金额</td>
				<td><input type="text" v-model="order.amount"/></td>
			</tr>
			<tr>
				<td>省份</td>
				<td>
					<select v-model="order.provinceCode" v-on:change="selectCity()">
						<option v-for="p in provicelist" v-bind:value="p.code">{{p.name}}</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>地区</td>
				<td>
					<select v-model="order.cityCode" v-on:change="selectCounty()">
						<option v-for="p in citylist" :value="p.code">{{p.name}}</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>县市</td>
				<td>
					<select v-model="order.countyCode">
						<option v-for="p in countylist" :value="p.code">{{p.name}}</option>
					</select>
				</td>
			</tr>
		</table>
		<!-- 使用VUE组件显示订单明细列表 -->
		<order-item v-bind:items="order.items"
			v-bind:prdtlist="prdtlist"></order-item>
	</div>
	
	</div>
	
	<script>
	Vue.component('order-item',
		{
			//定义VUE组件的属性名称
		 	props: ['items','prdtlist'],
			template:
				'<table>'+
				'<tr>'+
				'	<td colspan="10">'+
				'		订单明细'+
				'	</td>'+
				'</tr>'+
				'<tr>'+
				'	<th>主键</th>'+
				'	<th>产品</th>'+
				'	<th>数量</th>'+
				'	<th>价格</th>'+
				'	<th>金额</th>'+
				'	<th>操作</th>'+
				'</tr>'+
				'<tr v-for="oi in items">'+//遍历数据模型
				'	<td>{{oi.id}}</td>'+
				'	<td>'+
				'		<select v-model="oi.prdtId">'+//绑定产品下拉框
				'			<option v-for="p in prdtlist" :value="p.code">{{p.name}}</option>'+
				'		</select>'+
				'	</td>'+
				'	<td><input type="text" v-model="oi.num"/></td>'+
				'	<td><input type="text" v-model="oi.price"/></td>'+
				'	<td>{{oi.num*oi.price}}</td>'+
				'	<td><button v-on:click="dodelete(oi.uuid)">删除</button></td>'+//绑定事件处理
				'</tr>'+
			'</table>	'
		}
	);
	

	var vue = new Vue({
		el:'#app',
		data:{
			orderlist:{},
			order:{
				items:[]
			},
			provicelist:[],
			citylist:{},
			countylist:{},
			prdtlist:[{code:1,name:'手机'},{code:2,name:'笔记本'},{code:3,name:'数码相机'}],
			total:0,
			pagesize:1,
			pagehtml:''
		},
		methods:{
			selectCity:function()
			{
				var _this = this;
				axios.get('/city.action', {
				    params: {
				    	pcode: this.order.provinceCode
				    }
				  })
				  .then(function (response) {
					  _this.citylist = response.data;
					  _this.order.cityCode=_this.citylist[0].code;
						return axios.get('/county.action', {
						    params: {
						    	city: _this.order.cityCode
						    }
						  });
				})
				.then(function (countyData)
				{
					  _this.countylist = countyData.data;
					  _this.order.countyCode=_this.countylist[0].code;
				});
			},
			selectCounty:function()
			{
				var _this = this;
				axios.get('/county.action', {
				    params: {
				    	city: this.order.cityCode
				    }
				  })
				  .then(function (response) {
					  _this.countylist = response.data;
					  _this.order.countyCode=_this.countylist[0].code;
				})
			},
			loadaddress:function(province,city,county)
			{
				//PromiseAPI
				var _this = this;
				axios.get('/province.action')
				  .then(function (response) {
					  _this.provicelist = response.data;
					  
						//设置默认省份
						if(province=='' || province == null)
						{
							_this.order.provinceCode=_this.provicelist[0].code;
						}
						//根据默认省份装载地区
						return axios.get('/city.action', {
						    params: {
						    	pcode: _this.order.provinceCode
						    }
						  })
				  })
				 .then(function (response) {
					  _this.citylist = response.data;
					  
						//判断地区是否为空
						if(city == '' || city == null)
						{
							_this.order.cityCode = _this.citylist[0].code;
						}
						//装载县市
						return axios.get('/county.action', {
						    params: {
						    	city: _this.order.cityCode
						    }
						  })
				 })
				.then(function (response) {
					  _this.countylist = response.data;
					  if(county == '' || county == null)
						  _this.order.countyCode=_this.countylist[0].code;
				})
				.catch(function (error){
					alert(error)
				});
			
			},
			dodelete:function(id)
			{
				var len = this.order.items.length;
				for(var i=0;i<len;i++)
				{
					if(this.order.items[i].uuid == id)
					{
						this.order.items.splice(i,1);
					}
				}
			},
			saveorder:function()
			{
				var _this = this;
				axios.post('/ordersave.action', _this.order)
				  .then(function (response) {
					  _this.loadorderlist();
					  _this.loadorder(_this.order.id);
				})
			},
			loadorderlist:function(page,rows)
			{
				var _this = this;
				axios.get('/orderlist.action', {
				    params: {
				      page: page,
					  rows: rows
				    }
				  })
				  .then(function (response) {
					  _this.total = response.data.total;
					  _this.orderlist = response.data.rows;

					  //_this.pagehtml = vuepagediv(_this.total,_this.pagesize,page,'vue.loadorderlist');
					  _this.pagehtml = pagedivjs('vue.loadorderlist',page,_this.pagesize,_this.total);
				});
			},
			loadorder:function(id)
			{
				var _this = this;//this 代表VUE实例对象
				axios.get('/loadorder.action', {
				    params: {
				      id: id
				    }
				  })
				  .then(function (response) {
					  _this.order = response.data;
					  _this.loadaddress(_this.order.provinceCode,_this.order.cityCode,
							  _this.order.countyCode);
				});
			}
		},
		beforeMount:function()
		{
			this.loadorderlist(1,1);
			this.loadaddress('','','');
		}
	})
	</script>
	
</body>
</html>

VUE 通用JS分页工具方法

/**
 * 使用VUE前台分页公共方法
 * @param js 点击页面调用JS方法
 * @param page 查询页码
 * @param rows 每页显示记录数
 * @param total 总记录数
 * @returns {String}
 */
function pagedivjs(js,page,rows,total)
{
	var pages = 0;
	if(total%rows==0)
		pages = parseInt(total/rows);
	else
		pages = parseInt(total/rows) + 1;
	var pageDiv = "<div id='pagediv'>";
	page=1;
	pageDiv = pageDiv + "<a href='javascript:"+js+"("+page+","+rows+");'>首页</a>";
    page = (page==1)?1:(page-1);
    pageDiv = pageDiv + "<a href='javascript:"+js+"("+page+","+rows+");'>上一页</a>";
    for(var i=1;i<=pages;i++)
    {
        if(i == page)
        	pageDiv = pageDiv + "<a href='javascript:"+js+"("+i+","+rows+");'><b><font color='red'>"+i+"</font></b></a>&nbsp;";
        else
        	pageDiv = pageDiv + "<a href='javascript:"+js+"("+i+","+rows+");'>"+i+"</a>&nbsp;";
    }
    page = (page==pages)?pages:(page+1);
    pageDiv = pageDiv + "<a href='javascript:"+js+"("+page+","+rows+");'>下一页</a>";
    //定义尾页连接
    page = pages;
    pageDiv = pageDiv + "<a href='javascript:"+js+"("+page+","+rows+");'>尾页</a>";
    pageDiv = pageDiv + "&nbsp;&nbsp;&nbsp;&nbsp;第"+page+"/"+pages+"页";
    pageDiv = pageDiv + "&nbsp;&nbsp;&nbsp;&nbsp;共"+total+"条记录";
    pageDiv = pageDiv + "</div>";
    return pageDiv;
}

定义VUE 字面模板组件(使用倒引号)

	//第二种VUE组件定义方式 模板字面量("反引号")
	Vue.component('order-item2',
		{
			//定义VUE组件的属性名称
		 	props: ['items','prdtlist'],
			template:`
				<table>
				<tr>
					<td colspan="10">
						订单明细
					</td>
				</tr>
				<tr>
					<th>主键</th>
					<th>产品</th>
					<th>数量</th>
					<th>价格</th>
					<th>金额</th>
					<th>操作</th>
				</tr>
				<tr v-for="oi in items">
					<td>{{oi.id}}</td>
					<td>
						<select v-model="oi.prdtId">
							<option v-for="p in prdtlist" :value="p.code">{{p.name}}</option>
						</select>
					</td>
					<td><input type="text" v-model="oi.num"/></td>
					<td><input type="text" v-model="oi.price"/></td>
					<td>{{oi.num*oi.price}}</td>
					<td><button v-on:click="dodelete(oi.uuid)">删除</button></td>
				</tr>
			</table>`
		}
	);

VUE组件定义方式 X-Templates

	
	<script type="text/x-template" id="orderitem-template">
				<table>
				<tr>
					<td colspan="10">
						订单明细
					</td>
				</tr>
				<tr>
					<th>主键</th>
					<th>产品</th>
					<th>数量</th>
					<th>价格</th>
					<th>金额</th>
					<th>操作</th>
				</tr>
				<tr v-for="oi in items">
					<td>{{oi.id}}</td>
					<td>
						<select v-model="oi.prdtId">
							<option v-for="p in prdtlist" :value="p.code">{{p.name}}</option>
						</select>
					</td>
					<td><input type="text" v-model="oi.num"/></td>
					<td><input type="text" v-model="oi.price"/></td>
					<td>{{oi.num*oi.price}}</td>
					<td><button v-on:click="dodelete(oi.uuid)">删除</button></td>
				</tr>
			</table>
    </script>


	//第三种VUE组件定义方式 X-Templates
	Vue.component('order-item3',
		{
			template: '#orderitem-template',
			//定义VUE组件的属性名称
		 	props: ['items','prdtlist']
		}
	);

VUE组件定义方式 内联模板

	//第四种VUE组件定义方式  内联模板
	Vue.component('order-item4',
		{
			props: ['items','prdtlist']
		}
	);

		<!-- 使用VUE组件显示订单明细列表 -->
		<order-item4 v-bind:items="order.items"
			v-bind:prdtlist="prdtlist" inline-template>
<table>
				<tr>
					<td colspan="10">
						订单明细
					</td>
				</tr>
				<tr>
					<th>主键</th>
					<th>产品</th>
					<th>数量</th>
					<th>价格</th>
					<th>金额</th>
					<th>操作</th>
				</tr>
				<tr v-for="oi in items">
					<td>{{oi.id}}</td>
					<td>
						<select v-model="oi.prdtId">
							<option v-for="p in prdtlist" :value="p.code">{{p.name}}</option>
						</select>
					</td>
					<td><input type="text" v-model="oi.num"/></td>
					<td><input type="text" v-model="oi.price"/></td>
					<td>{{oi.num*oi.price}}</td>
					<td><button v-on:click="dodelete(oi.uuid)">删除</button></td>
				</tr>
			</table>
		</order-item4>

VUE组件定义方式 渲染方法(Render)

	Vue.component('order-item5',
		{
			props: ['items','prdtlist'],
			render() {
	            return 
					<table>
					<tr>
						<td colspan="10">
							订单明细
						</td>
					</tr>
					<tr>
						<th>主键</th>
						<th>产品</th>
						<th>数量</th>
						<th>价格</th>
						<th>金额</th>
						<th>操作</th>
					</tr>
					<tr v-for="oi in items">
						<td>{{oi.id}}</td>
						<td>
							<select v-model="oi.prdtId">
								<option v-for="p in prdtlist" :value="p.code">{{p.name}}</option>
							</select>
						</td>
						<td><input type="text" v-model="oi.num"/></td>
						<td><input type="text" v-model="oi.price"/></td>
						<td>{{oi.num*oi.price}}</td>
						<td><button v-on:click="dodelete(oi.uuid)">删除</button></td>
					</tr>
				</table>
	        }
		}
	);


		<order-item5 v-bind:items="order.items"
			v-bind:prdtlist="prdtlist">

		</order-item5>

单文件组件VUE组件

<template>
    <div>
        <DataGrid :data="data" :rowCss="css" :clickToEdit="true" editMode="row" @rowDblClick="rowClick" style="height:250px">
            <GridColumn field="itemid" title="Item ID" :editable="true"></GridColumn>
            <GridColumn field="name" title="Name"></GridColumn>
            <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
            <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
            <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
            <GridColumn field="status" title="Status" align="center"></GridColumn>
        </DataGrid>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    {"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
                    {"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
                    {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
                    {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
                    {"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
                    {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
                    {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
                    {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
                    {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
                    {"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
                ],
				css:{
					
				}
            }
        },
		methods: {
			rowClick: (row) => {
				this.$messager.alert({
					title: "Info",
					icon: "info",
					msg: "Here is a info message!"
				});
				return null;
			}
		}
    }
</script>

<style scoped>

</style>
华科易迅
关注
专栏目录
2.简单地使用vue组件
official business
06-25 206
开始： 之前的vue指令，操作的都是单个的html标签，与此对应的，还有将多个标签组到一起的组件，即一个自定义的组件标签内部，是多个原始的html标签。 组件创建： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo-component</title> <script src="https://cdn.jsdeli.
vue组件
weixin_45701868的博客
05-28 1万+
目录 1.Vue组件的定义、注册方式和模板使用 1.1 组件的定义 定义组件 定义组件名的方式有两种 1.2 组件的分类 1.3 引用模版 2. 组件间数据的通信 2.1 父子组件 2.2 组件间数据通信 2.2.1 子组件访问父组件的数据（父传子） 2.2.2 父组件访问子组件的数据（子传父） 2.2.3 非父子通信 2.2.4 总结组件之间的通讯 2.3 单向数据流 3.过滤器 过滤器分为两种 过滤器使用地方两个位置 全局过滤器 局部过滤器 4.路由 4.1 定
vue组件的使用
RiceTZ的博客
04-09 268
vue组件父子页面相互传值及调用方法 参考：https://www.wanpishe.top/detail?blogId=94242c65-ceec-4010-86da-0eba62ebeef8
Vue3列表（List）
最新发布
Mr Dear的博客
08-15 1175
通用列表，支持：是否显示分割线；是否显示边框；三种尺寸；加载中；暂无数据；显示悬浮样式；列表添加操作项；自定义样式；竖排分页列表；总之；功能丰富，简单易用😁😁
【vue组件使用】
落雪映青衣的博客
07-24 178
vue组件
VUE组件的基本使用
guoguo0717的博客
05-25 1849
什么是组件化？ ◼ 我们将一个完整的页面分成很多个组件。 ◼ 每个组件都用于实现页面的一个功能块。 ◼ 而每一个组件又可以进行细分。 ◼ 人面对复杂问题的处理方式： ◼ 任何一个人处理信息的逻辑能力都是有限的 ◼ 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 ◼ 但是，我们人有一种天生的能力，就是将问题进行拆解。 ◼ 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 ◼ 组件化也是类似的思想： ◼ 如果我们将一个页面中所有的处理
vue的组件及其使用方法
吟游诗人——吟唱生命的不朽
01-18 1295
vue作为一款优秀的前端开发框架，在组件方面确实比纯粹的html要方便得多。 以往在敲前端代码的时候，我们不可避免的要在不同的页面使用同样的代码，比如导航栏、侧边栏等。 虽然可以在一个页面中内置另外的页面，但是这样的操作也是相当麻烦，而我经常为了偷懒便直接粘贴复制了，而这却导致了页面代码非常冗长且冗余严重，修改起来也是非常的麻烦，往往一个地方修改要改好几个页面。 而今，学了vue的组件，便可以很轻...
vue-remote-import:通过URL导入远程VUE组件
05-06
该模块用于通过url加载远程VUE组件。 因此，您可以在路由器，全局或本地组件参考中使用它。 这个怎么运作 它将使用import-html-entry包加载html文件，因此html文件就像组件的最小描述。 然后它将解析它，以获得html...
vue组件培训ppt
01-09
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
vue组件-自定义滚动条
06-30
vue组件-自定义滚动条
vue 组件
酷爱前端的小陈博客
04-22 1778
1. 什么是组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的UI 结构封装为组件，从而方便项目的开发和维护。 2. vue 中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。 3. vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的JavaScrip.
vue-todolist，vue小目标列表实现，vue任务列表实现
12-09
本资源99.999%可以用。因为我知道下载下来不能用有多难受！ vue-todolist包括三个版本，一个是脚手架的，一个是普通vue的，一个是使用vue组件编写的。不能用的，一定是环境没有搭配好，我的博客里会有相关的介绍和本资源的简介图，可以看一下。（脚手架删除少传了一个参数 const {todo,index,deleteTodo}=this，如果下载了，注意加一下，图在我博客里）
vue-list：:rainbow:一种构建无限多加载列表组件的解决方案
02-06
序 GitHub上各款移动端ui框架都会包含滚动加载功能的组件，但通常只能提供很基础的功能，例如简单地监听滚动条并在满足条件的时候触发，然后通过某些方法把新的元素加入到页面末尾。这样的确可以解决分页加载数据的问题，但是在一个数据量比较大的情况下，页面元素会增加得很容易快，这时就会导致性能问题，想象一下，如果一个移动端页面上有1万条数据需要显示在页面的时候，是多么恐怖的事情。 然后，这个repo并不是要提供一个完整的滚动加载组件，而是，提供一种在数据量大的情况下，对列表的滚动加载进行优化的解决方案。 ps：我相信有很多人知道方法，但也应该有多余人还不了解。 思考 首先，为何要对数据量大的列表页
Vue-order:订餐系统应用
03-11
Vue顺序 在线演示 老版本 执照 麻省理工学院:copyright:2015-2016老兵
vue-order-admin:基于vue的订单管理后台
03-20
vue-order-admin 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint
vue组件的基本使用方法
m0_58310590的博客
05-28 1613
封装可重用的代码。
vue组件以及组件运用的方式
有问题可关注公众号：前端研究院 后台输入问题回复
12-05 2416
组件的运用让代码重用性更强大。 自定义组件，每一个组件都有 这些东西 1.全局定义（所有的vue实例都能使用） Vue.component('my-btn',{ })  2.局部定义（用的较多）在 new Vue的构造函数中定义    new Vue({       data:{},//对象       methods:{},      componen
Vue 组件封装之 List 列表
热门推荐
杏子
06-16 2万+
实现 List 列表布局排版。
前端Vue列表组件 list组件：实现高效数据展示与交互
chenchuang0128的博客
03-13 2194
在前端开发中，列表组件是展示数据的重要手段。本文将介绍如何使用Vue.js构建一个高效、可复用的列表组件，并探讨其在实际项目中的应用。
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值