5.Vue指令

一、前言

上一篇文章已经介绍过了v-bind指令，本文将继续介绍更多的Vue.js指令。

二、条件渲染指令

条件渲染指令主要包括v-if、v-else、v-show指令，他们在实际开发中用的是比较广泛的。

1.v-if指令

根据表达式结果的真假来判断是否显示当前元素，如果表达式为 true，显示该元素，否则就隐藏。示例如下，

<template>
  <div class="hello" >
 
   <h1 v-if="isShow">表达式为真的时候显示</h1>
   
  </div>
</template>
<script>

export default {

  data (){

   return {
     isShow : true
   }

  },
}
</script>

上诉例子中，当isShow是true的时候显示文字，false的时候就隐藏。

2.v-else

v-else是为v-if添加的else块，v-else元素必须紧跟在v-if元素的后面，否则不能被识别，示例如下

<template>
  <div class="hello" >
 
   <h1 v-if="isShow">表达式为真的时候显示</h1>
   <h1 v-else>表达式为假时显示</h1>
  </div>
</template>
<script>

export default {

  data (){

   return {
     isShow : false
   }

  },
}
</script>

上面的v-else是紧跟v-if的，其实不紧跟的话，编译器也会报错的。此时会显示v-else块的文字。

3.v-show

v-show指令的用法和v-if指令基本一致，区别是v-show指令通过改变元素的CSS属性display来控制显示与隐藏。示例如下

<template>
  <div class="hello" >
   <h1 v-show="state == 2">显示</h1>
 
  </div>
</template>
<script>

export default {

  data (){

   return {
     state : 2
   }

  },
}
</script>

这时候条件为真是可以正常显示的。

v-if和v-show的选择
v-if：条件不经常改变的场景，因为v-if指令有更高的切换消耗
v-show:频繁切换的时候，使用v-show，因为v-show指令有更高的初始渲染消耗。

4.v-for

v-for指令是基于一个数组来渲染一个列表，它的语法和JavaScript的遍历语法相似：v-for="item in items",具体语法为v-for='(item,index) in items'

item 表示每次遍历得到的元素
index 表示item的索引，为可选参数
items 表示数组或者对象
可看下面示例，

<template>
  <div class="hello" >
   <p v-for="(item,index) in items" :key="index">{{index}}-{{item}}</p>


 
  </div>
</template>
<script>

export default {

  data (){

   return {
     items : [
       '宁波银行',
       '工商银行',
       '建设银行'
     ]
   }

  },
}
</script>

我们发现在上面的代码里面我们还加了一个key属性，以后再开发中遇到v-for尽量加一个key属性
运行结果如下图，

image.png

4.v-on

v-on指令为HTML元素绑定监听事件，类似原生JavaScript的onclick，也会是在HTML语法上进行监听的。示例如下，

<template>
  <div class="hello" >
   

   <button v-on:click="click">click</button>

  </div>
</template>
<script>

export default {

  methods :{
  click(){
    console.log('vue');
  },


  }
}
</script>

运行可以发现会在控制台打印出vue,上面的写法还可以使用语法糖，如下
<button @click="click">click</button>效果是一样的

5.修饰符

v-on后面可以增加修饰符，常用的修饰符如下

.stop 调用event.stopPropagation()
.prevent:调用event.preventDefault()
.self 当事件是从侦听器绑定的元素本身触发时才触发回调。
-.{keycode} 只有在指定键盘上触发回调。
下面有一个小案例

<template>
  <div class="hello" >
   <div class="parent" @click="handlePar">
     parent
      <div class="child" @click="handleChild">child</div>

    </div>   

  </div>
</template>

<script>

export default {

  methods :{
  handlePar(){
   console.log('parent');

  },
  handleChild(){
    console.log('child');
  }
  



  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.parent{
 background-color: pink;
width: 200px;
height: 200px;

}
.child{
background-color: green;
width: 100px;
height: 100px;
margin: 0 auto;


}

</style>

这时候点击发现，控制台打印了，parent和child,但是我们值点击了child的div，这就是事件冒泡。怎么解决呢？

1.使用stop修饰符:<div class="child" @click.stop="handleChild">child</div>
2.在parent中使用.self修饰符，这样只有在点击parent的时候才会触发，如<div class="parent" @click.self="handlePar">
运行结果，读者可自行验证。

6.v-model和表单

Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据。
双向绑定指的是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁改变，另一方也会相应地更新为相同的数据。
下面通过一个小案例可以更好的了解这个特性

<template>
  <div>
   <input type="text" v-model="msg">
   <p>{{msg}}</p>
  </div>



</template>

<script>
export default {
data(){

return {
  msg : 'input'
}

}
}
</script>

<style>

</style>

当你输入框的文字改变时，p标签中的文字也会改变。如图，