Je mehr Fähigkeiten Sie beherrschen, Vue, desto höher wird Ihre Programmiereffizienz sein. Wenn Sie Ihre Arbeit gut machen wollen, müssen Sie zuerst Ihre Werkzeuge schärfen. Dieser Artikel wird Ihnen einige wichtige Vue-Betriebsfähigkeiten vermitteln. Ich hoffe, er wird Ihnen hilfreich sein!
![[Organisation und Teilen] Grundlegende Bedienfähigkeiten für die Vue-Entwicklung, kommen Sie und sammeln Sie sie!](https://img.php.cn/upload/article/000/000/024/62d94090525e4768.jpg)
(Lernvideo-Sharing: vue-Video-Tutorial)
js binden wir normalerweise ein Ereignis, um den Tastencode zu erhalten, und verwenden dann keyCode im Attribut event, um den zu erhalten Codejs 中我们通常通过绑定一个事件，去获取按键的编码，再通过 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 方法 <input v-on:keyup.enter="send" type="text">
Vue 中未提供别名的键，可以使用原始的 key 值去绑定，所谓 key 值就是 event.key 所获得的值key 值是单个字母的话直接使用即可，如果是由多个单词组成的驼峰命名，就需要将其拆开，用 - 连接// 只有按下q键时才会执行send方法 <input v-on:keyup.Q="send" type="text"> // 只有按下capslock键时才会执行send方法 <input v-on:keyup.caps-lock="send" type="text">
ctrl、alt、shift 这些比较复杂的键使用而言，分两种情况keydown 时，我们可以直接按下修饰符即可触发keyup 时，按下修饰键的同时要按下其他键，再释放其他键，事件才能被触发。// keydown事件时按下alt键时就会执行send方法 <input v-on:keydown.Alt="send" type="text"> // keyup事件时需要同时按下组合键才会执行send方法 <input v-on:keyup.Alt.y="send" type="text">
Vue.config.keyCodes.自定义键名=键码 的方式去进行定义// 只有按下回车键时才会执行send方法 <input v-on:keydown.autofelix="send" type="text"> // 13是回车键的键码，将他的别名定义为autofelix Vue.config.keyCodes.autofelix=13
viewerjs 是一款非常炫酷的图片预览插件viewerjs 扩展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, '图片缩放结束');
}
})<template>
<div>
<viewer>
<img :src="cover" style="cursor: pointer;" height="80px">
</viewer>
</div>
</template>
<script>
export default {
data() {
return {
cover: "//www.autofelix.com/images/cover.png"
}
}
}
</script><template>
<div>
<viewer :images="imgList">
<img v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" />
</viewer>
</div>
</template>
<script>
export default {
data() {
return {
imgList: [
"//www.autofelix.com/images/pic_1.png",
"//www.autofelix.com/images/pic_2.png",
"//www.autofelix.com/images/pic_3.png",
"//www.autofelix.com/images/pic_4.png",
"//www.autofelix.com/images/pic_5.png"
]
}
}
}
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
<style type="text/css">
#app {
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<button @click="run">应援</button>
<button @click="stop">暂停</button>
<h3>{{ msg }}</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "飞兔小哥，飞兔小哥，我爱飞兔小哥~~~",
timer: null // 定时器
},
methods: {
run() {
// 如果timer已经赋值就返回
if (this.timer) return;
this.timer = setInterval(() => {
// msg分割为数组
var arr = this.msg.split('');
// shift删除并返回删除的那个，push添加到最后
// 把数组第一个元素放入到最后面
arr.push(arr.shift());
// arr.join('')吧数组连接为字符串复制给msg
this.msg = arr.join('');
}, 100)
},
stop() {
//清除定时器
clearInterval(this.timer);
//清除定时器之后，需要重新将定时器置为null
this.timer = null;
}
}
})
</script>
</html>DOM 中<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<body>
<div id="app">
<div>抢购开始时间：{{count}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
count: '', //倒计时
seconds: 864000 // 10天的秒数
}
},
mounted() {
this.Time() //调用定时器
},
methods: {
// 天 时 分 秒 格式化函数
countDown() {
let d = parseInt(this.seconds / (24 * 60 * 60))
d = d < 10 ? "0" + d : d
let h = parseInt(this.seconds / (60 * 60) % 24);
h = h < 10 ? "0" + h : h
let m = parseInt(this.seconds / 60 % 60);
m = m < 10 ? "0" + m : m
let s = parseInt(this.seconds % 60);
s = s < 10 ? "0" + s : s
this.count = d + '天' + h + '时' + m + '分' + s + '秒'
},
//定时器没过1秒参数减1
Time() {
setInterval(() => {
this.seconds -= 1
this.countDown()
}, 1000)
},
}
})
</script>
</html>Vue 中其实很简单，只要使用 vue-contextmenujs 插件即可vue-contextmenujs 插件npm install vue-contextmenujs
//引入 import Vue from 'vue'; import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu);
<i class="icon"></i> 可以给选项添加图标style 标签自定义选项的样式disabled 属性禁止选项可以点击divided:true 设置选项的下划线children 设置子选项<style>
.custom-class .menu_item__available:hover,
.custom-class .menu_item_expand {
background: lightblue !important;
color: #e65a65 !important;
}
</style>
<template>
<div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>
<script>
import Vue from 'vue'
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
export default {
methods: {
onContextmenu(event) {
this.$contextmenu({
items: [
{
label: "返回",
onClick: () => {
// 添加点击事件后的自定义逻辑
}
},
{ label: "前进", disabled: true },
{ label: "重载", divided: true, icon: "el-icon-refresh" },
{ label: "打印", icon: "el-icon-printer" },
{
label: "翻译",
divided: true,
minWidth: 0,
children: [{ label: "翻译成中文" }, { label: "翻译成英文" }]
},
{
label: "截图",
minWidth: 0,
children: [
{
label: "截取部分",
onClick: () => {
// 添加点击事件后的自定义逻辑
}
},
{ label: "截取全屏" }
]
}
],
event, // 鼠标事件信息
customClass: "custom-class", // 自定义菜单 class
zIndex: 3, // 菜单样式 z-index
minWidth: 230 // 主菜单最小宽度
});
return false;
}
}
};
</script>vue-print-nb 插件vue-print-nb 插件npm install vue-print-nb --save
import Vue from 'vue' import Print from 'vue-print-nb' Vue.use(Print);
v-print 指令即可启动打印功能<div id="printStart"> <p>红酥手，黄縢酒，满城春色宫墙柳。</p> <p>东风恶，欢情薄。</p> <p>一怀愁绪，几年离索。</p> <p>错、错、错。</p> <p>春如旧，人空瘦，泪痕红浥鲛绡透。</p> <p>桃花落，闲池阁。</p> <p>山盟虽在，锦书难托。</p> <p>莫、莫、莫！</p> </div> <button v-print="'#printStart'">打印</button>
jsonp 是 解决跨域 的主要方式之一vue 中使用 jsonp 其实还是很重要的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')jsonp 请求数据后，回调并不是在 then 中执行callbackName 中执行,并且需要挂载到 window
<script>
export default {
data() {...},
created() {
this.getUserInfo()
},
mounted() {
window.jsonpCallback = (data) => {
// 返回后回调
console.log(data)
}
},
methods: {
getUserInfo() {
this.$jsonp(this.url, {
callbackQuery: "callbackParam",
callbackName: "jsonpCallback"
})
.then((json) => {
// 返回的jsonp数据不会放这里，而是在 window.jsonpCallback
console.log(json)
})
}
}
}
</script>vue stellt Aliase für einige häufig verwendete Schlüssel bereit, wir haben gerade Fügen Sie den Antwortalias nach dem Ereignis hinzu. Häufige Aliase in vue sind: oben/oben-Pfeil, unten/unten-Pfeil, links/ Pfeil nach links, Pfeil nach rechts/rechts, Leerzeichen/Leerzeichen, Tab/Zeilenvorschub, esc/Exit code>, <code>enter/Enter, delete/Deleterrreee🎜Für Schlüssel, die in Vue keine Aliase bereitstellen, können Sie die verwenden ursprünglicher key-Wert zum Binden. Der sogenannte key-Wert ist der von event.key erhaltene Wert. code> Wenn der Wert ein einzelner Buchstabe ist, können Sie ihn direkt verwenden. Wenn es sich um einen Kamelnamen handelt, der aus mehreren Wörtern besteht, müssen Sie ihn aufteilen und - verwenden, um 🎜🎜rrreee🎜🎜 zu verbinden Für Systemänderungen Bei der Verwendung komplexerer Tasten wie Strg, Alt und Umschalt gibt es zwei Situationen🎜🎜weil diese Tasten dies können gedrückt und gehalten werden. Drücken Sie gleichzeitig andere Tasten, um eine Tastenkombination zu bilden🎜🎜Wenn das Auslöseereignis keydown ist, können wir den Modifikator direkt drücken, um auszulösen🎜🎜Wenn das Auslöseereignis keyup Wenn Sie die Zusatztaste drücken, müssen Sie gleichzeitig andere Tasten drücken und dann die anderen Tasten loslassen, bevor das Ereignis ausgelöst werden kann. 🎜🎜rrreee🎜🎜Natürlich können wir auch Schlüsselaliase anpassen🎜🎜Über Vue.config.keyCodes, um ihn zu definieren🎜🎜rrreeeviewerjs ist ein sehr cooles Bildvorschau-Plug-in🎜🎜Die Funktionsunterstützung umfasst Bildvergrößerung, -verkleinerung, Drehen, Ziehen und Wechseln , Dehnen usw. 🎜🎜Installieren Sie die viewerjs-Erweiterung 🎜🎜rrreee🎜🎜Führen Sie die Funktion ein und konfigurieren Sie sie 🎜🎜rrreee🎜🎜Verwenden Sie das Bildvorschau-Plug-in 🎜🎜Für ein einzelnes Bild verwenden🎜🎜rrreee 🎜🎜 Mehrere Bilder verwenden🎜🎜rrreeeDOM in 🎜🎜rrreeeVue eigentlich sehr einfach Verwenden Sie das Plug-in vue-contextmenujs <i class="icon"></i> zum Hinzufügen von Symbolen zu Optionen🎜🎜 Sie können das Tag style verwenden, um den Stil der Option anzupassen 🎜 🎜Sie können das Attribut disabled verwenden, um die Option zu deaktivieren und darauf zu klicken. 🎜🎜Sie können divided:true verwenden, um die Option Unterstreichen festzulegen. 🎜🎜Sie können children verwenden zum Festlegen von Unteroptionen🎜🎜rrreeevue-print-nb verwenden🎜🎜Installieren Sie das Plug-in vue-print-nb🎜🎜rrreee🎜🎜Stellen Sie den Druckdienst vor 🎜🎜rrreee 🎜🎜Verwenden🎜🎜Verwenden Sie den Befehl v-print, um die Druckfunktion zu starten🎜🎜rrreeejsonp Dies ist eine der Hauptmethoden zur Lösung domänenübergreifender Probleme🎜🎜Daher ist es tatsächlich sehr wichtig zu lernen, wie man jsonp in vue🎜🎜Installieren Sie die <code>jsonp-Erweiterung🎜🎜rrreee🎜🎜Registrierungsdienst🎜🎜rrreee🎜🎜Verwendung🎜🎜Es ist zu beachten, dass nach der Verwendung von jsonp Daten angefordert werden , der Rückruf ist nicht in then 🎜🎜 Stattdessen wird er im benutzerdefinierten <code>callbackName ausgeführt und muss auf dem window-Objekt gemountet werden 🎜🎜 rrreee🎜【Empfehlung für ein entsprechendes Video-Tutorial: 🎜 Vuejs-Einführungs-Tutorial🎜、🎜Erste Schritte mit dem Web-Frontend🎜】🎜
Das obige ist der detaillierte Inhalt von[Organisation und Teilen] Grundlegende Bedienfähigkeiten für die Vue-Entwicklung, kommen Sie und sammeln Sie sie!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
