vue中常见的指令

下面介绍一下自己对vue中一些常见指令的理解，以便自己以后方便查找：

1. v-model指令：用于表单输入，实现表单控件和数据的双向绑定。

<input type="text" v-model:value="msg">
<!-- value可以省略 因为v-model默认绑定表单元素的value值 -->
 <input type="text" v-model="msg">

2. v-on（@）：基础事件绑定 （事件处理程序放在methods里面）

<input type="text" :value='msg' v-on:click='wei'>  //v-on:通常换成@
<!-- 这个两个分别对应下面methods里面的两个，这两种方法都可以实现事件处理程序 -->
 <button @click='wei'>点击</button>
 <button @click='dianji'>点击</button>
new Vue({

el: '#app',

data: {

msg: 'haha'

},

methods: { //方法： 里面存放的是： 事件处理程序

            wei() {

alert('xixi')

},

dianji: function () {

alert('haha');

}

}

})


传参：
<input type="text" v-model='msg'>
<button @click='dianji($event,msg)'>点我</button>
/* 
    问题： 如果函数接收2个参数，其中一个参数是事件对象，事件对象evhh会丢失
    解决： 在调用方法时，传入一个实际参数： $event
  */
new Vue({
        el: '#app',
        data: {
            msg: 'haha'
        },
        methods: {
            dianji(evhh, msg) { //evhh是形参，可以是随便的一个变量
                alert(msg);
                console.log(evhh);
            }
        }
    })

事件修饰符：
<!-- stop修饰符和self修饰符一样，都是阻止事件冒泡的 相当于ev.stopPropagation()-->
 <div class="large" @click.stop="largeHandler">
    <div class="middle" @click.stop="middleHandler">
         <div class="small" @click.self="smallHandler"></div>
     </div>
 </div>
​
 new Vue({
        el: '#app',
        methods: { //方法： 里面存放的是： 事件处理程序
            largeHandler(evhh) { //当函数只有一个参数的时候，这个参数默认就是事件ev
                alert('large');
                //evhh.stopPropagation();
            },
            middleHandler(ev) {
                alert('middle');
                //ev.stopPropagation();
            },
            smallHandler(eva) {
                alert('small');
                //.stopPropagation();
            }
        }
    })
​
//补充  .prevent阻止默认行为  
     //.capture组织事件捕获  
     //.self事件只对自身有用，在冒泡里面可以替换.stop
    //.once 点击事件将只会触发一次
    //.passive 等滚动事件完成

3. v-bind (：)：通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用 v-bind 处理，其中表达式 结果的类型可以是：字符串、对象或数组。
   v-bind:class=‘表达式’ 或 :class=‘表达式’ class 的表达式可以为： 字符串 :class=“activeClass” 对象 :class="{active: isActive, error: hasError}" 数组 :class="[‘active’, ‘error’]" 注意要加上单引号,不然是获取data中的值
   v-bind:style=‘表达式’ 或 :style=‘表达式’ style 的表达式一般为对象
   :style="{color: activeColor, fontSize: fontSize + ‘px’}" 注意：对象中的value值 activeColor 和 fontSize 是data中的属性

4. v-once： 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

5. 输出HTML指令 v-html 作用： 如果是HTML格式数据，双大括号会将数据解释为普通文本，为了输出真正的 HTML，你需要使用 v-html 指令。 Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染 XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读取 到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。

6. v-for指令：遍历data中存放的数组数据，实现列表的渲染。（v-for指令除了可以迭代数组，还可以迭代对象和整数）

7. v-if指令：取值为true/false，控制元素是否需要被渲染，例如下面代码，设置为true的

   标签成功渲染出来，而设置为false的,

   标签被一行注释代替了，并没有被解析渲染出来。

8. v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。

9. v-show指令：指令的取值为true/false，分别对应着显示/隐藏 他和v-if 的区别，v-show是将元素/标签设置为display,而v-if是将元素/标签从dom中删除，所以v-show开销要小一点

参考文章：https://www.cnblogs.com/baili-luoyun/p/10764983.html