陈悦玲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. 自定义全局指令让文本框获取焦点

二.