[Organisasi dan Perkongsian] Kemahiran operasi penting untuk pembangunan Vue, datang dan kumpulkan mereka!

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!

(Mempelajari perkongsian video: tutorial video vue)

Acara papan kekunci

• Dalam js kita biasanya mengikat acara untuk mendapatkan kod kunci, dan kemudian menggunakan atribut event dalam keyCode untuk 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('我是回车键')
    }
}

• vue menyediakan alias untuk beberapa yang biasa digunakan. kunci. , kita hanya perlu menambah alias respons selepas acara
• vue Alias ​​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 nilai key asal untuk mengikat , Nilai yang dipanggil key ialah nilai yang diperolehi oleh event.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 key untuk 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
• , ctrl dan alt, terdapat dua situasishift
Oleh kerana kekunci ini boleh ditekan semasa menekan kekunci lain untuk membentuk kekunci pintasan gabungan
• Apabila peristiwa pencetus adalah
• , kita boleh terus menekan pengubah untuk pencetuskeydown
Apabila 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=13

Pratonton Imej

kita sering menggunakan pratonton imej dalam projek , suis, regangan, dsb.
• viewerjsPasang
Sambungan
• viewerjs
Perkenalkan 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 menyeronokkan

Sebagai 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

Malah, ini bermaksud untuk mengira semula masa setiap saat, dan Berikan nilai kepada

<!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
• DOM Bagi 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 + &#39;天&#39; + h + &#39;时&#39; + m + &#39;分&#39; + s + &#39;秒&#39;
            },
            //定时器没过1秒参数减1
            Time() {
                setInterval(() => {
                    this.seconds -= 1
                    this.countDown()
                }, 1000)
            },
        }
    })
</script>

</html>

Pasang pemalam

• VuePengenalanvue-contextmenujs
• vue-contextmenujsCara menggunakan

Anda boleh menggunakan

npm install vue-contextmenujs

Anda 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

untuk memperkenalkan perkhidmatan pencetakan

<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-nb untuk memulakan fungsi pencetakan
• vue-print-nb
Permintaan JSONP

npm install vue-print-nb --save

• Ya ialah

, jadi sebenarnya sangat penting untuk belajar menggunakan

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="&#39;#printStart&#39;">打印</button>

Perkhidmatan pendaftaran

• jsonp解决跨域Kaedah penggunaan
• Perlu diingat bahawa selepas menggunakan vue untuk meminta data, panggilan balik tidak berada dalam jsonp Daripada melaksanakan
• dalam jsonp tersuai, 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!