vue常用内置指令和自定义指令

vue常用内置指令

最后两个指令测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--ref 指令的使用-->
			<p ref="con">提示内容</p>
			<!--v-cloak 指令测试 防止内容闪烁-->
			<p v-cloak>v-cloak测试</p>
			
			<button @click="tishi">提示</button>
		</div>
		<script>
			alert("123")
			var v=new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					tishi(){
						//通过 this.$refs 获取某带有ref指令的标签
						var a=this.$refs.con.innerHTML
						console.log(a)
					}
				}
			})
		</script>
	</body>
</html>

自定义指令测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<!--
        	作者：18438301593@163.com
        	时间：2019-09-13
        	描述：自定义指令测试
        -->
		<div id="app">
			<span v-upper-text="msg"></span><br />
			<span v-lower-text="msg"></span>
		</div>
		<br /><br />
		<div id="app2">
			<span v-upper-text="msg"></span><br />
			<span v-lower-text="msg"></span>
		</div>
		<script>
			
			//定义全局指令
			//el: 指令属性所在的标签对象
			//binding： 包含指令信息相关数据的对象（包含数据名msg，和数据本身）
			Vue.directive('upper-text',function(el,binding){
				//将数据转换成大写  再  赋值给标签
				el.textContent=binding.value.toUpperCase();
			})
			
			var v=new Vue({
				el:'#app',
				data:{
					msg:'This is China'
				},
				//定义局部指令，只在app范围内有效
				directives:{
					'lower-text' : function(el,binding){
						el.textContent=binding.value.toLowerCase();
					}
				}
			})
			var v2=new Vue({
				el:'#app2',
				data:{
					msg:'This is HeNan'
				}
			})
		</script>
	</body>
</html>