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 等滚动事件完成
  1. 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中的属性

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

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

  4. v-for指令:遍历data中存放的数组数据,实现列表的渲染。(v-for指令除了可以迭代数组,还可以迭代对象和整数)

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

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

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

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

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

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

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值