element-ui
安裝方式
npm i element-ui -S
在main.js中引入
import ElementUI from 'element-ui'
CDN
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
提供了較多樣式標(biāo)簽,
官網(wǎng)
http://element.eleme.io/#/zh-CN/component/quickstart
關(guān)于scss
安裝sass
npm install sass-loader node-sass webpack --save-dev
如果引用了scss,產(chǎn)生如下的錯(cuò)誤
谷歌瀏覽器
解決辦法:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --save-dev node-sass
運(yùn)行這兩句代碼
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 --
<div v-on:[click.capture=](http://click.capture=)"doThis">...</div>
<!-- 只當(dāng)事件在該元素本身(而不是子元素)觸發(fā)時(shí)觸發(fā)回調(diào) --><div v-on:click.self="doThat">...</div>
<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>
點(diǎn)擊事件的按鍵別名
- .enter
- .tab
- .delete(捕獲刪除和退格鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
.left - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。
.right - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。
.middle - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)。
注: 若添加不成功,在事件后添加native
例如:
@keyup.enter.native="事件名"
一般原生的標(biāo)簽里面不需要加
也可以通過(guò)全局config.keyCode對(duì)象自定義按鍵修飾符別名
//可以使用v-on:keyCodes.f1 = 112;
組合鍵
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
在vue2.0開(kāi)始.已經(jīng)明確規(guī)定給自定義組件綁定原生事件時(shí),必須是使用native修飾符,另外用的比較多的修飾符是 .stop (阻止冒泡事件).prevent (阻止默認(rèn)事件)。
vue-elementui