最近在看vue-element-admin
框架的源码,发现其中还是有不少的语法糖。感觉对初次接触Vue
的开发者还是会造成些困惑,虽然之前我有使用过React
,但是对比起来Vue
还是有不少从未见过的语法糖或简写,为了以便时而查阅,这里就将自己觉得比较重要的内容罗列在此。
常见简写
v-bind属性绑定:
<div v-bind:class="actived"></div>
//等效于
<div :class="actived"></div>
v-on事件绑定@
<div v-on:click="actived"></div>
//等效于
<div @click="actived"></div>
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续向父组件传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 同时使用多个修饰符,分先后 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待onScroll完成 -->
<div v-on:scroll.passive="onScroll"></div>
按键修饰符
允许组件监听具体的按键事件,例如:
<!-- 只有在 key是 Enter 时调用 submit()方法 -->
<input v-on:keyup.enter="submit">
常用按键修饰符
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
系统按键修饰符
.ctrl
.alt
.shift
.meta
在
Mac
系统键盘上,meta
对应command
键(⌘)
。在Windows
系统键盘meta
对应Windows
徽标键(⊞)
鼠标按键修饰符
.left
.right
.middle
这些可以用于监听特定的鼠标点击按键,例如click到底是左键还是右键触发等等。
自定义
自定义事件
注意事件名称必须是转小写之后完全匹配的,例如:
<my-component @my-event="doSomething"></my-component>
//可以使用如下语句触发my-event事件
this.$emit('my-Event')
//但是使用如下语句是不能触发的,因为事件是不会转化命名格式的
this.$emit('myEvent')
//建议始终使用 kebab-case格式 的事件名
自定义命令
在开始自定义命令之前,我们还是先来看看Vue
官方为我们提供了哪些命令:
v-if
:条件渲染命令,只有匹配的那一行标签才会被渲染
<!-- -->
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else-if="good">good</h1>
<h1 v-else>Oh no </h1>
v-show
:带有v-show
的元素始终会被渲染并保留在DOM
中。v-show
只是简单地切换元素的display
<h1 v-show="ok">Hello!</h1>
v-for
:遍历指定列表,并将遍历的子元素传入子组件,注意v-for
的优先级比v-if
更高
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
v-bind:is
:用于切换当前显示的组件
<!-- 当 `currentView` 改变时,组件也跟着改变 -->
<component v-bind:is="currentView"></component>
v-html
:将后面跟的值解释为html
<!-- rawhtml="<span style="color: red">This should be red.</span>" -->
<p>Using mustaches: {{ rawHtml }}</p>
<!-- 下面这段代码将会渲染成红色的内容 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
还有些没涉及到的指令请查看官方API,然后我们来看如何自定义我们自己的命令:
// 注册一个v-focus命令
Vue.directive('focus', {
// 指定一个钩子函数,即什么时候执行这个函数
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
<input v-focus>
按照上面这么配置之后,当页面加载完毕之后,输入框就会被聚焦。钩子函数有如下几个:
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 -
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind
:只调用一次,指令与元素解绑时调用
自定义的命令也是可以传参数的,例如:
<div id="baseexample">
<p>Scroll down the page</p>
<p v-pin="200">Stick me 200px from the top of the page</p>
</div>
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
//可以从binding参数中获取到值
el.style.top = binding.value + 'px'
}
})