Rumah > Artikel > hujung hadapan web > [Organisasi dan Perkongsian] Kemahiran operasi penting untuk pembangunan Vue, datang dan kumpulkan mereka!
[Organisasi dan Perkongsian] Kemahiran operasi penting untuk pembangunan Vue, datang dan kumpulkan mereka!
- 青灯夜游ke hadapan
- 2022-07-21 20:13:191815semak imbas
Menguasai satu lagi kemahiran, Vue akan meningkatkan kecekapan pengaturcaraan anda Jika anda ingin melakukan tugas anda dengan baik, anda mesti mengasah alatan anda terlebih dahulu. Artikel ini akan berkongsi dengan anda beberapa kemahiran operasi Vue yang penting, saya harap ia akan membantu anda!
![[Organisasi dan Perkongsian] Kemahiran operasi penting untuk pembangunan Vue, datang dan kumpulkan mereka!](https://img.php.cn/upload/article/000/000/024/62d94090525e4768.jpg)
(Mempelajari perkongsian video: tutorial video vue)
Acara papan kekunci
- Dalam
jskita biasanya mengikat acara untuk mendapatkan kod kunci, dan kemudian menggunakan atributeventdalamkeyCodeuntuk mendapatkan kod - Jika kita perlu melaksanakan kunci tetap untuk mencetuskan peristiwa, kita perlu sentiasa menilai, yang sebenarnya sangat menyusahkan
let button = document.querySelector('button')
button.onkeyup = function (e) {
console.log(e.key)
if (e.keyCode == 13) {
console.log('我是回车键')
}
}
-
vuemenyediakan alias untuk beberapa yang biasa digunakan. kunci. , kita hanya perlu menambah alias respons selepas acara -
vueAlias biasa ialah:up/向上箭头,down/向下箭头,left/左箭头,right/右箭头,space/空格,tab/换行,esc/退出,enter/回车,delete/删除
// 只有按下回车键时才会执行 send 方法 <input v-on:keyup.enter="send" type="text">
- Untuk kunci yang tidak memberikan alias dalam
Vue, anda boleh menggunakan nilaikeyasal untuk mengikat , Nilai yang dipanggilkeyialah nilai yang diperolehi olehevent.key Jika nilai - ialah satu huruf, anda boleh menggunakannya secara langsung Jika ia adalah nama sarung unta yang terdiri daripada berbilang perkataan. anda perlu membahagikannya , gunakan
keyuntuk menyambung-
// 只有按下q键时才会执行send方法 <input v-on:keyup.Q="send" type="text"> // 只有按下capslock键时才会执行send方法 <input v-on:keyup.caps-lock="send" type="text">
- Untuk penggunaan kekunci yang lebih kompleks seperti pengubah suai sistem
- ,
ctrldanalt, terdapat dua situasishiftOleh kerana kekunci ini boleh ditekan semasa menekan kekunci lain untuk membentuk kekunci pintasan gabungan - Apabila peristiwa pencetus adalah
- , kita boleh terus menekan pengubah untuk pencetus
keydownApabila peristiwa pencetus ialah - , anda mesti menekan kekunci lain sambil menekan kekunci pengubah suai, dan kemudian melepaskan kekunci lain sebelum acara boleh dicetuskan.
keyup
// keydown事件时按下alt键时就会执行send方法 <input v-on:keydown.Alt="send" type="text"> // keyup事件时需要同时按下组合键才会执行send方法 <input v-on:keyup.Alt.y="send" type="text">
- Sudah tentu kami juga boleh menyesuaikan alias butang
- melalui
- untuk menentukan
Vue.config.keyCodes.自定义键名=键码
// 只有按下回车键时才会执行send方法 <input v-on:keydown.autofelix="send" type="text"> // 13是回车键的键码，将他的别名定义为autofelix Vue.config.keyCodes.autofelix=13Pratonton Imej
- kita sering menggunakan pratonton imej dalam projek , suis, regangan, dsb.
-
viewerjsPasang Sambungan viewerjsPerkenalkan dan konfigurasikan fungsi
npm install viewerjs --save
- Gunakan pemalam pratonton gambar
//引入
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, '图片缩放结束');
}
})Gunakan satu gambar- Gunakan berbilang gambar
<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>
- Marquee
<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>Ini adalah teknik kesan khas yang menyeronokkanSebagai contoh, apabila anda menjemput seseorang di lapangan terbang, anda boleh menggunakan kesan khas marquee telefon bimbit anda untuk menjadi lelaki paling kacak dalam orang ramai- Kesan marquee sebenarnya untuk memadam teks pertama dan menambahnya pada yang terakhir, dengan itu membentuk kesan pergerakan teks
- Undur
<!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>
- Sesuaikan menu klik kanan
- Dalam projek, kadangkala kita perlu menyesuaikan pilihan yang muncul dengan butang kanan tetikus dan bukannya menyemak imbas Pilihan klik kanan lalai pelayan
-
DOMBagi cara melaksanakan menu klik kanan, ia adalah sebenarnya sangat mudah dalam . Hanya gunakan pemalam
<!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>
Pasang pemalam
-
VuePengenalanvue-contextmenujs -
vue-contextmenujsCara menggunakan
npm install vue-contextmenujsAnda boleh menambah ikon pada pilihan
- Anda boleh menggunakan tag untuk menyesuaikan gaya pilihan itu.
//引入 import Vue from 'vue'; import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu);boleh digunakan
- Tetapkan sub-pilihan
-
<i class="icon"></i>Fungsi cetak -
styleFungsi pencetakan sokongan untuk halaman web, yang juga merupakan biasa dalam banyak projek - Dan Vue Untuk menggunakan fungsi pencetakan, anda boleh menggunakan pemalam
disabled - untuk memasang pemalam
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>
- Gunakan
- Gunakan perintah
vue-print-nbuntuk memulakan fungsi pencetakan vue-print-nbPermintaan JSONP
npm install vue-print-nb --save
- Ya ialah
import Vue from 'vue' import Print from 'vue-print-nb' Vue.use(Print);dalam
- Pasang
- sambungan
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>
Perkhidmatan pendaftaran
-
jsonp解决跨域Kaedah penggunaan - Perlu diingat bahawa selepas menggunakan
vueuntuk meminta data, panggilan balik tidak berada dalamjsonpDaripada melaksanakan - dalam
jsonptersuai, ia perlu dipasang pada objek
npm install vue-jsonp --save-dev
- [Cadangan tutorial video berkaitan: Tutorial pengenalan Vuejs
// 在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')Bermula dengan bahagian hadapan web- ]
Atas ialah kandungan terperinci [Organisasi dan Perkongsian] Kemahiran operasi penting untuk pembangunan Vue, datang dan kumpulkan mereka!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Ringkaskan dan kongsi beberapa kombinasi terbaik VueUse, datang dan kumpulkannya untuk digunakan!Artikel seterusnya：Ringkaskan dan kongsi beberapa kombinasi terbaik VueUse, datang dan kumpulkannya untuk digunakan!
Artikel berkaitan
Lihat lagi- Laporan pembangunan Vue pada tahun 2022 [Disusun dan dikongsi]
- Bagaimana untuk menggunakan VueRouter4.x? Panduan permulaan cepat
- Bagaimana untuk mengebumikan hujung depan? Analisis ringkas tentang kaedah menggunakan arahan tersuai vue untuk menguburkan mata bahagian hadapan
- Mari bercakap tentang ciri berguna dalam Vue3: Teleport
- Mari kita bincangkan tentang algoritma perbezaan dua hujung dalam Vue2 dan lihat cara mengemas kini nod!
- Kongsi 6 perpustakaan kebergantungan Vue praktikal (berbaloi untuk dikumpulkan)