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

  <button v-on:click="warn('Form cannot be submitted yet.', $event)">
    Submit
  </button>
  
  methods: {
    warn: function (message, event) {
      // 如今咱们能够访问原生事件对象
      if (event) event.preventDefault()
      alert(message)
    }
  }
  复制代码

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

• <span v-if="value === a">a</span>
  <span v-else-if="value === b">b</span>
  <span v-else>c</span> 复制代码

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

• 绑定class

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

• 绑定style

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

• 循环渲染 v-for

• 循环数组

  <span v-for="(item,i) in Array" :key="i/ID">复制代码

• 循环对象

  <span v-for="(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
  }
  })复制代码