全部章节 >>>>

一、栅格组件

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 响应式栅格，可为栅格数或一个包含其他属性的对象

栅格组件的行属性

属性 说明
align flex布局下的垂直对齐方式：top、middle和bottom
gutter 栅格间隔，可以写成像素值或支持响应式的对象写法{ xs: 8, sm: 16, md: 24}
justify flex布局下的水平排列方式：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",

						adress: ""

					}

				},

				methods: {

					doSave: function() {

						this.$message.info("订单保存成功！");

					}

				}

			});

		</script>

	</body>

</html>

2、选择器组件使用

选择器组件实现下拉选择功能。一般应用的情况是：

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于5项），建议直接将选项平铺。

选择器组件的常用属性

属性 说明
allowClear 支持清除
autoClearSearchValue 是否在选中项后清空搜索框，只在mode为multiple或tags时有效
autoFocus 默认获取焦点
defaultValue 指定默认选中的条目
dropdownClassName 下拉菜单的className属性
allowClear 支持清除
autoClearSearchValue 是否在选中项后清空搜索框，只在mode为multiple或tags时有效
autoFocus 默认获取焦点
defaultValue 指定默认选中的条目
dropdownClassName 下拉菜单的className属性

选择器组件的常用事件

事件 说明
blur 失去焦点的时触发事件
change 选中option或input的value变化（combobox模式下）时，触发事件
deselect 取消选中时触发事件，参数为选中项的value（或key）值，仅在multiple或tags模式下生效
focus 获得焦点时触发事件
search 文本框值变化时触发事件
select 被选中时触发事件，参数为选中项的value（或key）值

示例：使用选择器实现省市联动功能

<!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">

			<h3>省市联动</h3>

			<a-select v-model="selectProvince" style="width: 120px" @change="doChange">

				<a-select-option v-for="province in provinceData" :key="province">{{province}}

				</a-select-option>

			</a-select>

			<a-select v-model="selectCity" style="width: 120px">

				<a-select-option v-for="city in cities" :key="city">{{city}}</a-select-option>

			</a-select>

		</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: {

					provinceData: ["湖北", "湖南"],

					cityData: {

						"湖北": ["武汉", "襄阳", "宜昌"],

						"湖南": ["长沙", "岳阳", "永州"],

					},

					cities: ["武汉", "襄阳", "宜昌"],

					selectCity: "武汉",

					selectProvince:"湖北"

				},

				methods: {

					doChange: function(value) {

						this.cities = this.cityData[value];

						this.selectCity = this.cityData[value][0];

					}

				}

			});

		</script>

	</body>

</html>

3、单选框组件使用

单选框组件用于在多个备选项中选中单个状态。

和选择器之间的区别是，单选框所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

单选框组件包括两个部分Radio（或RadioButton）和RadioGroup，其中RadioGroup用于包裹一组Radio或RadioButton

Radio和RadioGroup包含的属性如下表所示。

Radio的主要属性

属性 说明
autofocus 自动获取焦点
checked 指定当前是否选中
defaultChecked 初始是否选中
value 根据value进行比较，判断是否选中

RadioGroup的主要属性

属性 说明
defaultValue 默认选中的值
disabled 禁选所有子单选器
name RadioGroup下所有input[type=“radio”]的name属性
options 以配置形式设置子元素
size 大小，只对按钮样式生效，可选值large、default和small
value 用于设置当前选中的值
buttonStyle RadioButton的风格样式，目前有描边和填色两种风格

示例：使用单选框组件实现行星知识测试题。

<!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: 500px;

				margin: 0 auto;

				padding: 15px;

				border: 1px solid #888;

				text-align: center;

			}

		</style>

	</head>

	<body>

		<div id="app">

			<h2>行星知识测试</h2>

			<h4>太阳系中最大的行星是？</h4>

			<a-radio-group v-model="result1">

				<a-radio-button value="a">金星</a-radio-button>

				<a-radio-button value="b">木星</a-radio-button>

				<a-radio-button value="c">水星</a-radio-button>

				<a-radio-button value="d">火星</a-radio-button>

				<a-radio-button value="e">土星</a-radio-button>

			</a-radio-group>

			<h4>太阳系中离太阳最近的行星是？</h4>

			<a-radio-group v-model="result2">

				<a-radio value="a">金星</a-radio>

				<a-radio value="b">木星</a-radio>

				<a-radio value="c">水星</a-radio>

				<a-radio value="d">火星</a-radio>

				<a-radio value="e">土星</a-radio>

			</a-radio-group>

			<h4>太阳系中离地球最近的行星是？</h4>

			<a-radio-group v-model="result3" :options="items"> </a-radio-group>

			<br />

			<a-button type="primary" @click="doSubmit">提交</a-button>

		</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: {

					items: [{

						label: "金星",

						value: "a"

					}, {

						label: "木星",

						value: "b"

					},{

						label: "水星",

						value: "c"

					},{

						label: "火星",

						value: "d"

					},{

						label: "土星",

						value: "e"

					}],

					result1: "",

					result2: "",

					result3: "",

				},

				methods: {

					doSubmit: function() {

						var score = 10;

						if (this.result1 == "b") {

							score += 30;

						}

						if (this.result2 == "c") {

							score += 30;

						}

						if (this.result3 == "a") {

							score += 30;

						}

						this.$message.info("您的得分：" + score);

					}

				}

			});

		</script>

	</body>

</html>

4、实践练习

三、表单组件

1、表单组件使用

表单组件是具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框和下拉选择框等元素。表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。表单组件还提供了以下3种排列方式：

  • 水平排列：标签和表单控件水平排列（默认）。
  • 垂直排列：标签和表单控件上下垂直排列。
  • 行内排列：表单项水平行内排列。

使用Form.create处理表单使其具有自动收集数据并校验的功能。

表单组件基本结构如下所示：

<a-form>

  <a-form-item  label="输入提示文本">

    <a-input v-decorator="[

      “字段名”,      {        rules: [{验证规则,message: "出错提示"}]      }

    ]" />

  </a-form-item>

</a-form>

其中，< a-form-item/>表示表单域（Form.Item）。
一个表单域放一个被v-decorator属性装饰过的子元素，当有多个被装饰过的子元素时，help属性、required属性和validateStatus属性无法自动生成。

表单域的属性

属性 说明
colon 配合label属性使用，表示是否显示label后面的冒号
extra 额外的提示信息，和help类似，当需要错误信息和提示同时出现时，可以使用这个属性
hasFeedback 配合validateStatus属性使用，展示校验状态图标，建议只配合输入框组件使用
help 提示信息，如不设置，则会根据校验规则自动生成
label label标签的文本
labelCol label标签布局，同组件，设置span和offset值，如{span: 3, offset: 12}或sm:{span: 3, offset: 12}
required 是否必填，如不设置，则会根据校验规则自动生成
validateStatus 校验状态，如不设置，则会根据校验规则自动生成，可选：success、warning、error和validating

示例：

<!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">

			<a-form :form="form" @submit="doSubmit">

				<a-form-item label="邮件地址">

					<a-input v-decorator="[

						'email',{

							rules:[{

								type:'email',message:'邮件地址格式不正确！',

							},{

								required:true,message:'邮件地址不能为空！'

							}]

						}

					]" />

				</a-form-item>

				<a-form-item label="登录密码">

					<a-input v-decorator="[

				 		'password',{

				 			rules:[{

				 				required:true,message:'登录密码不能为空！'

				 			}]

				 		}

				 	]" type="password" />

				</a-form-item>

				<a-form-item label="确认密码">

					<a-input v-decorator="[

				 		'confirm',{

				 			rules:[{

				 				required:true,message:'确认密码不能为空！'

				 			},{

								validator:compareToFirstPassword,

							}]

				 		}

				 	]" type="password" />

				</a-form-item>

				<a-form-item label="昵称">

					<a-input v-decorator="[

								'nickname',{

									rules:[{

										required:true,message:'昵称不能为空！',whitespance:true

									}]

								}

							]" />

				</a-form-item>

				<a-form-item>

					<a-checkbox v-decorator="['agreement', {valuePropName: 'checked' }]">

						我已同意 <a href="">《系统使用授权协议》</a>

					</a-checkbox>

				</a-form-item>

				<a-form-item>

					<a-button type="primary" html-type="submit">注册</a-button>

				</a-form-item>

			</a-form>

		</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",

				beforeCreate() {

					this.form = this.$form.createForm(this);

				},

				methods: {

					doSubmit(e) {

						var _this = this;

						e.preventDefault(); //取消事假的默认动作

						this.form.validateFieldsAndScroll(function(err, values) {

							if (!err) {

								_this.$message.info("用户注册成功")

								console.log("表单中值", "values")

							}

						});

					},

					compareToFirstPassword(rule, value, callback) {

						var form = this.form;

						if (value && value !== form.getFieldValue("password")) {

							callback("密码输入不一致！")

						} else {

							callback();

						}

					}

				},

			});

		</script>

	</body>

</html>

2、实践练习

四、树形组件

1、树形组件使用

树形组件是按树形呈现数据。

文件夹、组织架构、生物分类以及国家地区等都可以使用树形组件呈现。

使用树形组件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

树形组件的常用属性

属性 说明
treeData 树形组件数据源
autoExpandParent 是否自动展开父节点
checkable 节点前添加Checkbox复选框
defaultCheckedKeys 默认选中复选框的树节点
defaultExpandAll 默认展开所有树节点
disabled 设置树是否禁用
draggable 设置节点是否可拖拽
multiple 设置是否支持点选多个节点
showIcon 设置是否展示树节点标题前的图标
showLine 设置是否展示连接线

树形组件的常用事件

事件 说明
check 点击复选框触发
dragstart 开始拖拽时触发
dragend 结束拖拽时触发
expand 展开/收起节点时触发
load 节点加载完毕时触发
rightClick 在树节点上点击右键触发
select 点击树节点触发

树节点的属性

属性 说明
disableCheckbox 禁用树节点的复选框
disabled 禁用树节点
icon 设置自定义图标
key 树节点的唯一标示
selectable 设置节点是否可被选中
title 树节点标题

示例：

<!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">

			<a-tree checkable v-bind="attrs" @select="this.onSelect" @check="this.onCheck"> </a-tree>

		</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: {

					attrs: {

						treeData: [{

								//节点对象数组，可以包含子节点

								title: "国内新闻",

								key: "new1",

								children: [{

									title: "社会新闻",

									key: "new1-1"

								}, {

									title: "社会新闻",

									key: "new1-2"

								}]

							},

							{

								title: "国内新闻",

								key: "new2",

								children: [{

									title: "社会新闻",

									key: "new2-1"

								}, {

									title: "社会新闻",

									key: "new2-2"

								}]

							}

						],

						defaultExpandedKeys: ["new1", "new2"],

						defaultCheckedKeys: ["new1-2", "new2-2"]

					}

				},

				methods: {

					onSelect(selectedKeys, info) {

						console.log("selected", selectedKeys, info)

					},

					onCheck(checkedKeys, info) {

						console.log("onCheck", checkedKeys, info)

					},

				}

			});

		</script>

	</body>

</html>

示例：

2、实践练习

总结：

Ant Design of Vue的栅格化系统特点是

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

使用选择器组件的情况是

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于5项），建议直接将选项平铺。

表单组件提供了以下3种排列方式：

  • 水平排列：标签和表单控件水平排列（默认）。
  • 垂直排列：标签和表单控件上下垂直排列。
  • 行内排列：表单项水平行内排列。

使用树形组件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】的更多相关文章

  1. Vue.js高效前端开发知识 • 【目录】

    持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...

  2. Vue.js高效前端开发 • 【Ant Design of Vue框架基础】

    全部章节 >>>> 文章目录 一.Ant Design of Vue框架 1.Ant Design介绍 2.Ant Design of Vue安装 3.Ant Design o ...

  3. Vue.js高效前端开发 • 【初识Vue.js】

    全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...

  4. Vue.js高效前端开发 • 【Vue基本指令】

    全部章节 >>>> 文章目录 一.Vue模板语法 1.插值 2.表达式 3.指令概述 4.实践练习 二.Vue绑定类样式和内联样式 1.Vue绑定类样式 2.Vue绑定内联样式 ...

  5. Vue.js高效前端开发 • 【Vue组件】

    全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...

  6. Vue.js高效前端开发 • 【Vue列表渲染】

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

  7. Flask Vue.js全栈开发

    Flask Vue.js全栈开发的 最新完整代码 及使用方式 本系列的最新代码及使用方式将持续更新到: http://www.madmalls.com/blog/post/latest-code/ 1 ...

  8. ant design for vue 解决 vue.esm.js?c5de:628 [Vue warn]: Invalid prop: custom validator check failed for prop "defaultValue". 的错误

    错误重现: 在使用ant design for vue 的选择器插件的时候, 设置默认为为id(为数字) 报错: 解决办法: id为数字, 而defaultValue 的key 值必须为字符串, 将i ...

  9. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

随机推荐

  1. HelloWorldMBean

    package mbeanTest; public interface HelloWorldMBean { public String getHello(); public void setHello ...

  2. Hibernate 错误的问题

    配了好几次的Hibernate,老是在create BeanFactory的时候fail.我是用MyEclipse自带的HIbernate,直接加进去的. private static final T ...

  3. 应用springMVC时如果配置URL映射时如下配置

    应用springMVC时如果配置URL映射时如下配置 [html] view plaincopy<servlet> <servlet-name>appServlet</s ...

  4. Javascript 数组对象常用的API

    常用的JS数组对象API ES5及以前的Api ECMAScript5为数组定义了5个迭代方法,每个方法接收两个参数, 一个是每项运行的函数,一个是运行该函数的作用域对象(可选项),传入这些方法的函数 ...

  5. AOP中环绕通知的写法

    package com.hope.utils;import org.aspectj.lang.ProceedingJoinPoint;/** * @author newcityman * @date ...

  6. ssm+ajax实现登陆

    ssm的搭建见上一章 1.数据协议层 public User selectByLoginnameAndPassword(@Param("loginname")String logi ...

  7. 配置文件管理维护到gitlab上

    一.简介 在日常维护服务器中,会修改配置文件或者相应脚本,在修改前要对文件进行按照日期备份,这样会很麻烦,频繁修改的时候也会懒得去备份多个. 维护脚本分为服务端和客户端,服务端监听端口,接收客户端的采 ...

  8. SWPUCTF 2019 pwn writeup

    来做一下以前比赛的题目,下面两个题目都可以在buu复现(感谢赵总). SWPUCTF_2019_login 32位程序,考点是bss段上的格式化字符串.用惯onegadgets了,而对于32位程序来说 ...

  9. CF1093B Letters Rearranging 题解

    Content 有 \(t\) 次询问,每次询问给定一个字符串 \(s\).定义一个"好的字符串"为不是回文串的字符串.对于每一次询问,求出任意一个重新排列能够得到的"好 ...

  10. jquery Ajax 不执行回调函数success的原因

    jquery Ajax 不执行回调函数success的原因: $.ajax({ type: "post", contentType: "application/json& ...