星空网 > 软件开发 > 网页设计

Vue指令总结

今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨。进行Vue的指令烹饪吧。

  1. v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值
  2. v-html: string 用法:更新元素的innerHTML;注意:网站动态渲染任意HTML,容易导致XXS攻击
  3. v-show:any 用法:根据表达式真假值,切换元素的 display css 属性 
  4. v-if:any  用法:表达式的真假条件渲染元素。在切换时元素以及它的数据绑定/组件被销毁并且重建。如果是<template>,并提出它的内容作为条件块。 条件变化时改指令出发过渡效果。
  5. v-else :不需要表达式  用法:前面必须用 v-if 或者 v-else-if
  6. v-else-if:any 用法:前面必须用v-if 或者v-else-if  表示v-if的else if块。可以链式调用
  7. v-for :Array | Object | number | string  用法:基于源数据多次渲染元素或者模板块 语法:alias in expression
  8. v-on: 缩写@;:Function |  Inline Statement  参数 $event( required) 修饰符      .stop---调用 event.stopPropagation(),
                .capture --添加事件侦听器时使用capture模式
                .prevent ---调用event.preventDefault()
                .self---只当事件是从着特定键触发时才触发回调
                .{keyCode | keyAlias} -- 只当事件是从特定键触发时才触发回调
                .native ---监听组件根元素的原生事件
                .once----只触发一次回调
                .left---(2.2.0)只当点击鼠标左键时触发
                .right ---(2.2.0)只当点击鼠标右键时触发
                .middle ---(2.2.0)只当点击鼠标中键时触发
    用法:绑定事件**。事件类型由参数指定
    Vue指令总结Vue指令总结
    9.v-bind:缩写:;类型: any (with argument)  | Object  (without argument) 参数:attrOrProp (optional) ;修饰符: .prop ---被用于绑定DOM 属性;.camel ---transform the kebab-case attribute name into camelCase .(supported since 2.1.0) 用法: 在绑定 class 和 style 特性时,支持其它类型的值。如对象和数组;在绑定prop时,子组件必须声明prop 
    Vue指令总结

    Vue指令总结

    10.v-model :限制<input> <select> components ;
       修饰符:.lazy---取代input 监听change事件
                  .number ---输出字符串转为数字
                  .trim----输入首尾空格
    11. v-pre  用法:跳过这个元素和它的子元素的编译过程
    12.v-cloak:用法:{v-cloak} {display:none}可以隐藏未编译的Mustach标签直到实例准备完毕
    13.v-once :详细 只能渲染元素和组件一次,随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
    Vue指令总结

     

最后致谢 vue官方提供的指令:指令




原标题:Vue指令总结

关键词:VUE

VUE
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

站外推广也被封号?是风控升级还是卖家操作违规?:https://www.kjdsnews.com/a/655401.html
选品思路与技巧(初级):https://www.kjdsnews.com/a/655402.html
家用需求激增,这一行业“智能科技型”产品迎来爆发周期!:https://www.kjdsnews.com/a/655403.html
想要打造Tik Tok爆款,必须要了解这3点:https://www.kjdsnews.com/a/655404.html
玩转社交媒体!宠物独角兽DTC品牌成功借壳上市:https://www.kjdsnews.com/a/655405.html
速卖通首次把猫晚带到法国 双十一能否再创记录?:https://www.kjdsnews.com/a/655406.html
皇帝的皇宫=:https://www.vstour.cn/a/363188.html
海南岛琼海市旅游景点 琼海市的旅游景点:https://www.vstour.cn/a/363189.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流