甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

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+

用途：

  • 当用于绑定 class 或 style 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-if 或 v-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://chengdu.cdxwcx.cn/article/ggpoej.html

    其他资讯