正文 

当前位置： 首页 > 开发 > java教程

vue.js高效前端开发•antdesignofvue框架进阶(代码片段)

明金同学 明金同学     2022-12-08     510

关键词：

全部章节 >>>>

文章目录

一、栅格组件

1、栅格组件介绍

在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，Ant Design of Vue将整个设计建议区域按照24等分的原则进行划分。

划分之后的信息区块称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见下图6.1所示。设计部分基于盒子的单位来定制盒子内部的排版规则，以保证视觉层面的舒适感。

在这里插入图片描述
栅格组件是布局的栅格化系统，Ant Design of Vue是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。栅格化系统特点：

  • 通过row在水平方向建立一组column（简写col）。
  • 内容应当放置于col内，并且，只有col可以作为row的直接元素。
  • 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建。
  • 如果一个row中的col总和超过24，那么多余的col会作为一个整体另起一行排列。

栅格组件的列属性

属性说明
offset栅格左侧的间隔格数，间隔内不可以有栅格
order栅格顺序，flex布局模式下有效
pull栅格向左移动格数
push栅格向右移动格数
span栅格占位格数，为0时相当于display: none
xs可视区宽度<576px 响应式栅格，可为栅格数或一个包含其他属性的对象
sm可视区宽度≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象
md可视区宽度≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
lg可视区宽度≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
xl可视区宽度≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
xxl可视区宽度≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象

栅格组件的行属性

属性说明
alignflex布局下的垂直对齐方式：top、middle和bottom
gutter栅格间隔，可以写成像素值或支持响应式的对象写法 xs: 8, sm: 16, md: 24
justifyflex布局下的水平排列方式：start、end、center、space-around和space-between
type布局模式，可选flex，在现代浏览器下有效

2、栅格组件使用

示例：基本栅格布局效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/antd.css" />
		<style type="text/css">
			#app
				text-align: center;
				line-height: 50px;
				color: white;
			
			.acol1
				background-color: #7dbcea;
			
			.acol2
				background-color: #108ee9;
			
			.arow
				margin-bottom: 30px;
			
		</style>
	</head>
	<body>
		<div id="app">
			<a-row class="arow">
				<a-col class="acol1" :span="12">col-12</a-col>
				<a-col class="acol2" :span="12">col-12</a-col>
			</a-row>
			<a-row class="arow">
				<a-col class="acol1" :span="8">col-8</a-col>
				<a-col class="acol2" :span="8">col-8</a-col>
				<a-col class="acol1" :span="8">col-8</a-col>
			</a-row>
			<a-row class="arow">
				<a-col class="acol1" :span="6">col-6</a-col>
				<a-col class="acol2" :span="6">col-6</a-col>
				<a-col class="acol1" :span="6">col-6</a-col>
				<a-col class="acol2" :span="6">col-6</a-col>
			</a-row>
		</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue(
				el: "#app"
			)
		</script>
	</body>
</html>

在这里插入图片描述
示例：实现在栅格中的间隔和列偏移效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/antd.css" />
		<style type="text/css">
			#app 
				text-align: center;
				line-height: 50px;
				color: black;
			

			.acol1 
				background-color: #7dbcea;
			

			.gutter-box,.acol2
				background-color: #108ee9;
			

			.arow 
				margin-bottom: 30px;
			
		</style>
	</head>
	<body>
		<div id="app">
			<p>列间隔</p>
			<div>
				<a-row :gutter="16">
					<a-col class="gutter-row" :span="6">
						<div class="gutter-box">col-6</div>
					</a-col>
					<a-col class="gutter-row" :span="6">
						<div class="gutter-box">col-6</div>
					</a-col>
					<a-col class="gutter-row" :span="6">
						<div class="gutter-box">col-6</div>
					</a-col>
					<a-col class="gutter-row" :span="6">
						<div class="gutter-box">col-6</div>
					</a-col>
				</a-row>
			</div>
			<p>列偏移</p>
			<div>
				<a-row class="arow">
					<a-col class="acol1"  :span="8">col-8</a-col>
					<a-col class="acol2" :span="8" :offset="8">col-8</a-col>
				</a-row>
				<a-row class="arow">
					<a-col class="acol1" :span="6" :offset="6">col-6 col-offset-6</a-col>
					<a-col class="acol2" :span="6" :offset="6">col-6 col-offset-6</a-col>
				</a-row>
				<a-row class="arow">
					<a-col class="acol1" :span="12" :offset="6">col-12 col-offset-6</a-col>
				</a-row>
			</div>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue(
				el: "#app"
			)
		</script>
	</body>
</html>

在这里插入图片描述

3、实践练习

二、输入组件

1、输入框组件使用

输入框组件是通过鼠标或键盘输入内容，是最基础的表单域的包装。一般在以下情况使用：

  • 需要用户输入表单域内容时。
  • 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
属性说明
addonAfter设置带后置标签的输入框
addonBefore设置带前置标签的输入框
defaultValue输入框默认内容
disabled是否禁用状态，默认为false
id输入框的唯一标示
prefix设置带有前缀图标的输入框
size输入框大小，标准表单内的输入框大小限制为large。可选值为large、default、small、string和default
suffix设置带有后缀图标的输入框
type声明输入框类型，同原生input标签的type属性一致
value输入框内容

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/antd.css" />
		<style type="text/css">
			#app
				width: 300px;
				margin: 0 auto;
				padding: 15px;
				border: 1px solid #888;
			
		</style>
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>订单录入</legend>
				<p>
					<a-input placeholder="请输入收货人姓名..." v-model="order.name">
						<a-icon slot="prefix" type="user" />
					</a-input>
				</p>
				<p>
					<a-input placeholder="请输入支付密码..." type="password" v-model="order.password">
						<a-icon slot="prefix" type="unlock" />
					</a-input>
				</p>
				<p>
					<a-input placeholder="请输入订单总金额..." defaultValue="0.00" v-model="order.price"><span
							slot="addonBefore">￥</span><span slot="addonAfter">元</span></a-input>
				</p>
				<p>
					<a-input placeholder="请输入收货地址..." type="textarea" v-model="order.address"></a-input>
				</p>
				<p>
					<a-button type="primary" @click="doSave">保存</a-button>
				</p>
			</fieldset>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue(
				el: "#app",
				data: 
					order: 
						name: "",
						password: "",
						price: "0.00",vue.js高效前端开发•vue组件(代码片段)

全部章节>>>>文章目录一、Vue组件介绍1、组件概述2、组件使用步骤3、实践练习一、Vue组件使用1、组件注册2、组件注册语法糖3、使用script或template标签4、组件的el和data选项5、实践练习三、组件之间的通信1、父组件和子...  查看详情  

                

vue.js高效前端开发•vue基本指令(代码片段)


全部章节>>>>文章目录一、Vue模板语法1、插值2、表达式3、指令概述4、实践练习二、Vue绑定类样式和内联样式1、Vue绑定类样式2、Vue绑定内联样式3、实践练习三、条件渲染指令1、v-if和v-else2、v-show3、实践练习四、事件绑...  查看详情  

                

vue.js高效前端开发•vue列表渲染(代码片段)


全部章节>>>>文章目录一、v-for指令1、v-for指令使用2、实践练习（待更新）二、计算属性1、计算属性创建和使用2、实践练习（待更新）三、侦听属性1、侦听属性创建和使用2、实践练习（待更新）...  查看详情  

                

vue.js高效前端开发•antdesignofvue框架基础(代码片段)


全部章节>>>>文章目录一、AntDesignofVue框架1、AntDesign介绍2、AntDesignofVue安装3、AntDesignofVue组件使用4、实践练习二、布局组件1、布局组件介绍2、布局组件使用3、导航菜单组件使用4、面包屑组件使用5、实践练习三、按钮...  查看详情  

                

vue.js高效前端开发•antdesignofvue框架基础(代码片段)


全部章节>>>>文章目录一、AntDesignofVue框架1、AntDesign介绍2、AntDesignofVue安装3、AntDesignofVue组件使用4、实践练习二、布局组件1、布局组件介绍2、布局组件使用3、导航菜单组件使用4、面包屑组件使用5、实践练习三、按钮...  查看详情  

                

入门到精通❤️「java工程师全栈知识路线」


持续更新中…Vue前端开发章节内容实践练习Vue.js高效前端开发•（实践练习）第1章Vue.js高效前端开发•【一、初识Vue.js】第2章Vue.js高效前端开发•【二、Vue基本指令】第3章Vue.js高效前端开发•【三、Vue列表渲染】第4章V...  查看详情  

                

vue.js：轻量高效的前端组件化方案（转载）


摘要：Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，目前在GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的介绍。Vue.js是我在2014年2月开源的...  查看详情  

                

vue.js高效前端开发•antdesignofvue框架进阶(代码片段)


全部章节>>>>文章目录一、栅格组件1、栅格组件介绍2、栅格组件使用3、实践练习二、输入组件1、输入框组件使用2、选择器组件使用3、单选框组件使用4、实践练习三、表单组件1、表单组件使用2、实践练习四、树形组...  查看详情  

                

vue.js高效前端开发•antdesignofvue框架进阶(代码片段)


全部章节>>>>文章目录一、栅格组件1、栅格组件介绍2、栅格组件使用3、实践练习二、输入组件1、输入框组件使用2、选择器组件使用3、单选框组件使用4、实践练习三、表单组件1、表单组件使用2、实践练习四、树形组...  查看详情  

                

vue+springboot从零开发bbs项目---前端篇（一）


...理准备的基于Vue2.0的桌面端组件库。3.axios易用、简洁且高效的http库。4.vue-routerVue.js官方的路由管理器。5.VuexVuex是一个专为Vue.js应用程序开发的状态管理模式。6.font-awesome提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及...  查看详情  

                

前端开发之走进vue.js


Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通过Vue.js来构建一个中大型的前端项目，同...  查看详情  

                

vue成大学核心课程


...业技术学院正式把Vue作为核心课程，课程名称叫《VUE高效前端开发》。截图自湖南工程职业技术学校官方从课程开发标准来看，该门课程被定为必修课程&  查看详情  

                

现在主流的前端框架都有哪些？


Bootstrap(经典)2.Vue(灵活高效的JS框架)3.React(组件开发)4.angular(web应用开发框架)5.typescript(功能强大，语法简洁,JS的扩展)6.Element(快速搭建一个优雅的网站)7.webpack&parcel(应用打包工具)8.webassembly(模块编程，四大浏览器联袂支持)9.Layu...  查看详情  

                

vue学习之路（基础篇）(代码片段)


...框架--摘自官网#渐进式1.易用htmlcssjavascript上手比较容易2.高效开发前端页面非常高效3.灵活开发灵活多样性4.渐进式：a.易用vue.js上手非常快b.灵活vue生态系统非常强大vue基础核心vue组件c.高效vue体积小20kb超快虚拟dom(网页形成d...  查看详情  

                

前端框架2019云开发


...重绘和重排，从而使用户获得流畅顺滑的体验。依托Vue.js高效的组件化方案，MintUI做到了轻量化。即使全部引入，压缩后的文件体积也仅有~30kb(JS+CSS)gzip。注意：MUI不同于Mint-ui，Mui只是开发出来一套好用的代码片段，里面提供了...  查看详情  

                

维基媒体宣布采用vue.js进行前端开发


...在官网宣布，Vue.js被选为维基媒体官方JavaScript框架。前端架构评估工作于2019年正式启动，作为平台演进计划（PlatformEvolution）的一部分，目标则是希望通过技术为维基媒体平台赋能和优化开发流程。据官方消...  查看详情  

                

web前端，初识vue.js(代码片段)


...识点vue.js是一个以数据处理为核心的前端框架，具有高效的数据绑定和灵活的组件应用的特性(模块化，组件.vue)模式1：MVVM（vue.js）M：model数据层V:view视图层(html+css)VM：viewMode  查看详情  

                

维基媒体宣布采用vue.js进行前端开发


...在官网宣布，Vue.js被选为维基媒体官方JavaScript框架。前端架构评估工作于2019年正式启动，作为平台演进计划（PlatformEvolution）的一部分，目标则是希望通过技术为维基媒体平台  查看详情