Vue知识总结(一)

V-model的原理？

           使用v-bind绑定input属性,当输入框内容发生改变触发input事件时,触发input事件获取        输入框的值修改data中的数据

生命周期函数

• BeforeCreate    实例创建前,此时data和methods都没有创建完成
• Created     实例创建完成,data和methods已经挂载完毕,首屏的ajax请求需要在Created中发送
• BeforeMount  页面渲染前
• Mounted   页面渲染完成,此时页面已经渲染完毕,需要操作DOM元素初始化的操作 要在这个钩子函数中写
• BeforeUpdata   根据Data中更改的数据重新渲染页面,此时数据新的数据已经更新完毕,但页面没有重新渲染完毕
• Updataed   此时新的数据和页面都已经渲染完成,页面和数据都是最新的
• BeforeDestroy   实例销毁前,此时的实例仍然可以使用
• Destroyed   实例销毁完成,此时实例中的所有东西都会解绑,事件移除,子实例被销毁

组件中data中的数据为什么要return

当一个页面中有多个组件时，如果组件中的数据不在函数中定义，更改一个组件中的数据可能会造成其他组件的数据一起更改

指令

• 指令参数 在指令后面使用：接受参数  例如 v-on：click
• 动态参数 （2.6语法）使用[ ]包裹的js表达式  例如v-bind：[ishref]当ishref值为href时，等价于v-bind：href 动态参数解析为字符串，不支持空格和大写   当动态参数的值为null时表示移除该参数
• v-html和v-text  v-html修改html结构，v-text只修改标签内容 ，为了防止受到xss攻击，需要用户输入的数据不能使用v-html
• v-bind 绑定数据  缩写为：
• v-on 绑定事件 缩写为@ 
  • 事件修饰符
    • .stop  阻止事件传播
    • .prevnet 阻止默认事件
    • self  当触发事件元素是自身时触发事件
    • .once  只执行一次
    • .capture  添加事件监听时使用事件捕获模式  事件触发时先执行一次事件函数,再向内传递  
    • .passive 事件监听触发了立即执行,不会等待事件函数执行结束 ,相当于addEventListener的passive属性(不会阻止浏览器的默认行为),与prevent一起使用prevent无效
  • 需要操作原生dom操作时,传入参数$event

    "warn('Form cannot be submitted yet.', $event)">
      Submit
    
    
    methods: {
      warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
      }
    }
    复制代码

• v-if 和v-show 
  •  v-if 通过移除或添加来控制元素的隐藏和现实   
    • 条件渲染的时候已有元素不会重复渲染,如果重复渲染已有元素,给已有元素添加添加唯一值key属性
    • 条件渲染

    • "value === a">a
      "value === b">b
      c 复制代码

  •  v-show通过设置是否添加dispaly：none来控制元素隐藏和现实
• class 和style的绑定

  • 绑定class

    :class="['类名'，类名]"    
    ：class="{类名：true,类名:false}"复制代码

  • 绑定style

    ：style="{height:100px,width：100px}"
    ：style="[{height:100px},{width:100px}]"复制代码

• 循环渲染 v-for
  • 循环数组

    "(item,i) in Array" :key="i/ID">复制代码

  • 循环对象

    "(value,key,index) in Array" :key="i/ID">复制代码

• v-model  
  • 绑定单选框   绑定空字符串
  • 绑定单个复选框绑定的值布尔值,绑定多个复选框时绑定值为同一个数组
  • 下拉框  单选时在select上绑定一个空字符串 ,多选时绑定一个数组 
  • 修饰符   
    • lazy 使用change事件使input值于data中的值同步
    • number  输入的值转化为number类型
    • trim 自动过滤首尾空白字符
• 自定义组件
  • 全局自定义指令

    Vue.directive('指令名',{inserted:function(){}})复制代码

  • 局部自定义指令

    new Vue({
        directives:{
             '指令名':{
            inserted:function(){}    }    }
    })复制代码

修饰符

• 键盘修饰符 
  • .enter
  • .tab
  • delate
  • esc
  • space
  • up
  • down
  • left
  • right
  • 自定义按键  config.keyCodes

    Vue.onfig.keyCodes.f1=112复制代码

• 系统修饰符 
  • ctrl
  • alt
  • shift
  • meta(window键)
  • exact  控制精确的修饰符触发事件   

    Vue.keyup.exact.ctrl="submit" 只按下ctrl时触发  复制代码

• 鼠标修饰符
  • left
  • right
  • middle

计算属性 computered

  data中的数据需要定义较为复杂的语法时，将语法定义到computered中的,data中不要定义复杂的语法

new Vue ({
    computered:{
     
    }
})复制代码

侦听器watch

当data的数据需要进行异步操作时,使用侦听器监听data的数据变化,当数据发生改变时触发侦听器中的函数

new Vue({
    watch:{
       
    }
})复制代码

过滤器 filter

• 全局过滤器

  {{data | 过滤器名字}}
  Vue.filter() 参数1:过滤器名字 参数2.回调函数(需要return值)复制代码

• 局部过滤器

  new Vue({
  filters:{
  '过滤器':function
  }
  })复制代码

转载于:https://juejin.im/post/5cea06b8e51d4556bc066ee5