今天继续整理vue的常见操作。。。
一、样式操作
1、样式处理
vue中标签元素的样式主要区分为两种:
固定样式:传统的css语法,直接修饰标签元素
动态样式:可能会根据不同的条件发生变化,需要根据vue变量数据实现控制
(1)class样式绑定
共有三种:字符串拼接、数组格式、对象格式(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box,
#box2,
#box3,
#box4,
#box5 {
width: 500px;
height: 200px;
}
.bg-dark {
background: #333;
color: white;
}
.bg-light {
background: #eee;
color: #333;
box-shadow: #000 0 0 2px;
}
.fontStyle {
font-size: 22px;
font-weight: 600;
}
</style>
</head>
<body>
<div id="app">
<!-- <div id="box" class="bg-dark fontStyle"> -->
<!-- 1、class样式 字符串拼接方式:很少使用 -->
<div id="box" :class="'bg-dark' +' '+'fontStyle'">
class样式设置
</div>
<!-- 2、class样式 数组格式 使用数组,中间必须使用逗号隔开,如果对数组中的类名添加引号,则样式不会起效果,无法识别vue对象中data定义的类名 -->
<div id="box2" :class="[bgLight,fs]">
class样式 数组格式
</div>
<!-- 3、class样式,对象格式,可以通过变量控制某个眼视光hi是否生效 ,是最常用的样式设置方式,使用的时候需要注意 -->
<!-- :class ='{key:value}' 以键值对的形式存在,key就是样式名称(类名、id名、。。。)并不是vue对象中声明的变量 -->
<div id="box3" :class="{'bg-dark':isDark,fontStyle:isFs}">
<!-- 注意事项:如果样式名称包含中划线,则需要在样式名称上添加引号;反之不需要 -->
class样式 对象格式
</div>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
bgLight: 'bg-light',
bgDark: 'bg-dark',
fs: 'fontStyle',
isDark: true,
isFs: true
}
})
</script>
</body>
</html>
(2)style样式
主要有对象格式、表达式样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box,
#box2,
#box3,
#box4,
#box5 {
width: 500px;
height: 200px;
}
.bg-dark {
background: #333;
color: white;
}
.bg-light {
background: #eee;
color: #333;
box-shadow: #000 0 0 2px;
}
.fontStyle {
font-size: 22px;
font-weight: 600;
}
</style>
</head>
<body>
<div id="app">
<!-- 1、style样式 对象格式:可以将样式直接编写到表达式中,如果存在符合属性,使用驼峰命名法,也是使用键值对,对应的key值时设置的样式属性,value是在vue对象中声明的属性-->
<div id="box4" :style="{backgroundColor:bgColor,color:fontColor}">
将样式直接编写到表达式中
</div>
<!-- 1、style样式,在表达式中,直接填写一个对象变量,在vue对象中写的样式属性,与css样式保持一致,如果带有中划线,使用驼峰命名法 -->
<div id="box5" :style="styleObj">
直接写一个对象变量
</div>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
bgColor: 'skyblue',
fontColor: 'white',
styleObj: {
backgroundColor: 'pink',
color: '#333',
fontSize: '28px'
}
}
})
</script>
</body>
</html>
2、侦听器
可以监听一个受控制的变量(data选项中声明的变量)内部的数据是否发生更新,一旦发生更新就可以被监听(自动执行),并执行一些后续的操作!
注意:可以监听对象,但是要写完整语法,设置深度监听器,deep:true.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>普通变量==>:{{message}}</p>
<p>对象数据==>:{{loginForm.username}}</p>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '变量数据',
loginForm: {
username: 'zmm'
}
},
watch: {
message: function(newVal, oldVal) {
console.log(newVal, oldVal, '监听器生效');
},
// 监听不起效果,如果想要监听,需要设置完整语法,声明的深度监听器
/* loginForm: function(newVal, oldVal) {
console.log(newVal, oldVal, '监听器生效');
} */
loginForm: {
handler(newVal, oldVal) {
console.log(newVal.username, oldVal.username, '监听器生效');
},
deep: true //开启深度监听,可以监听对象内部的数据是否发生变化
}
}
})
</script>
</body>
</html>
3、计算属性
vue中需要频繁运算的处理逻辑,封装了一个可以执行自动运算的实力选项,称为计算属性;可以监听参与运算的变量数据是否可以发生更新,如果没有发生改变直接返回上一次运算的结果;如果发生改变自动运算并返回结果。
computed: {
//内部函数包含自己的作用域,包含自己的this关键词
// 如果修改为箭头函数,就会丢失this指向
subtotal: function() {
return this.price * this.count
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 没实验出区别 -->
<body>
<div id="app">
<p>商品单价:{{price}}</p>
<p>购买数量:<input type="number" v-model="count"></p>
<p>小计金额:{{price * count}}元</p>
<p>计算属性:{{subtotal}}元</p>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
price: 699,
count: 1
},
computed: {
//内部函数包含自己的作用域,包含自己的this关键词
// 如果修改为箭头函数,就会丢失this指向
subtotal: function() {
return this.price * this.count
}
}
})
</script>
</body>
</html>
</html>
4、过滤器
vue框架针对页面上展示的数据,数据格式可以通过固定的函数进行规范;对展示数据进行格式规范的选项称为过滤器(filter)。
基本语法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>商品单价:{{price}}</p>
<p>商品单价(全局过滤器):{{price | priceFilter}}</p>
<p>商品单价(私有/局部过滤器):{{price | pfilter}}</p>
</div>
<script src="./vue.js"></script>
<script>
// 注意不要使用箭头函数,
Vue.filter('priceFilter', function(val) {
return parseFloat(val).toFixed(2) + '元';
})
let app = new Vue({
el: '#app',
data: {
price: 699
},
// 私有过滤器
filters: {
pfilter: function(val) {
return '¥' + parseFloat(val).toFixed(3) + '元'
}
}
})
</script>
</body>
</html>
5、事件处理
(1)事件绑定
vue中提供了v-on的指令,用于给指定元素绑定操作事件,同时也提供了事件操作简介语法
<div class="box" v-on:click="handler">
v-on事件名称:可以直接给元素绑定事件
</div>
代码操作:
let app = new Vue({
el: '#app',
data: {},
methods: {
handler() {
alert('用户点击了div');
},
handler2(e) {
console.log(e, '事件对象');
},
handler3(e, a) {
console.log(e, '事件对象', a, '传递的参数');
},
}
})
(2)事件对象
事件出发之后,可以通过事件对象,对事件处理进行功能拓展,获取事件发生对象的标签,获取鼠标位置
function handler(e) {
// 兼容写法
e = e || window.event
// 获取鼠标位置:可视区域位置、网页文档位置
var {clientX, clientY} = e // 相对于窗口的位置
var {pageX, pageY} = e // 相对于网页的位置
var {offsetX, offsetY} = e // 相对于点击元素的位置
}
<h2>2、事件对象</h2>
<div class="box" @click="handler2">
如果没有传递参数给处理函数,默认处理函数的第一个形式参数就是事件对象
</div>
<div class="box" @click="handler3($event, 'id12')">
如果事件处理函数需要参数;Vue默认提供了一个显式的事件对象$event,可以传递给对应的处理函数
</div>
</div>
const app = new Vue({
el: '#app',
data: {},
watch: {},
computed: {},
methods: {
handler() {...},
handler2(e) {
console.log(e, "事件对象")
},
handler3(e, id){
console.log(e, id, "传递参数的事件对象")
}
}
})
(3)事件修饰符
通过原生js事件的操作,包含很多需要预处理的问题,如事件冒泡、元素默认行为等等。。。(下面是浏览器的兼容性写法)
//event 原生JS中阻止事件冒泡
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
//event 原生JS中如何阻止浏览器默认行为?
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
Vue中将原生JS中操作繁琐的方式,转换成了通过修饰符实现功能的操作方式:
.stop:阻止事件冒泡
.prevent:阻止默认行为
.capture:转换触发机制,从冒泡出发事件转变为捕获触发机制
.self:指定事件只能由当前标签自身触发
.once:一次性事件
.passive:2.3.0Vue还对应addEventListener中的passive选项提供了.passive修饰符
阻止事件冒泡行为:
<div id='#app'>
<h2>3、(未阻止冒泡前)事件修饰符</h2>
<div class="outer" @click="handlerOuter">
<div class="inner" @click="handlerInner">
<button @click="handlerBtn">点击按钮</button>
</div>
</div>
<h2>4、(阻止冒泡)事件修饰符</h2>
<!-- 只会影响当前事件标签对应的冒泡行为,其他元素的冒泡行为不会发生改变 -->
<div class="outer" @click="handlerOuter">
<div class="inner" @click="handlerInner">
<button @click.stop="handlerBtn">点击按钮</button>
</div>
</div>
</div>
代码操作:
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {},
methods: {
handlerOuter() {
console.log('用户点击了div outer');
},
handlerInner() {
console.log('用户点击了div inner');
},
handlerBtn() {
console.log('用户点击按钮!');
}
}
})
</script>
阻止浏览器的默认操作:
<h2>5、(阻止默认行为)事件修饰符</h2>
<!-- 只会影响当前事件标签对应的冒泡行为,其他元素的冒泡行为不会发生改变 -->
<form action="https://www.baidu.com/s?">
搜索:<input type="text" v-model="kw">
<button @click="handlerSearch">点击搜索</button>
</form>
//阻止默认行为之后
<h2>5、(阻止默认行为)事件修饰符</h2>
<!-- 只会影响当前事件标签对应的冒泡行为,其他元素的冒泡行为不会发生改变 -->
<form action="https://www.baidu.com/s?">
搜索:<input type="text" v-model="kw">
<button @click.prevent="handlerSearch">点击搜索</button>
</form>
代码操作:
handlerSearch() {
if (this.kw.trim().length > 0) {
alert('提交搜索');
window.location.href = 'https://www.baidu.com/s?wd=' + this.kw;
} else {
alert('数据不完善,验证失败!');
}
}
在捕获阶段触发函数
<h2>6、(在捕获阶段触发)事件修饰符</h2>
<!-- 捕获阶段是从上往下进行的,所以添加到父元素上面 -->
<div class="outer" @click.capture="handlerOuter">
<div class="inner" @click.capture="handlerInner">
<button @click.stop="handlerBtn">点击按钮</button>
</div>
</div>
加上事件修饰符后点击按钮产生的效果(从外到内,依次触发函数)
没有加事件修饰符时点击按钮产生的效果(从内到外,依次触发函数)
只能由当前标签自身触发的事件修饰符
<h2>7、(只由当前标签自身触发)事件修饰符</h2>
<!--特定场景中,事件只能由当前标签自身触发 -->
<div class="outer" @click="handlerOuter">
<div class="inner" @click.self="handlerInner">
<button @click="handlerBtn">点击按钮</button>
</div>
</div>
点击完button按钮后,出现的效果
特殊的一次性事件
<h2>8、(针对特殊的一次性事件.once)事件修饰符</h2>
<!--特定场景中,事件只能由当前标签自身触发 -->
<div class="outer" @click="handlerOuter">
<div class="inner" @click.once="handlerInner">
<button @click="handlerBtn">(once一次性事件)点击按钮</button>
</div>
</div>
上图为第一次点击和第二次点击出现的效果
(4)按键修饰符
内建按键修饰符
.enter(点击enter键触发)
.tab(点击tab键触发)
.delete(点击delete键触发)
.esc(点击esc键触发)
.space(点击space键触发)
.up(点击up键触发)
.down(点击down键触发)
.left(点击left键触发)
.right(点击right键触发)
系统按键修饰符
.ctrl(点击ctrl键触发)
.alt(点击alt键触发)
.shift(点击shift键触发)
.meta(点击meta键触发)
6、表单操作
(1)表单元素数据绑定
使用v-model进行数据绑定,具体案例在下面品牌管理进行
7、品牌管理-数据复杂度升级:增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
width: 640px;
margin: 50px auto;
}
input {
width: 600px;
height: 40px;
line-height: 40px;
font-size: 16px;
padding-left: 15px;
margin: 0 20px 15px;
border: 2px solid #000;
border-radius: 5px;
}
hr {
width: 100%;
}
table {
width: 620px;
margin: 20px 10px;
border: 1px solid rgb(55, 54, 54);
text-align: center;
border-collapse: collapse;
}
thead {
height: 45px;
line-height: 45px;
background-color: #A349A4;
color: #fff;
letter-spacing: 2px;
}
tbody tr {
height: 45px;
line-height: 45px;
}
tbody tr td:nth-of-type(4) {
width: 200px;
}
.edit,
.delete {
width: 80px;
border: none;
color: #fff;
height: 30px;
letter-spacing: 2px;
}
.edit {
background-color: #22B14C;
margin-right: 10px;
}
.delete {
background-color: #ED1C24;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入品牌数据,格式:名称:单价,按回车键添加" v-model="message" @keyup.enter="change">
<!-- <span hidden>{{id}}</span> -->
<hr>
<table>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :class="{hidden:isHidden}">
<td colspan="4">暂无数据!</td>
</tr>
<tr v-for="item in messageList">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button class="edit" @click="update(item.id,item.name,item.price)">编辑</button>
<button class="delete" @click="del(item.id)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
id: '',
message: '',
styleObj: '',
isHidden: true,
messageList: [{
id: 1,
name: '苹果',
price: 7999
}]
},
methods: {
update(id, name, price) {
this.id = id;
this.message = name + ':' + price;
},
change() {
if (this.message.trim() == '') {
alert('输入内容不能为空!');
return;
} else {
let message = this.message;
let name = message.split(':')[0];
let price = message.split(':')[1];
//另外一种使用截取的方式获取name和price
// let name = message.substring(0, message.indexOf(':'));
// let price = message.substring(message.indexOf(':') + 1, message.length);
if (this.id.trim() == '') {
// 代表这个时候是添加
let id = this.messageList.length > 0 ? this.messageList[0].id + 1 : 1;
let obj = {
id: id,
name: name,
price: price
};
this.messageList.unshift(obj);
this.message = '';
} else {
// 代表这个时候是修改对应的内容
let id = this.id;
for (let i = 0; i < this.messageList.length; i++) {
if (this.messageList[i].id == id) {
this.messageList[i].name = name;
this.messageList[i].price = price;
}
}
this.message = '';
}
}
},
del(id) {
for (let i = 0; i < this.messageList.length; i++) {
if (this.messageList[i].id == id) {
this.messageList.splice(i, 1);
}
}
if (this.messageList.length == 0) {
this.isHidden = false;
}
}
}
})
</script>
</body>
</html>
this.messageList[i].name = name;
this.messageList[i].price = price;
}
}
this.message = '';
}
}
},
del(id) {
for (let i = 0; i < this.messageList.length; i++) {
if (this.messageList[i].id == id) {
this.messageList.splice(i, 1);
}
}
if (this.messageList.length == 0) {
this.isHidden = false;
}
}
}
})
</script>
```