陈悦玲2020.0.16

  1. 事件修饰符

    1. .stop : 阻止默认事件(冒泡事件)
    2. .prevent : 阻止默认跳转(a标签)
    3. .capture :实现捕获阶段机制
    4. .self : 只有点击自身的时候,才会触发事件(只会阻止自己身上冒泡行为的触发,并不会阻止其他的东西发生冒泡)
    5. .once : 只触发一次事件处理函数
  2. v-model指令的学习

    1. v-bind只能实现数据的单向绑定

    2. 只能运用在表单元素中:

      radio / text / address / email / select checbox textarea

  3. vue中样式 -class

    1. 第一种:直接传递数组,这里的class需要使用v-bind做数据绑定

      例如:在style中写了样式.red{},.fontSize{}在html标签中直接写 :class=["red","fontSize"],记得一定要加引号

    2. 第二种:三元表达式 提高代码的可读性

      就是在html标签中 :class=[flag?"red":"fontSize"];然后再data中flag:false

      在数组中不加" " 就是在data中去找数据

      :class=[{"red":flag}] data:{flag:true}

    3. 对象形式:三种方式

      绑定对象的时候,对象的属性是类名。对象的属性可带引号,也可不带引号

      1. :class="{red:true,fontSize:true}"

      2. :class="{"red":true,"fontSize":true}"

      3. :class="obj" data:{obj:{red:true,fontSize:true}}

    4. 当class名和变量名一样的时候,可以只写一个。

    5. 如果多个元素都需要使用一个样式类,但是启用禁用状态各不相同,就会出现命名冲突。解决:使用有名称的对象绑定

      :class=""

      data:{

      ​ 变量:{

      ​ class1:true || false,

      ​ class2:true || false

      }

      ​ }

      好处就是即使多个元素共用同一个class,同时启用状态各不相同,也不会发生命名冲突的现象

  4. 内联样式(style)

    1. 直接在元素上通过:style的形式,书写样式对象

      :style="{color:"red",font-size:"15px"}"

    2. 定义到data中,并引用
      data:{style:{color:"red",font-size:"15px"}}

    3. 通过数组,引用多个样式

      :style = "[style1,style2]" data:{

      ​ style1:{},style2{}

      }

  5. v-for指令的四种使用方式

    1. 循环普通数组

      v-for = "item in list"

      data:{

      ​ list:[1,2,3,4]

      }

    2. 循环对象数组

      v-for = “user in list ”

      data:{

      list:[{},{},{}]

    3. 循环对象

      在遍历对象身上的键值对的时候,除了有val,key,在第三个位置还有一个索引index

      :v-for = "(val,key,index) in user"

      data: {

      ​ user:{

      ​ id:1,

      ​ name:"tony",

      ​ gender:"男"

      ​ }

      }

    4. v-for迭代数字

      1. in 后面我们放 普通数组、对象数组、对象,还可以放数字

      2. v-for="count in 10"

        (count值是从1开始)

  6. v-for循环中key属性的使用

    1. v-for="item in list" :key = "item.id"(key里面写数组属性有唯一性的东西,并且只能使用number或者string类型,key在使用的时候必须使用v-bind属性绑定的形式,指定key的值)
    2. 在组件中使用v-for循环的时候,或者一些特殊情况中,如果v-for有问题,必须在时候v-for的同时。指定唯一的字符串/数字类型 :key="值"
    3. 例子:当我们循环了一个数组对象,想要点击一个按钮,就能在这个数组当中添加一个对象时,并且我们想要添加到数组的头部的时候,就会发生原来索引为1的对象,变成了索引为2。如果我们添加了key,就不会发生这种情况,旧对象的索引值还是不会变动,新添加的对象的索引值才会改变
  7. v-if(直接注释掉) 每次都会重新删除或创建元素,有较高的切换性能消耗。如果元素设计到频繁的切换,最好不要使用v-if。

  8. v-show(display:none)每次不会重新进行DOM的删除和创建操作,有较高的初始渲染消耗。如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if

  9. 过滤器:可被用作一些常见的文本格式化,过滤器可以用在两个地方:mustache插值和v-bind表达式。

    1. <p>{{ msg | msgFormat('l','c') | test}}
      //定义一个Vue全局的过滤器,名字叫做msgFormat
      Vue.filter("msgFormat",function(msg,arg,arg2){
      return msg.replace("l","c")
      //把l都改成c
      //字符串的 replace方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则,第二个位置就可以开始传参了
      return msg.replace(/^[l]$/ig,arg+arg2)
      })
      Vue.filter("test",function(msg){
      return msg+ "======"
      })
      //最终p会是:
      //helclco word=====
      new Vue({
      data:{
      msg:"hello word"
      }
      })
      //过滤器的定义语法
      //Vue.filter('过滤器的名称',function(){})
      //过滤器中的function,第一个参数已经被规定死了,永远都是 过滤器 管道符的前面 传递过来的数据
      //
      //Vue.filter("过滤器名称",function(data){
      // return data + '123'
      //})
      //过滤器调用时候的格式 {{ name | 过滤器的名称(使用的参数名)}}
    1. js
      //全局过滤器:
      Vue.filter("过滤器名称",function("使用的参数","传参")
      //私有过滤器:
      filters:{
      "过滤器名称":function("使用的参数","传参"){}
      }
    1. ES6新方法 字符串的padStart方法,(用来填充的)

      eg: (new data()).toString.padStart(2,"0")
      //意思就是让他填充后的字符为2位的,填充1个0在前面
      
  10. 自定义按键修饰符

    1. js
      //全部的按键别名
      .enter
      .tab
      .delete
      .esc
      .space
      .up
      .down
      .left
      .right
      //其他键盘就去搜js的键盘事件对应的键盘码(keycode)
    1. js
      //自定义全局按键修饰符
      Vue.config.keyCodes.f2 = 113
    1. 自定义全局指令让文本框获取焦点

      
      

二.

标签

评论