[Organisation et partage] Compétences opérationnelles indispensables au développement de Vue, venez les récupérer !

Plus vous maîtrisez de compétences, Vue, plus votre efficacité de programmation sera élevée. Si vous voulez bien faire votre travail, vous devez d'abord affûter vos outils. Cet article partagera avec vous quelques compétences essentielles en matière d'exploitation de Vue. J'espère qu'il vous sera utile !

(Partage de vidéos d'apprentissage : tutoriel vidéo vue)

Événements de clavier

• Dans js, nous lions généralement un événement pour obtenir le code clé, puis utilisons keyCode dans l'attribut event pour obtenir le 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 + &#39;天&#39; + h + &#39;时&#39; + m + &#39;分&#39; + s + &#39;秒&#39;
            },
            //定时器没过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 中使用打印功能，可以使用 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="&#39;#printStart&#39;">打印</button>

JSONP请求

• 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
Si nous devons implémenter une clé fixe pour déclencher l'événement, nous devons constamment juger, ce qui est en fait très gênant

<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 fournit des alias pour certaines clés couramment utilisées, nous venons ajoutez l'alias de réponse après l'événement. Les alias courants dans vue sont : up/up arrow, down/down arrow , left/ flèche gauche, flèche droite/droite, espace/espace, tabulation/saut de ligne, esc/Exit code>, <code>enter/Enter, delete/Deleterrreee🎜Pour les clés qui ne fournissent pas d'alias dans Vue , vous pouvez utiliser le valeur key originale à lier. La valeur dite key est la valeur obtenue par event.key🎜🎜If key . code> Si la valeur est une seule lettre, vous pouvez l'utiliser directement. S'il s'agit d'un nom de cas de chameau composé de plusieurs mots, vous devez le diviser et utiliser - pour vous connecter 🎜🎜rrreee🎜🎜. Pour la modification du système Pour l'utilisation de touches plus complexes telles que ctrl, alt et shift, il existe deux situations🎜🎜car ces touches peuvent être enfoncé et maintenu enfoncé En même temps, appuyez sur d'autres touches pour former une combinaison de touches de raccourci🎜🎜Lorsque l'événement déclencheur est keydown, nous pouvons appuyer directement sur le modificateur pour déclencher🎜🎜Lorsque l'événement déclencheur est keydown code>keyup Lorsque vous appuyez sur la touche de modification, vous devez appuyer sur les autres touches en même temps, puis relâcher les autres touches avant que l'événement puisse être déclenché. 🎜🎜rrreee🎜🎜Bien sûr, nous pouvons également personnaliser l'alias de la clé🎜🎜 via Vue.config.keyCodes Nom de la clé personnalisée = code clé pour le définir🎜🎜rrreee

Aperçu de l'image🎜🎜🎜Nous avons souvent besoin d'utiliser l'aperçu de l'image dans les projets. viewerjs est un plug-in d'aperçu d'image très cool🎜🎜La prise en charge des fonctions inclut l'agrandissement, la réduction, la rotation, le glisser, l'image. switch, stretch, etc. 🎜🎜Installer l'extension viewerjs 🎜🎜rrreee🎜🎜Introduire et configurer la fonction 🎜🎜rrreee🎜🎜Utiliser le plug-in d'aperçu d'image🎜🎜Utiliser pour une seule image🎜🎜 rrreee🎜🎜 Utilisez plusieurs images🎜🎜rrreee

Marquee🎜🎜🎜C'est une technique d'effets spéciaux amusante🎜🎜Par exemple, lorsque vous récupérez des personnes à l'aéroport, vous pouvez utiliser le effets spéciaux de chapiteau sur votre téléphone portable pour devenir le plus beau garçon de la foule🎜🎜L'effet spécial de chapiteau consiste en fait à supprimer le premier texte et à l'ajouter au dernier, formant ainsi l'effet de mouvement du texte🎜🎜rrreee

Compte à rebours🎜 🎜🎜Il existe de nombreuses applications pour la technique du compte à rebours🎜🎜Par exemple, lorsqu'il y a de nombreux produits à acheter rapidement, nous devons avoir un compte à rebours pour rappeler aux utilisateurs l'heure de démarrer le compte à rebours. rush🎜🎜En fait, cela signifie recalculer l'heure chaque seconde et l'attribuer au DOM dans 🎜🎜rrreee

Personnaliser le menu contextuel🎜🎜 🎜Dans le projet, nous devons parfois personnaliser les options qui apparaissent avec le bouton droit de la souris au lieu de celui par défaut du navigateur. L'option clic droit🎜🎜Comment implémenter le menu contextuel est en fait très simple dans Vue code>, utilisez simplement le plug-in <code>vue-contextmenujs🎜🎜Installez le plug-in vue-contextmenujs 🎜🎜rrreee🎜🎜Introduction🎜🎜rrreee🎜🎜Comment utiliser🎜 🎜Vous pouvez utiliser <i class="icon"></i> pour ajouter des icônes aux options🎜🎜 Vous pouvez utiliser la balise style pour personnaliser le style de l'option 🎜🎜Vous pouvez utiliser l'attribut disabled pour désactiver l'option et cliquer dessus🎜🎜Vous pouvez utiliser divided:true pour définir l'option Souligné🎜🎜Vous pouvez utiliser enfants pour définir les sous-options🎜🎜rrreee

Fonction d'impression🎜🎜🎜 Prend en charge la fonction d'impression pour les pages Web, qui est également courante dans de nombreux projets🎜 🎜Pour utilisez la fonction d'impression dans Vue, vous pouvez utiliser le plug-in vue-print-nb🎜🎜Installez le plug-in vue-print-nb🎜🎜rrreee🎜🎜 Présentez le service d'impression🎜🎜rrreee 🎜🎜Utilisez🎜🎜Utilisez la commande v-print pour démarrer la fonction d'impression🎜🎜rrreee

Requête JSONP🎜🎜🎜 jsonp C'est l'un des principaux moyens de résoudre les problèmes inter-domaines🎜🎜Il est donc en fait très important d'apprendre à utiliser jsonp dans vue

🎜🎜Installer l'extension jsonp🎜🎜rrreee🎜🎜Service d'enregistrement🎜🎜rrreee🎜🎜Usage🎜🎜Il convient de noter qu'après avoir utilisé jsonp pour demande des données, le rappel n'est pas dans then 🎜🎜 Au lieu de cela, il est exécuté dans le <code>callbackName personnalisé et doit être monté sur l'objet window 🎜🎜rrreee🎜【Recommandation de didacticiel vidéo connexe : 🎜Tutoriel d'introduction à Vuejs🎜、🎜Démarrer avec le front-end Web🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!