这篇文章主要介绍了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 名称-绑定值对的对象。