• 指令


    v-bind:单向绑定命令

        可以绑定样式,v-bind:style="{k:v,k2,v2...}"

               v-bind:class ="{'类1':boolean或表达式,’2‘:...}"

         

    v-on:绑定事件监听器。

       v-on:事件 = “事件处理函数”

       事件对象 $event

       修饰符 self 只有本身响应事件

           stop 阻止冒泡

              几乎等同于  @click = "two"

                    two(e){

                      e.canceBubble = true;

                    }

           prevent 阻止默认行为

    v-model:双向绑定命令 视图变化 数据变化,数据变化,视图变化

        修饰符 number 输入字符串转为有效数字

            trim 输入首尾空格过滤

            lazy  取代 input 监听 change 事件

        

    v-text:渲染文本到标签,会覆盖标签内原有内容trim

        更新元素的textContent,如果要更新部分的textContent,需trim要使用{{}}

    v-html:更新元素的innerHTML

    v-if:条件渲染,初始渲染条件为false,什么都不做,为true,渲染条件块

    v-show:根据表达式的真假切换元素的display css属性,与v-if不同的是不管初始条件是什么都会被渲染出来,之切换css操作

    频繁切换用v-show,条件很少改变用v-if

    v-else:与编程语言中的else一样

    v-else-if:与编程语言中的else-if一样

    v-for: 遍历数组  :key = "唯一的值"

      

       //被迭代数组别名 in 源数组数据,当前项索引  可用of代替in
    <div v-for="item in items" :key="item.id">
    {{ item.name }} </div>

    v-pre:跳过这个元素和他子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译

    v-cloak:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

    v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

  • 相关阅读:
    linux下解除端口占用
    设计模式(二)观察者模式
    设计模式(一) 策略模式
    loj #6235. 区间素数个数
    loj #2013. 「SCOI2016」幸运数字
    loj #6014. 「网络流 24 题」最长 k 可重区间集
    loj #6013. 「网络流 24 题」负载平衡
    loj #2255. 「SNOI2017」炸弹
    loj #2051. 「HNOI2016」序列
    loj #6122. 「网络流 24 题」航空路线问题
  • 原文地址:https://www.cnblogs.com/dudududadada/p/13395185.html
Copyright © 2020-2023  润新知