vue入门学习(二)自定义指令

最新推荐文章于 2024-06-10 13:17:15 发布

LLL_LH

最新推荐文章于 2024-06-10 13:17:15 发布

阅读量144

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/84845281

版权

Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
    	[v-cloak]{display: none;}
    </style>
  </head>
  <body>
  	<!--ref指令：指定唯一标识，vue对象通过$refs属性访问这个元素对象
  	v-cloak指令:防止闪现，与css配合[v-cloak]:{display:none;}  在vue解析之前存在，解析之后消失。-->
    <div id="app">
    	<p ref="msg">Hello world!</p>
    	<button @click="handleBtn">点击</button>
    	<p v-cloak>{{mess}}</p> 
    	<!--3、使用指令: v-my-directive="xxx"-->
    </div>
    <div id="upper">
    	<p v-upper-text="txt"></p> //I LOVE YOU,BABY!
    	<p v-lower-text="txt"></p> //
    </div>
    <p>------------------------------------</p>
    <div id="lower">
    	<p v-upper-text="txt"></p> //I LOVE YOU,BABY!
    	<p v-lower-text="txt"></p> //i love you,baby!
    	<p v-add="add"></p>  //这是addpuls
    </div>
    <script>
    	//1、注册全局指令
    	Vue.directive('upper-text',function(el,bind){
    		console.log(el);
    		console.log(bind);
    		el.innerHTML = bind.value.toUpperCase();
    	});
    	
    	new Vue({
    		el: '#app',
    		data: {
    			mess: '你好，明天'
    		},
    		methods: {
    			handleBtn() {
    				console.log(this.$refs.msg.textContent); //Hello world!
    				console.log(this.$refs.msg.innerHTML);   //Hello world!
    				console.log(this.$refs.msg.innerText);   //Hello world!
    				
    			}
    		}
    	});
    	
    	new Vue({
    		el:"#upper",
    		data: {
    			txt:"I Love You,Baby!"
    		}
    	})
    	
    	new Vue({
    		el:"#lower",
    		data: {
    			txt:"I Love You,Baby!",
    			add: '这是add'
    		},
    		//2、注册局部指令,只在当前vue实例有效
    		directives: {
    			'lower-text': function(el,bind) {
    				el.innerHTML = bind.value.toLowerCase();
    			},
    			'add': function(el,bind) {
    				el.textContent = bind.value +'puls';
    			}
    		},
    	})
    	
    </script>
  </body>
</html>