vue 的自定义指令

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

<template>     <div id="app">         <img alt="Vue logo" src="./assets/logo.png">         <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->         <input v-focus>         <div v-ele="{'name':name,'color':color}">123</div>         <div class="chdiv" @click="chdiv">修改</div>     </div> </template>   <script>     //import HelloWorld from './components/HelloWorld.vue'       export default {         name: 'App',         data() {             return {                 name: "heqiang",                 age:13,                 color:"red"             }         },         directives:{             focus:{                 inserted:function(el,bind){                     el.focus();                     // console.log(el);                     // console.log("uuuuu");                 }             },             ele:{                 bind:function(e,bind){                   // console.log("bind钩子");                   // console.log(e);                   // console.log(bind);                   //e.innerHTML="中国人"                 },                 inserted:function(el,bind){                      //var s = JSON.stringify                     el.style.background='red'                     el.innerHTML=bind.value.name;                 },                 update:function(el,bind){                     console.log(el);                     console.log(bind);                     el.innerHTML=bind.value.name;                     //console.log(oldVnode);                 }             }         },         methods:{             chdiv(){                console.log("11111111");                this.name="老司机"             }         }     } </script>   <style>     #app {         font-family: Avenir, Helvetica, Arial, sans-serif;         -webkit-font-smoothing: antialiased;         -moz-osx-font-smoothing: grayscale;         text-align: center;         color: #2c3e50;         margin-top: 60px;     } </style>

网址

https://cn.vuejs.org/v2/guide/custom-directive.html