vue复习总结不定时更新vue指令 v-if : 是将元素从DOM树上移除 v-show : 是将元素 display

vue指令

v-if : 是将元素从DOM树上移除

v-show : 是将元素 display:none

说明理解 : 官方上, v-if 会更耗浏览器性能些,其实在实际开发中,可以忽略不计.除非有大量的图片需要重新渲染.影响性能的主要往服务端出发考虑.

v-for

说明理解 : 当 vue 需要渲染一大堆元素时,它会先对模板进行解析形成一个虚拟DOM树,再形成真实元素,当数据发生更新时,那怎样做效率才高? vue 通过diff算法,以key为标识对新旧DOM进行对比更新.

v-model

说明理解 : 可以是表单的数据双向绑定,也可用于父子组件的相互传值,如果定义的属性与方法不是value和input,此时需要在子组件内重新定义model

--- 父组件中 ---
<Son:value=num @input="num=$event"></Son>
--- 此时可以简写成
<Son v-model="num">
data(){
  return{
    num:1
  }
}
--- 子组件中 ---
props{
  value:{
    type:Number,
    required:true,
    }
},
methods:{
  btnClick(){
    this.$emit('input',33)
    }
}

v-text与v-html

说明理解 : 更新DOM元素的innerText/innerHTML,区别就是是否会将标签进行解析显示

v-bind

说明理解 : 给标签属性设置 vue 变量的值

动态类名

说明理解 : 给标签 class 属性动态赋值 :class="{类名:布尔值}"

自定义指令

[全局自定义指令]
v-on:keyup.enter="()=>{}"
v-指令名:属性名.修饰符="值"
Vue.directive('自定义指令名称',指令生命周期)

--- bind:绑定时. 自定义指令绑定于相应DOM元素时执行(类似于vue生命周期的beforeMount)
bind(dom,obj,vnode){
   dom:指令所在dom
   obj:{
            属性名
            修饰符
            值
        }
   vnode:虚拟dom节点信息
           context:能获取指令所在组件的实例对象   
}

--- inserted:渲染时. 指令所在DOM元素添加到父节点时执行(类似于vue生命周期的mounted)
inserted(dom,obj,vnode){}

--- update:更新时. 指令所在组件有更新时执行,不保证更新完成,不保证该更新和当前指令所在dom有关

--- componentUpdated:更新完成时. 指令所在组件更新完成(类似于vue生命周期的updated)

--- unbind:解除绑定. (类似于vue生命周期的beforeDestroy)

[局部自定义指令]
directives(){
  指令名:{
    bind,
    inserted,
    update,
    componentUpdated,
    unbind
  }
}

组件传值

[父子传值]
注意:组件传值是单向数据流即栈不可修改,堆随便改,基本数据类型不可修改,复杂数据类型,只要不修改它的引用地址(栈),它的值随便修改

--- 父传子
  传 子组件内 :属性名=值
  收  props:{
    属性名:{
      type:类型,多种类型[Object,Array,String],
      default:基本数据类型,直接写;复杂数据类型:()=>{return 复杂数据类型}
      required:true, // 必填
      validator:(value)=>{
                   return boolean值
                   true:验证通过
                   false:验证失败
    }
  }
 --- 子传父(子触发父的方法)
 绑定:子组件标签 @子组件方法名="父组件方法"
 触发:子组件内触发:this.$emit('子组件方法名',参数值)
 
[兄弟组件传值]
注意:bus的监听会累加,bus的监听不使用时要销毁,beforeDestroy销毁处理
1:Vue.prototype.$bus=new Vue()
2:监听:this.$bus.$on('方法名',(参数值)=>{...})
3:触发:this.$bus.$emit('方法名',实参值)
4:销毁:this.$bus.$off('方法名')

[.sync修饰符]
1.子组件标签:  :属性名="父组件属性"  @uapate:属性名="父组件属性=$event"
2.子组件标签:  :属性名.sync="父组件属性"
3.子组件内:props:['属性名'];触发:this.$emit('update:属性名',实参值)

[ref传值]
ref除了可以获取DOM元素外, 还可以通过this.$refs.组件标签名 获取组件的实例对象, 以及 this.$parent 获取到父组件实例对象(最近的父级组件)
 
[$attrs与$listeners组件传值]
1.非props属性: 父组件传入子组件属性,但子组件没有接收称为非props属性,非props属性默认会加到子组件标签最外层
(inheritAttrs:true,如果是false就不放到标签最外层显示)
2.所有的非props属性都可以通过$attrs收到
应用: v-bind="$attrs",将所有的非props属性绑定到相应标签,也可以用于组件
3.所有组件上的方法绑定子组件都可以通过$listeners接收
应用: v-on="$listeners"将所有的方法又绑定到组件相应标签,也可以用于组件

vue复习总结 不定时更新