【vue】2、v-on、$event、set()、$listeners、组件
新手为了自己复习写的博客
不排除有错误的地方和理解不到位的地方
欢迎指正！
tips:
1. 在一个vue实例内部(或者组件内部)中使用data(如methods中)要这样写：this.msg；
在中（无论是data还是props）就直接写{ {msg}}
同理method名也如上。
2.this配$, Vue配方法（this.$set()==Vue.set()）
VUE中$event的用法：
1. 作为一个对象
- 当 'fun1' 传入methods中没有()时，表示默认传入$event
能传入event
var vm= new Vue({
el:'#app',
methods:{
fun1:function(event){
alert(typeof event) //object 固定：只能是event，不能是e/a/b
}
}
})- 当 'fun1()' 传入methods中有()时，必须传入参数$event。（其实有的时候不传入也可以，但是我分不清，弄不明白，所以自己写的时候，传参和收参都写上吧）
能传入event
var vm= new Vue({
el:'#app',
methods:{
fun1:function(e){
alert(typeof e) //object
}
}
})2. $event作为自定义事件参数，子组件向父组件传播数据：接收$emit传入到v-on中的参数
PS: $event中的currentTarget和target的区别：https://www.weipxiu.com/3590.html
currentTarget是事件绑定的元素，而target是触发的元素。
点击 呵呵呵呵
哈哈哈哈哈哈呵呵呵呵
methods:{
fun1:function(){
console.log(event.target) //呵呵呵呵
console.log(event.currentTarget) // 哈哈哈哈哈哈呵呵呵呵
}
}
响应式视图更新（对象&数组）：set(obj/ary, key/index, value)
只能更改（/增）data中某个子对象或者子数组，不能直接更改data。即data不能是第一个参数。
- 以下情况不能进行视图更新：
1. data的对象增加属性
2. data的数组修改某个索引的值；或者是增加一个值
data:{
num:100,
arg:[0],
obj:{a:'a'}
}
method:{
fun1:function(){
this.num=200 //视图更新
}
//数组
fun3:function(){
this.ary[1]=1 //视图不更新，但是实际上数值已经更新了
}
fun4:function(){
this.ary[0]=999 //视图不更新，但是实际上数值已经更新了
}
//对象
fun5:function(){
this.obj.a='a1' //视图更新
}
fun6:function(){
this.obj.b='b' //视图不更新，但是实际上数值已经更新了
}
//特殊情况：正常obj.c是数值改了，但是视图不更新。
//但是由于num是直接带动了这个vue实例的视图全部更新了，所以obj.c也就更新了
//哪怕num不是 在数组更改的那个function 进行更改的，也会带动数组进行视图更新
//就是只要num更改就会带动data刷新视图
//同理数组等等
fun7:function(){
this.num=3 //同时必须要在html中至少输出一次num,如:{
{num}}
this.obj.c='c' //视图更新
}
}- 响应式的更改对象或数组：set方法
Vue.set(obj/ary, key/index, value)
this.$set(obj/ary, key/index, value)同时数组还有一个方法：vm.array.splice(index,1,newValue)
对象也有一个额外的方法：
this.obj= Object.assign({},this.obj,{a:'1',b:'2'})
可以一次性加多个属性- 更改数组的长度：vm.items.length = 2(wrong)
vm.items.splice(newLength)
三、事件
监听事件 ：v-on 缩写：@
- v-on:click='count++'
- v-on:click='fun1' //调用fun1()
- v-on:click='fun2(argu)' //调用fun2(argu)
var app=new Vue({
el:'#app',
data:{
message:'123'
},
methods:{
fun1:function(){
alert(this.message) // 必须要用this
}
}
})事件修饰符 ： .
可以连续 . 使用
123456- .stop: 阻止事件冒泡，等同于
event.stopPropagation() - .prevent : 阻止默认事件的发生，等同于event.preventDefault()
- .capture : 捕获事件
- .self : 当 target ==currentTarget时，（如点击的元素=绑定事件的元素） 才触发处理函数, 从内部元素触发不好用
- .passive : 看不懂，待定
- 顺序很重要
v-on:click.prevent.self -阻止所有的点击； v-on:click.self.prevent 只会阻止对元素自身的点击