vue常用属性

Vue常用的属性

自定义指令

在vue中除了自己默认的v-指令还有自定义的指令，一般对dom的操作用到，这个指令也分为局部和全局的

• 全局的适应整个项目就是在一整个项目中都可以调用，在全局进行注册的，
• 局部的只适用于当前的组件
• 当在局部组件和全局组件同名的时候，局部组件的优先级大于全局组件
• 注意这里的this指向的是window
• 在使用的时候直接v-自定义的指令名字即可，传参的话后面括号里面写参数注意接受的时候第一个参数是事件对象

//全局的指令创建 通过directive进行创建，
//！！！全局的配置不能直接写在Vue的实例之中，
//没有参数的 
	Vue.directive('指令名字'，{
		//钩子函数↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
		钩子函数名字:function(el){
			//在这里写需要的dom操作以及业务逻辑
			//el这个参数是挂载的dom对象
		}
	})
//传参
		Vue.directive('指令名字'，{
		//钩子函数↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
		钩子函数名字:function(el，参数){
			//在这里写需要的dom操作以及业务逻辑
			//el这个参数是挂载的dom对象
		}
	})
//一般函数的简写这个使用场景为bind的钩子和update触发相同内容的时候，并且不关心其他的钩子使用这个一般用不上
Vue.directive('指令名字',(el)=>{
	//代码逻辑
})

//局部组件的定义 通过directives
	//在new Vue实例的时候添加directives注册局部的自定义指令，局部自定义只能在当前组件实例中使用，
	
	directives: {
  			指令名: {
    		// 指令的定义
    			钩子函数名: function (el,binding) {
      		// 业务逻辑
   				 }
 			 }
		}
//用不上的简写
		directives:{
			指令名:function(el){
				//逻辑代码
			}
		}

自定义指令常用的三个钩子函数根据自己的需求进行使用

• bind:这个钩子指令第一次绑定元素的时候进行调用，在这个钩子中是获取不到父级节点的，这里注意的是父级节点不存在（null）
• inseretd:这个钩子实在被绑定元素插入到父级节点的时候触发，这个钩子中获取的到父级元素节点
• update：在数据发生更新的时候进行调用的，
• componentUpdated：指定元素及子节点的数据更新完成之后触发的函数
• unbind:在取消绑定后触发的钩子函数

计算属性 - computed

在计算属性中适合对多个变量或者对象进行处理后返回的一个结果，就是在这个属性中做一些计算操作，当监听到数据发生变换之后做出相应的计算并进行返回，这个计算属性定义在vue对象中，通过关键字computed属性对象中定义一个个函数，并且返回一个值，使用计算属性时候喝data中数据使用的方法一样，

简单的说就是计算属性在依赖的数据不变的情况下支持数据缓存操作，
计算属性在调用的时候回对第一次的结果进行缓存如果依赖的数据没有变换那么就不会发生改变，当发生变换的时候才会再次计算，在methods中调用一次就执行一次
相对来说计算属性computed性能消耗相对methods要少

注意

• 计算属性只要在数据源不发生变换那么内部的函数就执行一次，其他时候的调用就是调用缓存的内容 ，同时因为这点那么计算属性就必须需要一个return

	new Vue({
	el:"#app",
	data(){
		return{
		}
	},
	//计算属性
	computer：{
		函数名字（）{
			//代码执行快
			}
		}
	
	})

监听器 -watch

使用watch来对data中的数据进行监听， （这个地方要注意一定是data中存在的数据）

• 一般用在数据变化执行异步或开销比较大的操作
• 声明监听器使用关键词watch ，
• 声明的监听器方法都有两个参数第一个是改变后新的值，第二个参数是之前的值
• 要注意在监听对象或者数组的时候需要进行深度接听属性内部的变化（deep =true）

<div id = "app">
</div>
<script>
	const vm = new Vue({
		el:"#app",
		data(){
			return {
				//这就是一个普普通通的对象
				userinfo:{
					data_:"",
					data2:"",
					data3:""
				}
			}
		},
		//监听函数
		watch：{
				//handler这个是固定的一个写法	调用这个函数
				handler（val）{
					//在这里写事件处理函数当数据发生变换之后进行调用，这个函数里面的两个参数第一个是新的数据，改变之后的数据，第二 个函数是改变之前的参数
				}，
				//配置参数
				//深度监听*（可以监听到复杂类型的数据内部的变化）
				deep:true
			}
		})
</script>

过滤器-filter

作用于数据的筛选，过滤器也分为全局和局部的，过滤器简单的说就是一个方法对数据进行还行筛选，这个方法在vue3的时候以及呗弃用了到时候就使用methods这个钩子函数代替了，
语法：

1. {{等待过滤的数据 | 过滤器方法名字}}
2. {{等待修饰的数据 | 过滤器的方法名字（参数1，2，…）}}

<!-- 过滤器的常规用法-->
<div>{{数据|过滤器名字}}</div>
<!-- 过滤器可以按照顺序使用多个，如果有一样的效果那么就按照顺序执行后面的讲覆盖前面的-->
<div>{{数据| 过滤器1，过滤器2}}</div>
<!-- 过滤器也是可以传参数，传入的参数在过滤方法中第二个参数开始接受-->
<div>{{数据|过滤器名字(参数)}}</div>
<!-- 可以在v-bind中使用-->
<div v-bind:id ='data | 过滤器名字'></div>

	//全局的过滤器
	Vue.filter('过滤器的名字'，(val[,data1,data2...]) =>{
	//第一个参数是固定要处理的数据后面是根据需求传入的
	//过滤器要对需要过滤的数据进行的操作注意需要return出去
	return ...
	})

//局部的过滤器
在使用的vue实例的地方声明即可注意关键字的声明 这个是带s的
filters：{
	过滤器的名字:(val[,data1,data2...])=>{
	//这个也是一样的 第一个参数是固定的
	//同样的是需要return 
	return...	
		}
}