[Organization and Sharing] Essential operating skills for Vue development, come and collect them!

Mastering more skills will increase your programming efficiency. If you want to do your job well, you must first sharpen your tools. This article will share with you some essential Vue operation skills. I hope it will be helpful to you!

(Learning video sharing:

)

Keyboard events

• In js we usually bind an event to get the code of the key, and then pass ## in event #keyCode Attribute to get the code
If we need to implement a fixed key to trigger the event, we need to constantly judge, which is actually very troublesome

let button = document.querySelector('button')

button.onkeyup = function (e) {
    console.log(e.key)
    if (e.keyCode == 13) {
        console.log('我是回车键')
    }
}

• vue provides aliases for some commonly used keys. We only need to add the response alias after the event.
• vue Common aliases are: up/ Up arrow, down/down arrow, left/left arrow, right/right arrow, space/space, tab/line feed, esc/exit, enter/carriage return, delete/delete

// 只有按下回车键时才会执行 send 方法

// 只有按下q键时才会执行send方法


// 只有按下capslock键时才会执行send方法

// keydown事件时按下alt键时就会执行send方法


// keyup事件时需要同时按下组合键才会执行send方法

// 只有按下回车键时才会执行send方法

    
// 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, '图片缩放结束');
    }
})

    
    
    




    

        应援
        暂停
        
{{ msg }}
    

There are many applications for the countdown technique
• For example, when there are many rush-buying products, we need to have a countdown to remind users of the time to start the rush
• In fact, it is every other Seconds, recalculate the time and assign it to
• DOM

    
    




    

        
抢购开始时间：{{count}}
    

In the project, we sometimes You need to customize the options that appear with the right mouse button instead of the browser's default right-click options
• How to implement the right-click menu is actually very simple in
• Vue, just use vue-contextmenujs Plug-in can be installed
• vue-contextmenujs Plug-in

npm install vue-contextmenujs

Introduction

//引入
import Vue from 'vue';
import Contextmenu from "vue-contextmenujs"

Vue.use(Contextmenu);

How to use
• You can use
• You can add icons to options
You can use
• style Style of label customization option
You can use
• disabled You can click the attribute to disable the option
You can use
• divided:true Set the underline of the option
You can use
• children to set sub-options

Supports printing function for web pages, which is also common in many projects
• To use the printing function in Vue, you can use the
• vue-print-nb plug-in
installation
• vue-print-nb plug-in

npm install vue-print-nb --save

Introducing printing service

import Vue from 'vue'
import Print from 'vue-print-nb'
Vue.use(Print);

Use
• Use the
• v-print command to start the printing function

    
红酥手，黄縢酒，满城春色宫墙柳。
    
东风恶，欢情薄。
    
一怀愁绪，几年离索。
    
错、错、错。
    
春如旧，人空瘦，泪痕红浥鲛绡透。
    
桃花落，闲池阁。
    
山盟虽在，锦书难托。
    
莫、莫、莫！

打印

• jsonp is one of the main ways to solve cross-domain issues
So learn how to It is actually very important to use
• jsonp in vue
Installation
• jsonpExtension

npm install vue-jsonp --save-dev

Registration Service

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

Usage method
• It should be noted that after using
• jsonp to request data, the callback is not then Instead of executing
in the custom
• callbackName, it needs to be mounted on the window object

vuejs entry tutorial, web front-end entry】

The above is the detailed content of [Organization and Sharing] Essential operating skills for Vue development, come and collect them!. For more information, please follow other related articles on the PHP Chinese website!