• 技术文章 >web前端 >Vue.js

    【整理分享】Vue开发必备的操作技巧,快来收藏吧!

    青灯夜游青灯夜游2022-07-21 20:13:44转载279
    掌握多一门技巧,Vue 编程效率就高一分,工欲善其事,必先利其器。本篇文章给大家整理分享一些必备Vue 的操作技巧,希望对大家有所帮助!

    (学习视频分享:vue视频教程

    键盘事件

    let button = document.querySelector('button')
    
    button.onkeyup = function (e) {
        console.log(e.key)
        if (e.keyCode == 13) {
            console.log('我是回车键')
        }
    }
    // 只有按下回车键时才会执行 send 方法
    <input v-on:keyup.enter="send" type="text">
    // 只有按下q键时才会执行send方法
    <input v-on:keyup.Q="send" type="text">
    
    // 只有按下capslock键时才会执行send方法
    <input v-on:keyup.caps-lock="send" type="text">
    // keydown事件时按下alt键时就会执行send方法
    <input v-on:keydown.Alt="send" type="text">
    
    // keyup事件时需要同时按下组合键才会执行send方法
    <input v-on:keyup.Alt.y="send" type="text">
    // 只有按下回车键时才会执行send方法
    <input v-on:keydown.autofelix="send" type="text">
        
    // 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, '图片缩放结束');
        }
    })
    <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>

    倒计时

    <!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>

    自定义右键菜单

    npm install vue-contextmenujs
    //引入
    import Vue from 'vue';
    import Contextmenu from "vue-contextmenujs"
    
    Vue.use(Contextmenu);
    <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>

    打印功能

    npm install vue-print-nb --save
    import Vue from 'vue'
    import Print from 'vue-print-nb'
    Vue.use(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请求

    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')
    <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>

    【相关视频教程推荐:vuejs入门教程web前端入门

    以上就是【整理分享】Vue开发必备的操作技巧,快来收藏吧!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue
    上一篇:总结分享几个 VueUse 最佳组合,快来收藏使用吧! 下一篇:Vite3.0发布了,看看Vite3.0的新特性
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 2022年 Vue 的发展情况报告【整理分享】• 如何使用VueRouter4.x?快速上手指南• 前端怎么埋点?浅析vue自定义指令进行前端埋点的方法• 聊聊Vue3中的一个好用的功能:Teleport• 聊聊Vue2中的双端diff算法,看看如何更新节点的!• 分享 6 个实用的 Vue 依赖库(值得收藏)
    1/1

    PHP中文网