一、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，每次修改某一条数据的时候，就只会重新渲染改条数据的变化，节省了大量的内存。