Background of vUE custom instruction generation
- We know that front-end programmers write all kinds of code that ultimately works on the DOM elements on the page. For example, use HTML to fix the DOM infrastructure, use CSS to set the STYLE of the DOM, and use JS to do some DOM interaction. Because DOM elements are the “physical layer,” they need to be presented to the user. The DOM is a building block that we manipulate and “build” into various effects.
So all the fancy front-end frameworks are based on the front end of a three-piece PACKAGE of HTML, CSS, JS
- So jQuery does
$Character, direct DOM operation is very convenient, convenient is convenient, but direct DOM operation will cause page backflow redraw, and will slightly waste browser performance, easy to appear page stuck, resulting in user experience is not good.
There are pros and cons to everything, and manipulating the DOM directly can sometimes, if not always, be a quick and easy choice.
- Therefore, vue and React are introduced. Instead of manipulating the DOM directly, they use the virtual DOM as a buffer. The virtual DOM collects information about who needs to manipulate the DOM and what is manipulated in the DOM. It feels like a fragment of a JS document. In this way, browser performance will be optimized and improved considerably. Therefore, vUE does not encourage direct manipulation of the DOM, because there is a virtual DOM, why should you directly manipulate the real DOM? Use the VUE command
The virtual DOM is really a good thing. Thumbs up to the big guy. We know that the built-in instructions provided by VUE are convenient and solve most DOM manipulation problems, but not all of them.
- So in some cases, the vUE built-in instructions do not meet our needs. What to do? Of course, the Vue founders also thought of this problem, so they created a Vue custom directive that encapsulated a set of rules for hook functions and corresponding parameters for us to use to solve the problem more easily
A VUE custom directive is a direct manipulation of the DOM. In some cases, vue custom directives are a good choice
Vue custom instruction classification
There are two types of vUE custom instructions
1. Global custom directive (global registration required)2. Component custom directive (requires internal component registration)
Case one is the latter and case two is the former
A custom directive is actually an object with some hook functions on it. The hook functions on a custom directive object are similar to the lifecycle hook functions of a VUE component
General use of global custom instructions will be more, after all, convenient reuse
Explains how to use vUE custom commands
Case 1 El-Input Initial Capture focus (component custom directive)
This case is actually the case on the official website. Here we modify it to make it easier for us to understand it.
Suppose we want an effect where the el-Input field automatically gets focus when the page is loaded, just as the input field automatically gets focus when the Baidu Click page is opened.
<template>
<div>
<! -- Hang directives on elements -->
<el-input v-myFocus></el-input>
</div>
</template>
<script>
export default {
name:"myCode"
// This example is a local custom directive, so the directives are written inside the component
directives: {
// Give the directive a name, myFocus
myFocus: {
inserted: function (el) { // Inserted Hook is when the element is about to be inserted into the document, after created, before mounted. You can see the print order
// The el argument is: custom who to write on, which DOM element to hang on, the EL is that DOM element object, and the hook function has other arguments, which we'll talk about later
console.log("Custom instructions -->", el.childNodes);
// Focus the el-Input element on the native input layer, so you need to fetch the child element from the native JS, find the input, and look at the print result
el.childNodes[1].focus(); // Implement the focus method of native Input}},},created() { console.log("created-->")},mounted() { console.log("mounted-->")}}</script>
Copy the codeTo demonstrate, just copy and paste the code
Case 2 Copy v-show function (global custom instruction)
The renderings are as follows
Look at the renderings, the function is actually no different from V-show, such an example is convenient to better understand the vUE custom instructions
First, create a new utils folder to store the index.js file used to write global custom directives
// Import vue and use vue's directive method to register a custom directive
import Vue from 'vue'
Vue.directive('showshow', { // The directive's name is showshow
// Bind is usually used to initialize data, but also to bind events and so on
bind(el, binding, vnode) {
console.log(el, binding.value, vnode);
// The el argument is the element currently used by the directive, the bind argument is the data bound by the directive, and the vnode is the virtual DOM
const flag = binding.value // Find the binding identifier in the component
if (flag == false) {
el.style.display = 'none'
} else {
el.style.display = 'inline-block'}},The // INSERTED function is called to insert a DOM node on the element
inserted(el, binding, vnode){},// Update and componentUpdated are both used for updates, but the former is more commonly used, and the oldVnode parameter is only available in these two hooks
componentUpdated(el, binding, vnode, oldVnode){},update(el, binding, vnode, oldVnode) {
const flag = binding.value
if (flag == false) {
el.style.display = 'none'
} else {
el.style.display = 'inline-block'}},// Unbind is used when unbind, such as to remove the event bound in the first bind function
unbind(el, binding, vnode){}});Copy the codeStep 2: Import the file that writes the global custom directive in main.js.
import Vue from 'vue'
import App from './App.vue'
import router from "@/router/index.js" // Import the routing table
import store from './store/index' / / introduce vuex
// ...
// Import to use the global custom directive
import './views/utils/index.js'
let vvvue = new Vue({
render: h= > h(App),
router,
store // Mount it
}).$mount('#app')
Copy the codeThird, use global custom directives in the component
<template>
<div>
<el-button @click="change" type="primary">Show hide switch back and forth</el-button>
<! -- add vue custom directive V-showshow to this button, and bind this custom directive to the data in vue component, so bind isShowBtn flag, by controlling this flag control show and hide -->
<el-button type="primary" plain v-showshow="isShowBtn">Copy the V-show button</el-button>
</div>
</template>
<script>
export default {
data() {
return {
isShowBtn: true.// Initialize to true to display
};
},
methods: {
// Click to toggle show and hide
change() { this.isShowBtn = !this.isShowBtn },
},
};
</script>
Copy the codeSome people say, clams? Isn’t that unnecessary? Well, it’s not, because we haven’t seen a particular scenario yet. The above two examples focus on learning the idea of custom instructions. Let’s take a small example, click text copy function.
Case 3: Implementing the V-copy custom instruction
rendering
Click and copy, then press Ctrl + V in the appropriate position on the computer to paste the text
The first step is to write custom instruction code
import Vue from 'vue'
Vue.directive('copy', { // The instruction's name is v-copy
// Bind initializes
bind(el, binding, vnode){},The // INSERTED function is called to insert a DOM node on the element
inserted(el, binding, vnode) { // The el argument is the element currently used by the directive, the bind argument is the data bound by the directive, and the vnode is the virtual DOM
// Attach the copyFn function to el for easy use
el.copyFn = () = > {
console.log('Which DOM did I click on?', el);
// Create the selected range
var range = document.createRange();
// Select the dom you clicked on
range.selectNode(el);
// Remove the clipboard contents, without this statement, ie and Edge will not copy
window.getSelection().removeAllRanges();
// Copy the text content in el to the clipboard
window.getSelection().addRange(range);
// Enable the copy and paste function
let flag = document.execCommand('copy');
// Pay attention to compatibility issues
flag ? alert('Copy succeeded, ready to paste') : alert('Current browser does not support one-click copy, please copy and paste manually')
}
el.addEventListener('click', el.copyFn)
},
// Update and componentUpdated are both updated, but the former is more commonly used
The oldVnode argument is only available in the two hooks, and the pre-update and post-update DOM is only available after the update
componentUpdated(el, binding, vnode, oldVnode) {
console.log('componentUpdated');
},
update(el, binding, vnode, oldVnode) {
console.log('update');
},
// Unbind is used when unbind, such as to remove the event bound in the first bind function
unbind(el, binding, vnode) {
el.removeEventListener('click', el.copyFn)
}
});
/** * To get started with the custom instruction hook quickly, we can use this simple understanding. Install hook --> created and Mounted Hook --> Updated and Update hook --> Updated and unbind hook --> Destroyed hook * * The specific sequence you can copy the code to run after printing to see, so that more convenient and accurate understanding of * */
Copy the codeThe second step is to use it in a.vue file
<template>
<div>
<! Add v-copy custom instruction to each item -->
<div class="item" v-copy v-for="(item, index) in arr" :key="index">{{ item }}</div>
</div>
</template>
<script>
export default {
name: "TestVue".data() {
return {
arr: ["Sun Wukong"."Pig Eight Quit"."Sand Monk"."Tang's monk"]}; }};</script>
<style lang="less" scoped>
.item {
margin-top: 12px;
font-size: 24px;
font-weight: bolder;
cursor: pointer;
}
</style>
Copy the codeSupplement the case knowledge
- Range object: developer.mozilla.org/zh-CN/docs/…
- Selection object: developer.mozilla.org/zh-CN/docs/…
- ExecCommand method: developer.mozilla.org/zh-CN/docs/…
On the MDN said execCommand method may be deleted this problem in the future, no one answer on the good, also, incidentally labeled: segmentfault.com/q/101000002…
conclusion
When do I need a custom directive?
When built-in instructions aren't enough, when special effects need to be done, when low-level operations need to be performed on ordinary DOM elements
Custom instruction is close to the native JS writing way, we reasonably use its hook function and corresponding parameters, can achieve more flexible effect function. After all, although VUE provides a lot of built-in instructions, which is convenient for us to use directly and fast, it also limits some divergent thinking of programmers. Each has its own advantages and disadvantages, so it needs to be weighed