vue 的自定义指令

<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