本文详细介绍了Vue.js中的样式操作，包括固定样式和动态样式（class和style的绑定），以及如何使用侦听器监听数据变化。此外，还讲解了计算属性的使用，如何根据数据自动计算并返回结果。事件处理部分涵盖了事件绑定、事件对象、事件修饰符和按键修饰符。最后，提到了表单操作和一个简单的品牌管理示例，展示了数据的增删改查。
今天继续整理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>
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
