Vue学习第二天
文章目录
-
- 一、样式绑定
-
- 1.class绑定
- 2.数组绑定class
- 3.style绑定属性
- 二、事件绑定指令
- 三、事件修饰符
-
- 1. stop
- 2.prevent
- 3.capture
- 4.once
一、样式绑定
1.class绑定
v-bind:class设置一个对象，从而动态的切换 class,
实例中将isActive设置为true 显示了一个粉红色的 div 块，如果设置为false 则不显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.active {
width: 100px;
height: 100px;
background: pink;
}
.act {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 添加两个class给这个div active act -->
<div v-bind:class="{ 'active': isActive,'act':isAct }"></div>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
isAct: false,
}
})
</script>
</body>
</html>
传入两个class color会被第二个覆盖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.active {
width: 100px;
height: 100px;
background: pink;
}
.act {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 添加两个class给这个div active act -->
<div v-bind:class="{ 'active': isActive,'act':isAct }"></div>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
isAct: true,
}
})
</script>
</body>
</html>
2.数组绑定class
数组绑定 一样会被覆盖 写法不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.act {
background: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 添加两个class给这个div active act -->
<div v-bind:class="[isActive, isAct]"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: 'active',
isAct: 'act'
}
})
</script>
</body>
</html>
3.style绑定属性
1.v-bind:style绑定直接设置样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
<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>
</body>
</html>
</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">冉冉</div>
</div>
<script>
new Vue({
el: '#app',
data: {
activeColor: 'pink',
fontSize: 100
}
})
</script>
</body>
</html>
2.v-bind:style绑定style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><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>
</body>
</html></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind:style绑定style -->
<div v-bind:style="style">冉冉</div>
</div>
<script>
new Vue({
el: '#app',
data: {
style: {
color: 'pink',
fontSize: '50px'
}
}
})
</script>
</body>
</html>
3.v-bind:style可以使用数组将多个样式对象应用到一个元素上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
<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>
</body>
</html>
</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind:style可以使用数组将多个样式对象应用到一个元素上 -->
<div v-bind:style="[baseStyles, overridingStyles]">冉冉</div>
</div>
<script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'pink',
fontSize: '60px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})
</script>
</body>
</html>
二、事件绑定指令
事件监听可以使用 v-on 指令
<!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>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter += 1">Add1</button>
<p>我爱了你 {{ counter }} 次.</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</body>
</html>
v-on调用方法
<!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>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">崔事多</button>
</div>
<script>
var example2 = new Vue({
el: '#app',
data: {
name: '崔事多'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>
</body>
</html>
内联 JavaScript 语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><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>
</body>
</html></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="say('邱勋涛')">Say qxt</button>
<button v-on:click="say('赵梦冉')">Say zmr</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
say: function (msg) {
alert(msg)
}
}
})
</script>
</body>
</html>
三、事件修饰符
1. stop
阻止冒泡行为
<!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">
<div class="inner" @click="div1Handler">
<input type="button" value="按钮" @click.stop="btnHandler">
</div>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log("触发了inner的div");
},
btnHandler() {
console.log("触发了button");
},
}
})
</script>
</body>
</html>
没有添加stop
添加了stop
2.prevent
阻止触发默认事件 比如点击a标签的默认跳转
<!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>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click.prevent="qxtZmr">彼方尚有荣光在!</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
qxtZmr() {
console.log("触发了click事件")
},
}
})
</script>
</body>
</html>
点击了打印了点击事件 但是没有跳转 默认行为被阻止
3.capture
将冒泡行为的层级 调到上层
<!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">
<!-- capture -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="按钮" @click.stop="btnHandler">
</div>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log("触发了inner的div");
},
btnHandler() {
console.log("触发了button");
},
}
})
</script>
</body>
</html>
点击按钮 div的冒泡行为提前 div绑定的函数先执行
4.once
<!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>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- once -->
<a href="http://www.baidu.com" @click.once="qxtZmr">彼方尚有荣光在!</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
qxtZmr() {
console.log("触发了click事件")
},
}
})
</script>
</body>
</html>