当前位置：网站首页>Atguigu---16-custom instruction

Atguigu---16-custom instruction

2022-06-24 08:02:00 【Zhangshao】

List of articles

Custom Instruction Summary ：

Custom Instruction Summary ：

One 、 Definition grammar ：

(1). Local command ：
new Vue({ new Vue({
directives:{ Instruction name : Configuration object } or directives{ Instruction name : Callback function }
}) })
(2). Global instructions ：
Vue.directive( Instruction name , Configuration object ) or Vue.directive( Instruction name , Callback function )

Two 、 Commonly used in configuration objects 3 A callback ：

(1).bind： Called when the instruction successfully binds to the element .
(2).inserted： Called when the element of the instruction is inserted into the page .
(3).update： Called when the template structure of the instruction is re parsed .

3、 ... and 、 remarks ：

1. Instructions are defined without v-, But use it with v-;
2. If the instruction name is more than one word , To use kebab-case Naming method , Do not use camelCase name .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title> Custom instruction </title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--  demand 1： Define a v-big Instructions , and v-text The function is similar to , But it will enlarge the bound value 10 times .  demand 2： Define a v-fbind Instructions , and v-bind The function is similar to , But you can make it bound input Element gets focus by default .  Custom Instruction Summary ：  One 、 Definition grammar ： (1). Local command ： new Vue({ new Vue({ directives:{ Instruction name : Configuration object }  or  directives{ Instruction name : Callback function } }) }) (2). Global instructions ： Vue.directive( Instruction name , Configuration object )  or  Vue.directive( Instruction name , Callback function )  Two 、 Commonly used in configuration objects 3 A callback ： (1).bind： Called when the instruction successfully binds to the element . (2).inserted： Called when the element of the instruction is inserted into the page . (3).update： Called when the template structure of the instruction is re parsed .  3、 ... and 、 remarks ： 1. Instructions are defined without v-, But use it with v-; 2. If the instruction name is more than one word , To use kebab-case Naming method , Do not use camelCase name . -->
		<!--  Prepare a container -->
		<div id="root">
			<h2>{
   {name}}</h2>
			<h2> Current n The value is ：<span v-text="n"></span> </h2>
			<!-- <h2> Zoom in 10 After times n The value is ：<span v-big-number="n"></span> </h2> -->
			<h2> Zoom in 10 After times n The value is ：<span v-big="n"></span> </h2>
			<button @click="n++"> Am I n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript"> Vue.config.productionTip = false // Define global instructions  /* Vue.directive('fbind',{ // When an instruction is successfully bound to an element （ at first ） bind(element,binding){ element.value = binding.value }, // When the element of the instruction is inserted into the page  inserted(element,binding){ element.focus() }, // When the template of the instruction is parsed again  update(element,binding){ element.value = binding.value } }) */ new Vue({
       el:'#root', data:{
       name:' Silicon Valley ', n:1 }, directives:{
       //big When will the function be called ？1. When an instruction is successfully bound to an element （ at first ）.2. When the template of the instruction is parsed again . /* 'big-number'(element,binding){ // console.log('big') element.innerText = binding.value * 10 }, */ big(element,binding){
       console.log('big',this) // Pay attention to this yes window // console.log('big') element.innerText = binding.value * 10 }, fbind:{
       // When an instruction is successfully bound to an element （ at first ） bind(element,binding){
       element.value = binding.value }, // When the element of the instruction is inserted into the page  inserted(element,binding){
       element.focus() }, // When the template of the instruction is parsed again  update(element,binding){
       element.value = binding.value } } } }) </script>
</html>