Feeling 2.0 What a pit , Custom instructions and 1.0 Totally different , And the documentation is not very clear , Here's one I wrote demo, Hope to help you better understand the custom instructions

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="vue.js"></script> -->
</head> <body>
<div id="box">
<p v-demo="{color:'red'}"> Red text </p>
<input type="text" name="" v-focus>
</div>
<script type="text/javascript">
window.onload = function() {
// Global instructions
Vue.directive('demo',{
bind:function(el,val){
el.style.color = val.value.color
}
});
Vue.directive('focus',{
inserted: function(el,val) {
el.focus()
}
});
// Local command
var app = new Vue({
el: '#box',
directives: {
demo: {
bind: function(el, val) {
el.style.color = val.value.color
}
},
focus: {
inserted: function(el,val) {
el.focus()
}
}
}
});
}
</script>
</body> </html>

vue2.0 More articles about how to use custom instructions

  1. vue2.0 Custom instruction

    The previous article said vue2.0 filter , It's very similar to custom instruction filters , In terms of definition alone , It's exactly the same as the filter , Divided into local instructions , And global instructions . It's just filter Change it to directive The difference between . Filters are generally used for ...

  2. Vue2.0 - Custom instruction vue-directive

    Vue.directive(' Instructions ',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : Element bound by instruction , It can be used ...

  3. vue2.0 Custom instruction

    Vue Instructions Vue In order to v- start , It works on HTML Element , Binding instructions to elements , Add some special behavior to the bound element . for example : <h1 v-if="yes">Yes</h1 ...

  4. vue2.0 Custom instruction details

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. CKEditor5 + vue2.0 Custom image upload 、highlight、 Font, etc

    Because of business needs , To be in vue2.0 Use the rich text editor in your project , After research, multiple editors ,CKEditor5  Support  vue, So we use . because CKEditor5  Few documents , Here's the reference and some basic usage . CKEdit ...

  6. Vue How to use custom instructions in !

    In addition to the core function default built-in instructions (v-model  and  v-show),Vue It is also allowed to register custom instructions . Be careful , stay Vue2.0 in , The main form of code reuse and abstraction is component . However , In some cases , You still need to be on the average DOM ...

  7. vue3.0 Custom instruction (drectives)

    in the majority of cases , You can modify the data view , Or vice versa . But still can not avoid occasionally to operate the original DOM, Now , You can use custom instructions . for instance , You want the text box on the page to focus automatically , Without learning custom instructions , We may ...

  8. vue2.0 Methods of communication between parent and child components

    vue2.0 Component communication method :props Pass value and emit monitor .(.sync Method has been removed . Please click )(dispatch- and -broadcast The method has also been abandoned ) props Method pass value :Props Now it's just a single pass ...

  9. vue2.0 Customize Popup (MessageBox) Components

    Component template src/components/MessageBox/index.vue <!-- Customize MessageBox Components --> <template> <div c ...

Random recommendation

  1. Java Heap memory is different from stack memory (Java Heap Memory vs Stack Memory Difference)

    --reference Java Heap Memory vs Stack Memory Difference In data structure , Heap and stack are two basic data structures , and Java The stack memory space and heap memory space in are ...

  2. clientTarget With the user agent alias

    Add a specific user agent alias to the internal collection of user agent aliases . come from <https://msdn.microsoft.com/zh-cn/library/6379d90d(v=vs.110).aspx&g ...

  3. HackerRank &quot;Square Subsequences&quot; !!!

    Firt thought: an variation to LCS problem - but this one has many tricky detail. I learnt the soluti ...

  4. towards plsql Import data from

    1.TOOLS-->ODBC IMPORTER 2.TOOLS-->TEXT IMPORTER3.sqlldr userid=zj/zj@orcl control=D:\test.ctl ...

  5. js~this The trap of

    stay JS in , The current object usually uses this Express , stay jquery in , The current object is to use $(this) Express , These are the most basic knowledge , Nothing to say , But here's the thing , When this At a certain depth , You need to know what it means , It refers to LiDang ...

  6. SQL Inside COALESCE function

    stay SQL In addition to is null There's another way to use it COALESCE( value [, ...]) select COALESCE(NULL,NULL,'AAAA') -> 'AAAA' It means the front one ...

  7. ES6 let and const command (3)

    const Used to declare constants . Once declared , Can't change . const In the declaration, you must initialize , It's an error to declare without assigning values const The scope of let equally , Only valid at the declared block level scope . const The constants declared by the command are not raised either , It also exists ...

  8. [BZOJ]1050 travel comf(HAOI2006)

    Graph theory has always been small C Weaknesses , Compared with other types of questions , Graph theory usually has a little more variety , The routine is also more elusive . Description Here's an undirected graph ,N(N<=500) vertices , M(M<=5000) side , Each side has a weight ...

  9. C++ Date time use

    #include <time.h> #include <stdio.h> #include <iostream> #include <string> # ...

  10. tar Package the files in the current directory but not the record

    I want to pack some files today , But I don't want to package it in For example, I want to test Make a package of the files in the directory , Install normal commands to tar zcf test.tar.gz test This will definitely put test Type in the catalog, too , After decompression, it must be te ...