一、v-on事件绑定
1.vue中使用v-on来进行绑定事件 v-on:事件名
2.在vue中 v-on:事件名 赋值的这个语句 就是调用的函数名
3.在vue中 定义的所有函数 统一放在methods属性中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1>{{age}}</h1>
<input type="button" value="点我触发增加年龄" v-on:click="add">
</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
const vue = new Vue({
el:'#app',
data:{
msg:'hello',
age:22
},
methods:{
add:function (){
this.age++
console.log(this)
}
}
})
</script>
总结
1.this代表vue实例,其中包含vue实例中的属性和方法
v-on:click 可以简写成 @click
2.定义vue事件函数时,推荐使用
函数名(){} 的写法
二、Vue事件参数传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1>{{age}}</h1>
<input type="button" value="点我触发加20" @click="addMore(20)">
</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
const vue = new Vue({
el:'#app',
data:{
msg:'hello',
age:22
},
methods:{
addMore(num){
this.age += num
}
}
})
</script>
总结:
在使用事件的时候,可以直接在事件调用的地方给事件进行参数传递,在事件定义的地方给对应的变量传递参数
三、v-show v-if v-bind
v-show
用来控制某个元素是否展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1 v-show="boolean">{{msg}}</h1>
<input type="button" value="展示或隐藏" @click="showChange">
</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
const vue = new Vue({
el:'#app',
data:{
msg:'hello',
boolean:'true'
},
methods:{
showChange(){
this.boolean = !this.boolean
}
}
})
</script>
效果如下,当点击按钮,标签隐藏
v-if
v-if 的效果和 v-show的效果一样,但是区别就是,v-show在判断为false的时候,是把标签的display属性设置为none,实际上标签体还是存在的
值得注意的是,v-if 判断为false的时候,是直接销毁标签体,不存在,如下所示
v-bind 数据到视图的单向数据绑定
1.v-bind他可以让HTML标签的某个属性的值产生动态的效果
2.语法格式 <HTML标签 v-bind:参数="表达式"><HTML>
3.v-bind后面的参数名(参数名字可以随便写),会被编译为HTML标签的属性名
4.表达式会关联data,当data发生改变之后,表达式的执行结果就会发生变化
5.v-bind因为很常用,所以可以直接写个冒号简写
四、v-model 和 v-bind 的区别与联系
v-bind 和 v-model这两个指令都可以完成数据绑定
2.v-bind是单向数据绑定
data==>视图
3.v-model是双向数据绑定
data<==>视图 MVVM
4.v-bind可以使用在任何HTML标签中,
v-model只能使用在表单类标签中例如 input标签 select标签 textarea标签
为什么v-model的使用会有这个限制呢?
因为表单类的元素才能给用户提供交互输入的界面
5.v-model也是通常用在value属性上的
6.v-bind 和 v-model都有简写方式
v-bind的简写方式是: v-bind:参数="表达式" 简写为 :参数="表达式"
v-model的简写方式是:v-model:value="表达式" 简写为 v-model="表达式"
五、v-for
v-for用来对数组,对象进行遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<span v-for="(value) in user">
{{value}}
</span><br>
<span v-for="(value) in arr">
{{value}}
</span>
<ul>
<li v-for="user in userList">{{user.name}}= = ={{user.hobby}}</li>
</ul>
</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
const vue = new Vue({
el:'#app',
data:{
msg:'hello',
user:{
id:'1',
name:'小47',
address:'浙江'
},
arr:['长春','上海','深圳','广东'],
userList:[
{id:'100',name:'蔡徐坤',hobby:'篮球'},
{id:'101',name:'梅西',hobby:'足球'}
]
},
methods:{
}
})
</script>
效果如下
总结:
v-for指令所在标签中,还有一个非常重要的属性:
:key
如果没有指定:key属性,会自动拿index作为key
这个key是这个dom元素的唯一标识
key值的绑定是帮助vue识别虚拟Dom,作用是帮助vue高效的动态渲染页面
key主要用来做dom diff算法用的
使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,它会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;
尽量使用每条数据的唯一id来作为key
经典面试题:为什么v-for一定要绑定key
但是对于用
v-for
渲染的列表数据来说,数据量可能一般很庞大,而且我们经常还要对这个数据进行一些增删改操作。假设我们给列表增加一条数据,整个列表都要重新渲染一遍,那不就很费事了。而key
的出现就是尽可能的回避这个问题,提高效率,如果我们给列表增加了一条数据,页面只渲染了这数据。v-for默认使用就地复用策略,列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素,如果不绑定key的话,每次修改某一条数据,都会重新渲染所有数据,会导致大量内存的浪费。如果绑定了key,每次修改某一条数据的时候,就只会重新渲染改条数据的变化,节省了大量的内存。