v-on:事件类型
v-on:type
v-on: 可以简写成
@
后面跟事件类型，里面可以写函数表达式或者调用方法
<div id="app">
<!--事件中直接写js片段-->
<button v-on:click="num++">点赞</button>
<!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
<button @click="cancel">取消</button>
<!-- -->
<h1>有{
{num}}个赞</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
num: 1
},
methods:{
cancel(){
this.num--;
}
}
})
</script>
事件修饰符
事件修饰符可以跟在v-on:type事件后面，可以起到各种效用。
这里用到的
@click.stop阻止事件向上冒泡，即点击小div不会触发大div的点击事件
v-on:click.once 只触发一次
@click.prevent 阻止默认事件
更多的用法可以参考Vue的官网
<div id="app">
<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
大div
<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
小div <br />
<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
</div>
</div>
</div>
<script>
new Vue({
el:"#app",
methods:{
hello(){
alert("点击了")
}
}
})
</script>
按键修饰符
v-on:key.code后面接方法或表达式
这里的code可以参考vue的按键代码，常用的按键code
常用的按键码如下：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
也可以使用组合的方式，类似与链式调用
<!-- 按键修饰符： -->
<input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />
v-for
主要用法
v-for="(item,index) in items
v-for="(value,key) in object
v-for="(value,key,index) in object
:key="user.name"可以增加遍历速度，其中user.name为唯一值
<!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>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users" :key="user.name" ">
<!-- 1、显示user信息：v-for="item in items" -->
当前索引：{
{index}} ==> {
{user.name}} ==> {
{user.gender}} ==>{
{user.age}} <br>
<!-- 2、获取数组下标：v-for="(item,index) in items" -->
<!-- 3、遍历对象：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
-->
对象信息：
<span v-for="(v,k,i) in user">{
{k}}=={
{v}}=={
{i}}；</span>
<!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
</li>
</ul>
<ul>
<li v-for="(num,index) in nums" :key="index"></li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
users: [{
name: '柳岩', gender: '女', age: 21 },
{
name: '张三', gender: '男', age: 18 },
{
name: '范冰冰', gender: '女', age: 24 },
{
name: '刘亦菲', gender: '女', age: 18 },
{
name: '古力娜扎', gender: '女', age: 25 }],
nums: [1,2,3,4,4]
},
})
</script>
</body>
</html>
v-show,v-if
if和show的区别是：
if是控制dom来隐藏元素，元素不在dom里面显示，需要性能较高
show是通过样式不显示
<!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>
</head>
<body>
<!--
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
v-show，当得到结果为true时，所在的元素才会被显示。
-->
<div id="app">
<button v-on:click="show = !show">点我呀</button>
<!-- 1、使用v-if显示 -->
<h1 v-if="show">if=看到我....</h1>
<!-- 2、使用v-show显示 -->
<h1 v-show="show">show=看到我</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</body>
</html>
v-else,v-else-if
就相当于java代码中的if else if
实例代码
<!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>
</head>
<body>
<div id="app">
<button v-on:click="random=Math.random()">点我呀</button>
<span>{
{random}}</span>
<h1 v-if="random>=0.75">
看到我啦？！ >= 0.75
</h1>
<h1 v-else-if="random>=0.5">
看到我啦？！ >= 0.5
</h1>
<h1 v-else-if="random>=0.2">
看到我啦？！ >= 0.2
</h1>
<h1 v-else>
看到我啦？！ < 0.2
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
random: 1 }
})
</script>
</body>
</html>