vue基础教学（18）

最新推荐文章于 2024-09-11 09:13:55 发布

I`ivresse

最新推荐文章于 2024-09-11 09:13:55 发布

阅读量720

点赞数 23

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Taojia9958/article/details/125561255

版权

这篇博客详细讲解了Vue中的自定义指令，包括钩子函数及其参数，并介绍了Vue动画的使用，如过渡效果、CSS过渡和动画，以及如何自定义过渡的类名。还提到了初始渲染过渡的配置方法。

摘要由CSDN通过智能技术生成

一、自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<head>
		<meta charset="utf-8">
		<title>Vue 测试实例</title>

	</head>
	<body>
		<div id="app">
			<p v-fontsize="'50px'">页面载入时，input 元素自动获取焦点：</p>
			<input v-focus>
		</div>
		<script src="vue.js"></script>
		<script>
			/* Vue.directive('focus',{
				//钩子函数
				bind:function(el){
					console.log(el);
				},
				inserted:function(el,binding){
					console.log(el);
					console.log(binding);
					el.focus()
				}
			})
			new Vue({
				el:'#app'
			}) */

			new Vue({
				el: '#app',
				/* directives:{//局部  错误写法
				    
					inserted:function(el,binding){
						el.focus()   
					}
				} */
				/* directives: {
					'focus': {
						inserted: function(el, binding) {
							console.log(binding);
							el.focus()
						}
					},
					'fontsize': function(el, binding) { //设置字体大小
						el.style.fontSize = parseInt(binding.value) + 'px'
					}
				} */

				/* directives: {
					focus:function(el,binding){
						el.focus()
						console.log(el);
						console.log(binding);
					}
				} */
				directives: {
					
					focus(el, binding) {
						console.log(el);
						console.log(binding);
						setTimeout(()=>{
							el.focus()
						},0)
						console.log(this);
						/* this.$nextTick(()=>{
							el.focus()
						}) */
					},
					fontsize(el,binding){
						el.style.fontSize = parseInt(binding.value) + 'px'
					}
				}
			})
		</script>
	</body>