本文主要内容
- v-on的常见事件修饰符
- v-model双向事件绑定
- 通过属性v-bind 给元素绑定样式
- v-for的使用方法
- v-show和v-if的区别
v-on的常见事件修饰符
v-on 提供了很多事件修饰符来辅助实现一些功能
- .stop 阻止冒泡。本质是调用event.stopPropagation()
- .prevent 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。
- .capture 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。
- .self 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。
- .once 事件只触发一次。
- .{keyCode | keyAlias} 只当事件是从侦听器绑定的元素本身触发时，才触发回调。
- .native 监听组件根元素的原生事件。
.stop的举例
<!DOCTYPE html>
<html>
<head>
<title>heiheihei</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.father {
height: 300px;
width: 300px;
background:pink;
}
.child {
height: 200px;
width: 200px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div class="father" @click="fatherClick">
<div class="child" @click="childClick">
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: {
},
methods: {
fatherClick:function() {
console.log('father被点击了');
},
childClick:function() {
console.log('child被点击了');
}
}
})
</script>
</body>
</html>
展示结果:
image.png
<div class="child" @click.stop="childClick">
阻止冒泡后，当点击子标签时，打印结果是:
child被点击了
.capture举例
.capture：触发事件时，采用捕获的形式，而不是冒泡的形式。
还是采用上面的例子：当按钮点击时，如果想要采取捕获的方式，而不是冒泡的方式，办法是：可以直接在父标签上加事件修饰符.capture。代码如下：
<div class="father" @click.capture="fatherClick">
当点击子标签时，打印结果是：
father 被点击了
child 被点击了
.prevent的举例
比如说，超链接<a>默认有跳转行为，那我可以通过事件修饰符.prevent阻止这种跳转行为。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<!-- 通过 .prevent 阻止超链接的默认跳转行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
linkClick: function () {
console.log('超链接被点击了');
}
}
})
</script>
</body>
</html>
现在加上了prevent就只会打印log，不会跳转到百度
v-model:双向数据绑定（只用于表单元素）
- v-bind:只能实现数据的单向绑定，从M绑定到V
- v-model:可以实现双向绑定
注意 :v-model只能运用在表单的元素中，常见的表单元素包括：input（radio,text,address,email...）、select、checkbox、textarea。
参考示例：
<!DOCTYPE html>
<html>
<head>
<title>heiheihei</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() {
switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
}
}
}
})
</script>
</body>
</html>
结果展示：
image.png
vue通过属性绑定给元素设置class值
代码示例:
<!DOCTYPE html>
<html>
<head>
<title>heiheihei</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.red {
color: red;
}
.size {
font-size: 30px;
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<!--正常写法 -->
<p class="red size">jarbir</p>
<!--数组写法 -->
<p :class="['red','size']">jarbir</p>
<!--数组三元表达式写法 -->
<p :class="[flag?'red':'']">jarbir</p>
<!--对象写法 -->
<p :class="[{'red':flag}]">jarbir</p>
<!--对象写法 -->
<p :class="[{'red':true ,'size':true}]">jarbir</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: {
flag:true
}
})
</script>
</body>
</html>
结果展示：
image.png
vue中通过属性绑定为元素设置style行内样式
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>heiheihei</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.red {
color: red;
}
.size {
font-size: 30px;
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<!--直接在元素上加 -->
<p :style="{color:'red','font-style':'italic'}">jarbir</p>
<!--将样式定义到data中 直接引用 -->
<p :style="styleObj">jarbir</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: {
styleObj: { color: 'red', 'font-size': '20px' }
}
})
</script>
</body>
</html>
结果展示:
image.png
v-for:循环的使用方式
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>heiheihei</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--普通数组遍历 -->
<ul>
<li v-for="(item,index) in arr1">value:{{item}}-----index:{{index}}</li>
</ul>
<!--对象数组遍历 -->
<ul>
<li v-for="(item,index) in arr2">name:{{item.name}}--age:{{item.age}}---index:{{index}}</li>
</ul>
<!-- 对象的遍历 -->
<ul>
<li v-for="(value,key,index) in obj">value:{{value}}---key:{{key}}---index:{{index}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: {
arr1:[1,2,3,4,5],
arr2:[{name:'hhhh',age:'22'},
{name:'nbnnb',age:'33'}],
obj: {
name:"2212",
age:21
}
}
})
</script>
</body>
</html>
结果展示：
image.png
注意 在vue2.2+的版本中，当组件使用v-for时，key属性是必须要加上的。
每次 for 循环的时候，通过指定 key 来标示当前循环这一项的唯一身份。
v-if和v-show
代码示例
<html>
<head>
<title>heiheihei</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="toggle">显示/隐藏</button>
<div v-if="isIfShow">我是盒子</div>
<button v-on:click="showToggle">显示/隐藏</button>
<div v-if="isShow">我是盒子</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isIfShow:true,
isShow: true
},
methods: {
toggle: function() {
this.isIfShow = !this.isIfShow;
},
showToggle:function() {
this.isShow = !this.isShow;
}
}
});
</script>
</html>
两者之间的区别:
v-if和v-show都能实现对元素的隐藏和显示操作。
区别：
- v-if:每次都会重新添加和删除DOM元素
- v-show：只是在元素上添加style="display:none"这个属性。
