master

分支 (1)

管理

管理

master

VueLearning
/
8.自定义指令.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 生产环境版本，优化了尺寸和速度
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		-->
		<style>

		</style>
	</head>
	<body>
		<div id="app">
			<input v-focus />
			<div v-cmd="{color:'#66CCFF',text:'自定义指令'}"></div>
		</div>
	</body>
	<script>
		/*Vue.directive('focus',{
			inserted: function(el){
				el.focus()
			}
		})*/
		Vue.directive('cmd',function(el,binding){
			el.innerHTML = binding.value.text
			el.style.backgroundColor = binding.value.color
		})
		//两种方式等效，都要放在#app里才能生效
		var app = new Vue({
			el: '#app',
			directives:{
				focus:{
					inserted:function(el){
						el.focus()
					}
				}
			},
			data:{

			}
		})
	</script>
</html>