VUE学习系列笔记day02

VUE中文官网：https://vuejs.bootcss.com/guide/custom-directive.html
  本篇涉及知识：VUE常用特性，含表单操作、自定义指令、计算属性、过滤器、侦听器、生命周期
  1、表单操作（将数据与各个表单标签通过v-model进行双向绑定）：在JS中input标签type=”text”时可作为单行输入文本框；type=“radio”时可作为单选框（多个input标签用span、div进行包裹，注意给标签进行赋值value），type=”checkbox”时为多选框（同样也是用div进行包裹，注意给标签进行赋值value）；下拉框的实现使用包裹多个标签实现，下来框需要多选操作的话可以使用属性multiple=”true”（注意给标签进行赋值value）；多行输入框使用标签
  2、表单域修饰符：其用法与v-model联合使用即 v-model.number v-model.trim v-model.lazy
    number:将值转换为数值（将表单域默认值为字符串转换为数值）
    trim：去掉开始与结尾的空格（表单默认空格是存在的）
    lazy:将input事件切换为change事件（input事件只要表单的值改变就会触发事件，change事件的触发是当表单失去焦点的时候才会触发事件；使用场景：如输入用户名时用于检测用户名的合法性）
  3、自定义指令：当内置指令无法满足需求时使用
获取元素焦点
  默认获取表单焦点，用户可不必点击直接输入；页面当前焦点只能有一个，自定义指令可使用的钩子函数有 bind（当指令第一次绑定到元素时调用）、inserted（被绑定元素插入父节点时调用）、update、componentUpdated、ubind（解绑时调用）

自定义指令用法：如下图

  4、带参数的自定义指令：包含el binding vnode oldVonde四个参数

改变输入域的颜色
  设置dom背景色，通过自定义指令binging参数传入的值

  5、局部自定义指令：
  与全局自定义指令的区别在于定义位置位于Vue实例内，声明方式不同，如下：

  6、计算属性：computed，应用场景为将复杂的计算逻辑抽取出来，使得模板内容变得更加简洁
字符串反转
  将字符串字符顺序反转：
  定义如下

  使用如下

  补充相关知识：

  注：计算属性中计算的值是基于data域中定义的值，所以当data域中值改变计算属性中的值也会发生变化；在计算属性中return必须添加否则获取不到计算属性得到的值。
  7、计算属性computed与方法methods的区别为：
  计算属性是基于data中的依赖进行缓存（但首次调用后，若所使用到data中值为改变，则第二次调用时无需重新执行，而是直接取出缓存的值，这样可以提高性能，避免不必要的调用）；方法是不存在缓存，每次调用都会执行方法；此外在插值表达式调用上，计算属性可以直接使用属性名进行调用，而方法需要使用方法名加()进行调用（在指令内部方法调用不传参是可不加()），其它无太大区别。

  8、监听器watch：应用场景为数据变化时执行异步操作或开销较大的操作（当数据被绑定监听，数据一旦发生变化就会通知监听器所绑定的方法）

  9、监听器使用案例：
验证用户名是否可用
  输入用户姓名，失去焦点的时候进行验证，若已存在则提示重新输入，相反提示可用使用。

  10、过滤器：在vue中过滤器的作用，主要是格式化数据，将数据格式化为指定格式；比如将日期格式化为指定格式。
将输入数据首字母大写
  过滤器定义（局部），也可定义全局

  过滤器调用

  补充知识：

注：需要返回数据结构，否则得不到数据；过滤器支持级联操作；也可以绑定值到属性中如：

  11、带参数的过滤器
  定义与使用：

过滤器格式化日期

  12、生命周期：图见附

  定义调用：

  常用函数：mouted，在mouted周期时元素加载已完毕，可以在此时调用后台接口填充数据到模板里面。

  补充知识：有关在JS中数组进行操作的API；替换数组api的调用不会影响到原先数组的值

shift:从集合中把第一个元素删除，并返回这个元素的值。
unshift: 在集合开头添加一个或更多元素，并返回新的长度
push:在集合中添加元素，并返回新的长度
pop:从集合中把最后一个元素删除，并返回这个元素的值。
splice参数：
    1、index---------从该下标开始删除
     2、howmany----删除指定数量的元素
    3、elements-----插入的元素
该方法返回值是被删除的元素组成的数组
splice与slice:splice是直接对数组进行操作,而slice函数则是取arr的一段元素，原数组不变
reverse:数组元素顺序颠倒
sort:js中的sort()和java中的有很大的不同，js中默认是调用每个数组项的 toString() 转型方法，然后比较得到的字符串（Unicode字符集编码），两两比较以确定如何排序，类似冒泡。
concat：全称concatenate，将数组连接起来；不改变原数组

  除上述api外还可以直接操作数组索引来操作数组数据，但此方法添加的数据不是响应式的，如果需要响应式的数据，可以使用下图方法：（对象也可类似这样操作）

附：