Vue提问一

1-10

1.v-model.number , v-model.trim ,v-model.lazy的作用？

2.自定义指令怎么定义？

3.带参数的自定义指令怎么定义？用v-color设置字体颜色？

4.局部指令怎么定义？区域？指令命令？

5.为什么需要引入计算属性？

6.计算属性是根据data中的数据发生变化的，计算属性的用法？怎么定义？

7.computed和methods的区别？

8.侦听器的使用场景？使用以及定义？

9.过滤器的作用是什么？怎么定义过滤器？

10.怎么使用过滤器？可以级联吗？

11.局部过滤器怎么定义？

12.带参数的过滤器怎么定义？

13.生命周期的各个阶段？这些函数也叫钩子函数

14.数组的相关api分哪两类？分别是什么作用？

15.怎么响应式的更改数组的值？

答案

number :转化为数值
trim :去掉开始和结尾的空格
lazy:将input事件切换为change事件

Vue.directive('focus', {
      inserted: function (el) {
        // el表示指令所绑定的元素
        el.focus();
      }
    });

Vue.directive('color', {
      bind: function (el, binding) {
        // 根据指令的参数设置背景色binding 包含v-color="msg"的信息
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });

Object这是log(binding)的结果，出现一个对象
def: {bind: ƒ}
expression: "msg"
modifiers: {}
name: "color"
rawName: "v-color"

directives: {
        color: {
          bind: function(el, binding){
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
          inserted: function(el) {
            el.focus();
          }
        }
      }

表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁

computed: {
       reverseString: function(){
         return this.msg.split('').reverse().join('');
       }
     }

reverseString 其实是一个基于data数据的一个数据，可以直接在插值表示使用。

• 主要区别就是：computed是基于缓存的，如果数据不变，多次访问仍然是同一个缓存，不要重复计算
• methods每次调用都会重新计算。不存在缓存

9. 数据变化时执行异步或开销较大的操作

10.  watch: {
            firstName: function (val) {
              this.fullName = val + ' ' + this.lastName;
            },
            lastName: function (val) {
              this.fullName = this.firstName + ' ' + val;
            }
          }
    

格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等

Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });

插值表达式可以使用{{msg | lower}}

v-bind也可以使用 v-bind:id = "id |formatId "

支持级联

filters: {
        upper: function(val) {
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }

Vue.filter('format', function(value, arg) {//arg就是传入的参数
      if(arg == 'yyyy-MM-dd') {
        var ret = '';
        ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
        return ret;
      }
      return value;
    })

​ 挂载(初始化相关属性) ，
​ ①beforeCreate
​ ②created
​ ③beforeMount
​ ④mounted
​ 更新(元素或组件的变更操作)
​ ①beforeUpdate
​ ②updated
​ 销毁(销毁相关属性)
​ ①beforeDestroy
​ ②destroyed

​ 1.变异方法(修改原有数据)
​ push（）
​ pop(）
​ shift()
​ unshift(）
​ splice()
​ sort()
​ reverse()

​ 2.替换数组(生成新的数组, 一般需要重新赋值给原数组)
​ filter()
​ concat()
​ slice()

15

修改数组
Vue.set(vm.list, 2, 'lemon');
vm.$set(vm.list, 1, 'lemon');
vm.$set(vm.info, 'gender', 'female');
修改对象内键值对
Vue.set(vm.info, "gender", 'male');