Vue 笔记

• 表单
  • v-modle="num"
    把num的数据和表单的值绑定在一起
  • 单行，多行
  • 多选
    • 1个默认值 选中为true 未选中为false
    • 多个值，绑定的数组动态添加/移除当前元素的value值
  • 单选
  • 下拉select
  • 表单修饰符
    • .lazy
      更新视图触发事件有input 变为 change事件
    • .number
      字符串转数字
  • v-model="num"
    简写
    • ：value="num"
    • @input="num=$event.target.value"
• Vue操作
  • 让指令连接数据与dom
  • 业务操作数据，实现自动更新
• computed计算
  • 从现有数据计算出新的数据（只读）

  • computed:{    
    ​ "total":function(){   
    ​   return  xxx 
    ​  }
    ​}

• watch监听

• watch:{
     "obj":{
     handler(navl){
       //执行回调函数
  ​    }，
      deep:true
     }
  ​}

• class
  • 文本
    :class="active"
    没有加单引号的active是一个变量不是字符串
  • 对象
    :class="{'active':flag}"
  • 数组
    :class="list"
• style
  • :style="{color'red' ,fontSize:'24px'}"
  • css 属性驼峰式写法

• 回顾

  • 数组

    • indexOf()
      查找对应下标

    • 删除

      • shift 前删除
      • pop 后删除
      • splice 中删除

    • 添加

      • unshift前加
      • push后加
      • splice也可以添加
    • 翻转 reverse
    • 转字符串 join()
    • 连接数组 concat()

    • 高阶

      • filter 过滤
      • forEach 遍历
      • map 映射
      • reduce 累计
      • every 每一个
      • find 查找符合条件元素
      • findIndex查找符合条件的元素下标
      • sort 排序

  • 字符串

    • IndexOf lastIndexOf
      查询 字符串下标，找不到返回-1
    • split("")分割为数组
    • slice(start,end) 切割字符串
    • subString(start,end) 截取字符串 （按下标end）
    • subString(start,length) 截取字符串 （按长度length）

  • json

    • evel() 字符串当js执行
    • JSON.parse(str)
      json字符串转换为js对象
    • JSON.stringify(obj)
      把js对象转换json字符串

  • 本地存储
    localStorage

    • getItem(key)
      获取值
    • setItem(key,value)
      存储值
    • removeItem(key)
      删除存储
    • clear() 清空