V-on key modifier
Vue built-in key modifier
Colloquially, it refers to events that monitor keyboard input. Vue allows you to add key modifiers for V-Ons when listening for keyboard events. As follows:
Vue built-in key modifiers:.enter.tab.delete (capture “delete” and “backspace” keys).ESC. space.up.down.left. Right Version 1.0.8+ : Single-letter key aliases are supported.
For example, 'keyup' refers to a listening event when the keyboard (any key) is lifted. '. Enter 'refers to the key modifier that presses the Enter key. Let's put these two together.Copy the code@keyup.enter Example: Listening events after the enter key is pressed
@keyup.enter=”addData” : Hold down the Enter key and execute the addData() method. Full name is V-ON :key.enter=”addData”.
Let’s take the list feature from 01-04 as an example. Before, clicking the “Add” button would add an item to the list. Now request: After pressing Enter in the input box, you can also add an item.
The core code is as follows:
<input type="text" v-model="formData.name" @keyup.enter="addData">
Copy the codeNote that if we write @keyup=”addData”, the effect is that the addData() method is executed as soon as any key of the keyboard is typed (before the enter key is pressed), which is obviously not what we want. So we’re going to put a modifier. Enter, which means only enter.
Custom global directives
Examples of custom global directives 1
Example 1: Make the specified text box get focus automatically
If we wanted to implement this example, we would write native JS like this:
Document.getelementbyid ('search').focus()Copy the codeLocation of code:
But we don’t recommend it. We can implement this example with custom directives in Vue. The steps are as follows.
Use vue.directive () to customize the global directive:
// Define the global directive v-focus: let the text box automatically get focus // parameter 1: the directive name. Note that the directive name does not need to be preceded by a V - prefix. However: when 'calling', the instruction name must be prefixed with v- // argument 2: Directive ('focus', {// In each function, the first argument, always el, refers to the element to which the directive is bound. The el argument, Is a native JS object (DOM object) bind: Function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) { // el.focus()}, inserted: Function (el) {// [el.focus()] [insert] el.focus() // The action related to the JS behavior, which is best done while inserted, }, updated: function (el) {}})Copy the codeIn the above code, if we put el.focus() in the bind method, it will not work (but will not report an error). It doesn’t work because the element hasn’t been inserted into the DOM at the time the bind method is executed.
Inserted, updated: Bind, inserted, updated
(2) Add ‘ ‘to the specified text box:
<input type="text" id="search" v-model="keywords" v-focus>
Copy the codeThe full version code is as follows:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>Document</title> <script SRC = "vue2.5.16. Js" > < / script > < / head > < body > < div id = "app" > search box: <input type="text" id="search" V-model ="name" v-focus> </div> <script> Note that the directive name does not need to be preceded by a V - prefix. However: when 'calling', the instruction name must be prefixed with v- // argument 2: Directive ('focus', {// In each function, the first argument, always el, refers to the element to which the directive is bound. The el argument, Is a native JS object (DOM object) bind: Function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) {function (el) { // el.focus()}, inserted: Function (el) {// [el.focus()] [insert] el.focus() // The action related to the JS behavior, which is best done while inserted, Function (el) {}}) new Vue({el: '#app', data: {name: 'smyhvae' } }) </script> </body> </html>Copy the codeCustom global directives: use the second binding argument of the hook function to retrieve the passed value
Example 2: Setting the color of a DOM element
Referring to Example 1, we might style DOM elements like this:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>Document</title> <script SRC = "vue2.5.16. Js" > < / script > < / head > < body > < div id = "app" > search box: <input type="text" id="search" v-model="name" v-color> Directive ('color', {bind: Function (el) {// When an instruction is bound to an element, the bind function is called immediately, el.style.color = 'red'; }, inserted: Function (el) {// INSERTED: while the element is inserted into the DOM, the inserted function is executed [triggered once]. // El.focus ()}, updated: function (el) {}}) new Vue({el: '#app', data: { name: '' } }) </script> </body> </html>Copy the codeAs shown in the code above, we define a directive v-color, and then use this directive in the input tag to set the color attribute for the element. But there is a drawback to this code: the value of the color attribute is written out when the instruction is defined. How to improve it? We can pass parameters in DOM elements. Take a look. Directive (‘color’, function (el, binding) {// Note that this function is the same as writing code to bind and update
## Custom private directivesCopy the codeCustom private directives: Directives that are customized inside a VUE object are called private directives. This instruction is useful only in the regulatory region specified by the EL of the current VUE object.
Example code :(setting the font-weight property of text)
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>Document</title> <script SRC ="vue2.5.16.js"></script> </head> <body> <div id="app"> <span v-fontweight="600"> Life one </span> </div> <script> new Vue({el: '#app', data: {name: 'smyhvae'}, // Self-defined private directive directives: {'fontweight': {bind: function (el, binding) { el.style.fontWeight = binding.value; } } } }) </script> </body> </html>Copy the codeEffect:
Note that el.style.fontWeight sets the property value to at least 600, otherwise you will not see the effect of bold.
Short form for custom private directives:
In many cases, you might want to trigger the same behavior with bind and UPDATE and not care about the other hooks. For example, in the code above, we can write it in shorthand form:
// Self-defined private directive (short form) caching: {'fontweight': Function (el, binding) {// Note that this function is equivalent to the code in bind and update el.style.fontWeight = binding. }}Copy the code\