v-on

在前端开发中，我们需要经常和用户进行交互，这个时候，就必须监听用户发生的事件，比如点击、拖拽、键盘事件等，在 Vue 中监听事件使用 v-on 指令

基本用法

<!-- 'add'是在下面定义的方法名 -->
  <button v-on:click="add">+</button>

// ...
data: {
  num: 0
},
methods: {
 add () {
   this.num++
},

简写：

<button @click="add">+</button>

v-on 参数

1.事件调用的方法没有参数，方法后的()可不加

<button @click="btn1Click()">按钮1</button>

<button @click="btn1Click">按钮1</button>

2.在事件定义时，方法本身是需要一个参数的，但写方法时省略了小括号，这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法

加小括号的话打印的就是undefined

// 如果函数需要参数,但是没有传入, 那么函数的形参为undefined
function abc(name) {
  console.log(name); // undefined
 }
abc()

eg：

<button @click="btn2Click">按钮2</button>

// ....
methods: {
 btn2Click (abc) {
    console.log(abc);
  },
}

打印结果：

这是因为当我们在浏览器上进行一些操作，比如点击、拖拽等事件时，浏览器会自动生成事件对象。

3.方法定义时, 我们需要浏览器的event对象, 同时又需要其他参数，这时就可以通过$event来手动获取到浏览器的event对象

<button @click="btn3Click(abc, $event)">按钮3</button>

// ...
data: {
  abc: 123
},
methods: {
  btn3Click(abc, event) {
    console.log(abc, event);
  }
}

打印结果:

v-on的事件修饰符

vue提供了事件修饰符来帮我们更好的处理一些事件，比如冒泡、阻止默认事件等。

.stop修饰符,阻止冒泡

<div @click="divClick">
  <button @click.stop="btnClick">按钮</button>
</div>

methods: {
  btnClick() {
    console.log("btnClick");
  },
  divClick() {
    console.log("divClick");
  },
}

加了.stop修饰符后就会阻止btn的点击事件冒泡到div，打印结果只打印btnClick

.prevent修饰符,阻止默认事件

<button @click.prevent="doThis"></button>

阻止默认行为，没有修饰符

<a href="https://cn.vuejs.org" @click.prevent>阻止跳转</a>

串联修饰符

<a v-on:click.stop.prevent="doThat"></a>

.once 修饰符

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

按键修饰符

按键名：

<input @keyup.enter="onEnter">

按键数字：

<input @keyup.13="onEnter">

.passive修饰符

每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。

passive的作用就是告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

注：passive和prevent冲突，不能同时绑定在一个监听器上。

.native修饰符

当我们需要监听一个组件的原生事件时，必须给对应的事件加上.native修饰符，才能进行监听。

比如Home组件里有一个BackTop组件，直接在Home组件里监听BackTop组件的点击事件是监听不到的，必须加上.native修饰符才可以：

<back-top @click.native="backClick"/>

v-if和v-show

v-if

vue中的v-if、v-else、v-else-if这三个指令与js 的条件语句用法相似。

v-if 是惰性的，如果后面的条件为 false ，则对应的元素以及其子元素不会渲染，也就是不会有对应的标签出现在 DOM 中。

v-show

v-show是通过改变元素的display属性值来显示/隐藏元素的，也就是说在初始的时候无论条件是true还是false,都被编译，然后被缓存，而且 DOM 元素保留。

v-if和v-show对比

1.v-if 有更高的切换消耗。当需要在显示与隐藏之间切换很频繁时，使用 v-show

2.v-show 有更高的初始渲染消耗，当只有一次切换时，使用 v-if

v-for

遍历数组

<ul>
  <li v-for="(item,index) in items">
    {{index}} : {{item}}
  </li>
</ul>~

js:

// ....
data: {
  items: ['a','b','c','d'] 
  }

遍历对象

<ul id="v-for-object" class="demo">
  <li v-for="(value,key) in object">
    {{key}} : {{value}}
  </li>
</ul>

js:

// ...
data: {
  object: {
    name: 'douer',
    color: 'white',
    sex: 'male'
  }
 }

还可以用第三个参数作为索引:

<ul>
  <li v-for="(value, key,index) in object">
    {{index}} : {{key}} : {{value}}
  </li>
</ul>

key值的作用