vue随手记

1.语法 {{ }} 插值表达式:bind 单向绑定 (v-bind)v-model 双向绑定 适用于表单类元素( input / seleted…) (v-model:value)v-on:click @click 2.object.defineProperty()

let person={
  name:'张三',
  sex:'男'
}
// 往person数组中添加age元素
Object.defineProperty(person,’aga’,{
  value:18，
  enumerable:true,   // 控制属性是否可枚举(遍历) 默认false
  writable:true,     // 控制属性是否可修改 默认false
  configurable:true  // 控制属性是否可以删除 默认false

  // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
  get(){
     Console.log(‘有人读取了age属性’)
     Return ‘111’
  }
  // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
  set(value){
    let a=value
  }
})

3. 数据代理

通过一个对象代理对另一个对象的属性的 *** 作（读/写）

let obj = {x:100}
let obj2 = {y:100}

Object.defineProperty(obj2,’x’,{
   get(){
     Return obj.x
   }
   set(value){
     Obj.x = value
   }
})

4.@click事件传参

 //不传参
<button @click=“aa”></button>
aa(event){
  Console.log(event.target.innerText) //点击事件元素的属性
}
//传参 (如果想要事件，可用$event占位)
<button @click=“aa($event,6)”></button> 
aa(event,num){
  Console.log(event.target.innerText) //点击事件元素的属性
}

5.事件捕获 (从外往内) 事件冒泡 (从内向外) 6.vue事件修饰符 .prevent 阻止默认事件 e.g. 阻止跳转.stop 阻止事件冒泡

	<div @click=“aa”>
	   <button @click.stop=“aa”/>
	</div>

.once 事件只触发一次.capture 使用事件的捕获模式 (从外向内).self 只有event.target是当前 *** 作的元素时才触发.passive 事件的默认行为立即执行，无需等待事件回调执行完毕 7. vue键盘事件 @keydown @keyup .enter 回车.delete 删除.esc 退出.space 空格.tab 换行(特殊 必须配合keydown使用).up / .down/ .left/ .right 上/下/左/右 8.计算属性

<template>
  <div>
    <p>{{ num }}</p>
    <p>{{ reverseMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 20,
      message: "msg123",
    };
  },
  computed: {
    num() {
      return this.a + this.b;
    },
    reverseMessage() {
      return this.message.split("").reverse().join("");
    },
  },
};
</script>

//完整写法
computed: {
        "计算属性名": {
            set(value){
            },
            get(){
                return 值
            }
        }
    }

9.监听属性

1、当被监视的属性发生变化时，回调函数自动调用，进行相关 *** 作；
2、监视属性必须存在才能进行监视；

watch:{
	abc:{//abc为监视属性
		immediate:true,//初始化时让handler调用一下
		handler(newValue,oldValue){
			...
		}
	}
   //简写
	abc(newValue,oldValue){
				...
	}
}

深度监视

data{
	numbers:{
			a:1,
			b:1
	}
}，
//监视多级结构中某个属性的变化
watch:{
	'numbers.a':{
		handler(){
			...
		}
	}
}
//监视多级结构中所有属性的变化
watch:{
	numbers :{
		deep:true，
		handler(){
			...
		}
	}
}

10.