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)

仅限: