本文共 1851 字，大约阅读时间需要 6 分钟。

最近在看vue-element-admin框架的源码，发现其中还是有不少的语法糖。感觉对初次接触Vue的开发者还是会造成些困惑，虽然之前我有使用过React，但是对比起来Vue还是有不少从未见过的语法糖或简写,为了以便时而查阅，这里就将自己觉得比较重要的内容罗列在此。

常见简写

v-bind属性绑定:

   
//等效于
   

v-on事件绑定@

   
//等效于
   

事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

   
   
   
   
   
   
   
   
   
    ...
   
   
   
   
    ...
   
   
   
   

按键修饰符

允许组件监听具体的按键事件,例如:

常用按键修饰符

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统按键修饰符

• .ctrl
• .alt
• .shift
• .meta

在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在Windows 系统键盘 meta 对应 Windows徽标键 (⊞)

鼠标按键修饰符

• .left
• .right
• .middle

这些可以用于监听特定的鼠标点击按键，例如click到底是左键还是右键触发等等。

自定义

自定义事件

注意事件名称必须是转小写之后完全匹配的，例如：

//可以使用如下语句触发my-event事件this.$emit('my-Event')//但是使用如下语句是不能触发的,因为事件是不会转化命名格式的this.$emit('myEvent')//建议始终使用 kebab-case格式 的事件名

自定义命令

在开始自定义命令之前,我们还是先来看看Vue官方为我们提供了哪些命令:

• v-if:条件渲染命令，只有匹配的那一行标签才会被渲染

   
Vue is awesome!
good
Oh no 

• v-show:带有 v-show 的元素始终会被渲染并保留在 DOM中。v-show 只是简单地切换元素的display

Hello!

• v-for:遍历指定列表，并将遍历的子元素传入子组件，注意v-for 的优先级比 v-if 更高

   
  
    
    {
  { item.message }}  
   

• v-bind:is:用于切换当前显示的组件

• v-html:将后面跟的值解释为html

   
Using mustaches: {
  { rawHtml }}
   
Using v-html directive: 

还有些没涉及到的指令请查看,然后我们来看如何自定义我们自己的命令:

// 注册一个v-focus命令Vue.directive('focus', {
     // 指定一个钩子函数，即什么时候执行这个函数  inserted: function (el) {
       // 聚焦元素    el.focus()  }})

按照上面这么配置之后，当页面加载完毕之后，输入框就会被聚焦。钩子函数有如下几个:

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用

自定义的命令也是可以传参数的，例如:

   
  
    
Scroll down the page
  
    
Stick me 200px from the top of the page
   

Vue.directive('pin', {
     bind: function (el, binding, vnode) {
       el.style.position = 'fixed'    //可以从binding参数中获取到值    el.style.top = binding.value + 'px'  }})

转载地址：http://aqfen.baihongyu.com/