Vue-Vue常用指令

1、v-if指令
根据条件的真假，确定是否在页面显示当前元素。

        <h1 v-if='true'>8888888888888</h1>

2、v-show指令
根据条件的真假，确定是否在页面显示当前元素。
和1的区别是 show已经渲染在页面 它改变的是display的值；而if则是没有在页面显示。如果某个标签反复出现消失，则使用show比较好，这样的好处是可以优化页面，减少卡顿。 if可以用在比如B站上面的头像登录显示

   <h1 v-show='true'>8888888888888</h1>

3、v-on指令
该指令是html元素绑定事件监听指令
例如：v-on:click =‘add()’ 可以简写成 @click=‘add()’ 方法名的小括号如果没有参数 可以省略不写
v-on的修饰符：
事件修饰符：

 <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用时间捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>

键盘修饰符：
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

     <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
        <input v-on:keyup.13="submit">

     记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名

        <!-- 同上 -->
        <input v-on:keyup.enter="submit">

全部的按键别名：
　　Enter tab delete (捕获 “删除” 和 “退格” 键) esc space
Up down left right
也可以自定义：

        // 可以使用 v-on:keyup.f1
        Vue.config.keyCodes.f1 = 112

需要注意的事：这个需要写在methods里面

    <button @click='add'>添加</button>
   methods: {
                add() {
                    this.istrue = !this.istrue
                }

4、v-bind 指令
该指令是用来动态添加属性值
v-bind:src=‘img’ 简写:src=“img”

      <img :src="img" alt="">

5、v-model指令
主要是实现表单和应用状态之间的双向绑定

        {{nickname}}
        <input type="text" name="" id="" v-model='nickname'>
        <h1>{{nickname.toUpperCase()}}</h1>

当文本框里面的内容改变时 ，页面中 所绑定的数据也会跟着改变
6、v-for指令
遍历data的数据 并在页面进行展示 需要遍历谁 就在谁身上加
v-for = ‘(item,index) in items’ item为每次遍历得到的元素 index为索引 items是数组或对象

数组    <li v-for='(item,index) in arr' >
              {{item.name}}:<span v-for='childitem in item.type'>{{childitem}}</span>
            </li>  嵌套用法
 对象    <li v-for='value,key,index in obj'>{{key}}</li>

7、v-html指令
将data里面的html标签转为页面标签

<div v-html='str'></div>
           data() {
                return {
                    str: '<h3>哈哈哈</h3>',
                }
            },