掌握多一門技巧,Vue 程式效率就高一分,工欲善其事,必先利其器。這篇文章為大家整理分享一些必備Vue 的操作技巧,希望對大家有幫助!
(學習影片分享:vue影片教學)
js
中我們通常透過綁定一個事件,去取得按鍵的編碼,再透過event
中的keyCode
屬性去獲得編碼let button = document.querySelector('button') button.onkeyup = function (e) { console.log(e.key) if (e.keyCode == 13) { console.log('我是回车键') } }
#vue
中給一些常用的按鍵提供了別名,我們只要在事件後面加上回應的別名即可vue
中常見別名有:up/向上箭頭
、down/向下箭頭
、left/左箭頭
、right/右箭頭
、space/空格
、 tab/換行
、esc/退出
、enter/回車
、delete/刪除
// 只有按下回车键时才会执行 send 方法
中未提供別名的鍵,可以使用原始的
key 值去綁定,所謂
key 值就是
event.key 所獲得的值
值是單字母的話直接使用即可,如果是由多個單字組成的駝峰命名,就需要將其拆開,用
- 連接
// 只有按下q键时才会执行send方法 // 只有按下capslock键时才会执行send方法
、
alt、
shift 這些比較複雜的鍵使用而言,分兩種情況
時,我們可以直接按下修飾符即可觸發
時,按下修飾鍵的同時要按下其他鍵,再釋放其他鍵,事件才能被觸發。
// keydown事件时按下alt键时就会执行send方法 // keyup事件时需要同时按下组合键才会执行send方法
的方式去進行定義
// 只有按下回车键时才会执行send方法 // 13是回车键的键码,将他的别名定义为autofelix Vue.config.keyCodes.autofelix=13
是一款非常酷的圖片預覽外掛程式
擴充功能
npm install viewerjs --save
//引入 import Vue from 'vue'; import 'viewerjs/dist/viewer.css'; import Viewer from 'v-viewer'; //按需引入 Vue.use(Viewer); Viewer.setDefaults({ 'inline': true, 'button': true, //右上角按钮 "navbar": true, //底部缩略图 "title": true, //当前图片标题 "toolbar": true, //底部工具栏 "tooltip": true, //显示缩放百分比 "movable": true, //是否可以移动 "zoomable": true, //是否可以缩放 "rotatable": true, //是否可旋转 "scalable": true, //是否可翻转 "transition": true, //使用 CSS3 过度 "fullscreen": true, //播放时是否全屏 "keyboard": true, //是否支持键盘 "url": "data-source", ready: function (e) { console.log(e.type, '组件以初始化'); }, show: function (e) { console.log(e.type, '图片显示开始'); }, shown: function (e) { console.log(e.type, '图片显示结束'); }, hide: function (e) { console.log(e.type, '图片隐藏完成'); }, hidden: function (e) { console.log(e.type, '图片隐藏结束'); }, view: function (e) { console.log(e.type, '视图开始'); }, viewed: function (e) { console.log(e.type, '视图结束'); // 索引为 1 的图片旋转20度 if (e.detail.index === 1) { this.viewer.rotate(20); } }, zoom: function (e) { console.log(e.type, '图片缩放开始'); }, zoomed: function (e) { console.log(e.type, '图片缩放结束'); } })
中
中其實很簡單,只要使用
vue-contextmenujs 外掛程式即可
外掛程式
npm install vue-contextmenujs
//引入 import Vue from 'vue'; import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu);
可以為選項新增圖示
標籤自訂選項的樣式
屬性禁止選項可以點選
設定選項的底線
設定子選項
外掛程式
外掛程式
npm install vue-print-nb --save
import Vue from 'vue' import Print from 'vue-print-nb' Vue.use(Print);
指令即可啟動列印功能
红酥手,黄縢酒,满城春色宫墙柳。
东风恶,欢情薄。
一怀愁绪,几年离索。
错、错、错。
春如旧,人空瘦,泪痕红浥鲛绡透。
桃花落,闲池阁。
山盟虽在,锦书难托。
莫、莫、莫!
是
解決跨域 的主要方式之一
中使用
jsonp 其實還是很重要的
擴充功能
npm install vue-jsonp --save-dev
// 在vue2中注册服务 import Vue from 'vue' import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) // 在vue3中注册服务 import { createApp } from 'vue' import App from './App.vue' import VueJsonp from 'vue-jsonp' createApp(App).use(VueJsonp).mount('#app')
請求資料後,回呼並不是在
then 中執行
中執行,並且需要掛載到
window 物件上
以上是【整理分享】Vue開發必備的操作技巧,快來收藏吧!的詳細內容。更多資訊請關注PHP中文網其他相關文章!