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 名称-绑定值对的对象。

哈哈哈哈

查看结果

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

0. 插值表达式

{{message}} - {{message}}

{{counter * 10}}

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

{{getReverseMessage()}}

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

1. v-on

3. v-if

4. v-else

5. v-else-if

6. v-show

7. v-model

`intro: {{intro}}`

isAgree: {{isAgree}}

hobbies: {{hobbies}}

gender: {{gender}}

fruit: {{fruit}}

`8. v-for`

`9. v-slot`

`10. v-text`

`11. v-html`

`12. v-pre`

`13. v-once`

comment

`14. v-cloak`

其他资讯