资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Vue中的常用内置指令有哪些

这篇文章主要介绍了Vue中的常用内置指令有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的常用内置指令有哪些文章都会有所收获,下面我们一起来看看吧。

成都创新互联公司专注于企业成都营销网站建设、网站重做改版、金城江网站定制设计、自适应品牌网站建设、H5页面制作商城网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为金城江等各大城市提供网站开发制作服务。

0. 插值表达式

说明:插值表达式也叫Mustache语法(即双大括号),双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

  
    
    

{{message}} - {{message}}

              

{{counter * 10}}

    

{{ message.split(" ").reverse().join(" ") }}

                   

{{getReverseMessage()}}

              

{{ isShow ? "哈哈哈": "" }}

    切换                  

1. v-on

说明:给元素绑定事件监听器。

缩写:@

参数:event (使用对象语法则为可选项)

修饰符:

  • .stop ——调用 event.stopPropagation()

  • .prevent ——调用 event.preventDefault()

  • .capture ——在捕获模式添加事件监听器。

  • .self ——只有事件从元素本身发出才触发处理函数。

  • .{keyAlias} ——只在某些按键下触发处理函数。

  • .once ——最多触发一次处理函数。

  • .left ——只在鼠标左键事件触发处理函数。

  • .right ——只在鼠标右键事件触发处理函数。

  • .middle ——只在鼠标中键事件触发处理函数。

  • .passive ——通过 { passive: true } 附加一个 DOM 事件。

详细描述:事件类型由参数来指定。表达式可以是一个方法名,一个内联声明,如果有修饰符则可省略。

  • 当用于普通元素,只监听原生 DOM 事件。当用于自定义元素组件,则监听子组件触发的自定义事件

  • 当监听原生 DOM 事件时,方法接收原生事件作为唯一参数。如果使用内联声明,声明可以访问一个特殊的 $event 变量:v-on:click="handle('ok', $event)"

  • v-on 还支持绑定不带参数的事件/监听器对的对象。请注意,当使用对象语法时,不支持任何修饰符。



































说明:动态的绑定一个或多个 attribute,也可以是组件的 prop。

缩写:: 或者 . (当使用 .prop 修饰符)

修饰符:

  • .camel ——将短横线命名的 attribute 转变为驼峰式命名。

  • .prop ——强制绑定为 DOM property。3.2+

  • .attr ——强制绑定为 DOM attribute。3.2+

用途:

  • 当用于绑定 classstyle attribute,v-bind 支持额外的值类型如数组或对象。详见下方的指南链接。

  • 在处理绑定时,Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property,则 Vue 会把作为 DOM property 赋值,而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型,但是你也可以显式用 .prop.attr 修饰符来强制绑定方式。有时这是必要的,特别是在和自定义元素打交道时。

  • 当用于组件 props 绑定时,所绑定的 props 必须在子组件中已被正确声明。

  • 当不带参数使用时,可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。

















3. v-if

说明:基于表达式值的真假性,来条件性地渲染元素或者模板片段。

哈哈哈哈

4. v-else

说明:表示 v-ifv-if / v-else-if 链式调用的“else 块”。

Coder
Bin

ishow 为 true 显示 Coder,反之显示 Bin

5. v-else-if

说明:表示 v-if 的“else if 块”。可以进行链式调用。


  
   90">优秀
   60">良好
  不及格

v-model 后面会说明

6. v-show

说明基于表达式值的真假性,来改变元素的可见性。

详细描述v-show 通过设置内联样式的 display CSS 属性来工作,当元素可见时将使用初始 display 值。当条件改变时,也会触发过渡效果。

  
    哈哈哈哈
  

  

v-show 不支持在   

v-model修饰符的使用

 
    
    

    
    

    
    
    查看结果
  

  

8. v-for

说明:基于原始数据多次渲染元素或模板块。

详细描述:

指令值必须使用特殊语法 alias in expression 为正在迭代的元素提供一个别名:


  {{ item.text }}

或者,你也可以为索引指定别名 (如果用在对象,则是键值):



v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素,你需要用特殊 attribute key 来提供一个排序提示:


  {{ item.text }}

9. v-slot

说明:用于声明具名插槽或是期望接收 props 的作用域插槽。

缩写:#

参数:插槽名 (可选,默认是 default)

仅限:

  •        Default slot content           Footer content                  {{ slotProps.item.text }}           Mouse position: {{ x }}, {{ y }}

    10. v-text

    说明:更新元素的文本内容。

    详细描述:v-text 通过设置元素的 textContent 属性来工作,因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分,应该使用 mustache interpolations 代替。

    
    
    {{msg}}

    11. v-html

    说明:更新元素的 innerHTML。

    详细描述:v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板,不如重新想想怎么使用组件来代替。

    安全说明: 在你的站点上动态渲染任意的 HTML 是非常危险的,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要将用户提供的内容作为插值

    12. v-pre

    说明:跳过该元素及其所有子元素的编译。

    详细描述:元素内具有 v-pre,所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

    {{ this will not be compiled }}

    13. v-once

    说明:跳过该元素及其所有子元素的编译。

    详细描述:在随后的重新渲染,元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

    
    This will never change: {{msg}}
    
    
      

    comment

      

    {{msg}}

        {{i}}

    14. v-cloak

    说明:用于隐藏尚未完成编译的 DOM 模板。

    详细描述:该指令只在没有构建步骤的环境下需要使用。

    • 当使用直接在 DOM 中书写的模板时,可能会出现一种叫做“未编译模板闪现”的情况:用户可能先看到的是还没编译完成的双大括号标签,直到挂载的组件将它们替换为实际渲染的内容。

    • v-cloak 会保留在所绑定的元素上,直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则,它可以在组件编译完毕前隐藏原始模板。

    [v-cloak] {
      display: none;
    }
    
      {{ message }}
    

    关于“Vue中的常用内置指令有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue中的常用内置指令有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


    本文标题:Vue中的常用内置指令有哪些
    分享链接:http://cdkjz.cn/article/ggpoej.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220