一.事件处理

1.内联事件处理器

<button v-on:click="count++">count+1</button>

直接将事件以表达式的方式书写~ 

 

每次单击可以完成自增+1的操作~ 

2.方法事件处理器

<button @click="addcount('啦啦啦~')">count+2</button>

 如上，一方面v-on可以简写为“@”；另一方面，“啦啦啦”作为参数传入了方法中。

// 所有的方法都写在methods里面methods:{// data里面的对象通过this.得出addcount(msg){this.count+=2;console.log(msg);}}

msg即形参，将啦啦啦作为参数值传入。

 

每次单击完成自增+2.

后台点击一次即输出一次传入的“啦啦啦”。 

二.事件参数

事件参数可以获取event对象和通过事件传递数据。

<button @click="boot">成长值</button>

          boot(e){   e.target.innerHTML="成长值:"+this.count      this.count+=1;}

 

如上，单击按钮即可修改当前元素，并完成自增+1。 

---

添加$event，可以继续传输event对象~

<p @click.prevent="printName(item,$event)"   v-for="(item,index) of club":key="index" >{{ item }}</p>

          printName(name2,e){console.log(name2);console.log(e);}

 

event对象可以被正常打印~

 

三.事件修饰符

v-on提供了诸多事件修饰符，可以阻止默认事件等。

  <div @click="divc"><p @click.stop="pc">事件冒泡测试~</p></div>

divc(){console.log("divC~");},pc(){console.log("pC~");},

如下，由于stop属性的存在，点击子元素阻止了父元素事件的响应。 

 

四.数组变化侦听

1.变更方法

Vue能够侦听响应式数组的变更方法，并且在他们被调用的时候触发相关的更新。

  <ul><li v-for="(item,index) in club":key="index">{{ item }}</li></ul><button @click="addclub1">添加元素</button><button @click="addclub2">无显示的添加</button>

          addclub1(){this.club.push("勒沃库森");},

 

2.替换数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更，相对的，有一些不可变的方法，他们不会改变原数组，而总是返回一个新数组。

          addclub2(){console.log(this.club.concat(["霍芬海姆"]));this.club=this.club.concat(["法兰克福"]);// 反向赋值回去}  

如上，使用concat只会拼接出来一个新的数组，而不会替换原来的数组；但是可以用this反向赋值回去，实现和变更方法一样的效果。

 

五.计算属性

把模版语法里面可能出现的复杂逻辑放入到独立的计算属性之中。

<div>{{ testNum }}</div>

 computed:{testNum(){return this.club.length>0?"德甲存在球队" : "德甲解散了";}}

 

 computed和method、data同级。

重点区别：

• 计算属性：计算属性值会基于其响应式依赖被缓存~
• 方法：方法调用总是会在渲染发生时再执行函数

概括地说，就是计算属性效率更高~