vue 基础

• 优点
  • 中文文档完毕 生态丰富（插件多） 上手简单
  • 指令， 组件， 虚拟dom
• 导入与实例化
  • 模板
    <div id="app">
    <h1>{{msg}}</h1>
    </div>
  • 引入
    <script src="./js/vue.js"></script>
  • 实例化
    new Vue{{
    el : "#app",
    data : {msg : "你好 vue ！" }
    }}
• 指令与模板
  • vue 01引入vue
  • 特点
    • 就是v开头的特殊属性 它的值预期为 JavaScript 单行表达式
    • 可以渲染实例的值
      v-text="msg"
    • 数学运算
      v-text = "2+3"
    • 使用js表达式
      v-text = "msg.length"
    • 如果是文本需要加单引号
      v-text = " '我在中国' +msg "
  • 指令是联系模板与vue实例的桥梁
• vue的实例
  • var vm = new Vue( { ...} )
  • vm 就是new Vue 创建的实例
• 文本渲染指令
  • {{}}
  • v-text
    文本渲染指令
  • v-html
    html文本渲染指令
• 条件渲染指令
  • v-if
  • v-else
  • v-else-if
  • v-show
    • 隐藏元素以css的方式
    • 频繁切换用v-show 少量切换有v-if
• 遍历指令
  • v-for
    • 字符串，数字，列表，对象进行遍历
      <p v-for= " (item,index) in list " v-key = "item"> { { item } } </p>
    • item 遍历的元素（自定义的名称）
    • index 遍历的下标（键名）
    • list 被遍历的数据
  • v-bind：key
    • 值必须是唯一
      为了让vue更好的优化渲染i额表
• 属性绑定
  • v-bind：title=“msg”
  • ：title=“msg”
    属性绑定简写形式
  • ：class：id：disabled
• 事件
  • v-on：click=“num++”
    事件指令
  • @click=“num++”
    事件绑定简写
  • 事件的参数
    • @click=”sayNum“
      默认传入事件对象
    • @click=”sayNum（3）“
      传入实参3
    • @click=”撒野Nu吗（$event，3“
      传入事件对象，和实参3
  • 事件的修饰符
    • .stop阻止事件冒泡
    • .prevent 阻止默认事件
    • .once 只响应一次
  • 按键修饰符
    （keydown，keyup）
    • .enter 回车
    • .up 上
    • .down 下
    • .space 空格
    • .esc 取消
    • .del 删除
  • 系统修饰符
    • .ctrl
    • .shift
  • 鼠标修饰符
    • .left
    • .right
    • .middle
• 表单
  • v-model=num
    吧num的数据和表单的值绑定在一起
  • 单行，多行
  • 多选
    • 1个默认值选中为true未选中为false
    • 多个值，绑定的数组动态添加/一处当前元素的value值
  • 单选
  • 下拉select
  • 表单修饰符：
    • .lazy
      change事件触发数据更新
    • .number
      强制转换为数字
  • v-model=”mum“
    简写
    ​
    • ：value=”num“
    • @input=”num=$event.target.vliue“
• vue操作
  • 让指令链接数据与DOM
  • 业务炒作数据，实现自动更新dom
• computed计算
  • 从现有数据计算出新的数据（只读）
    computed:{
    "total":function(){
    return xxx
    }
    }
• watch监听
  • 监听数据的变化执行回调函数
    watch:{
    "obj":{
    handler(nva){
    //执行回调函数
    }，
    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()
    • 高价
      • filtre过滤
      • forEach遍历
      • map 映射
      • reduce累计
      • some 有一个
      • every每一个
      • find查找符合条件元素
      • findlndex查找符合条件元素的下标
      • sort排序
  • 字符串
    • lindexOf
    • lastindexOf
      查询 字符串下标，找不到返回-1
    • split（‘’）分割为i数组
    • slice（start，end）切割字符串
    • subString（start，end）截取字符串 （按下标end）
    • subStr（start，len）截取字符串 （按长度len）
  • json
    • evaluate（）z字符串当js执行
    • JSON.parse(str)
      json 字符串转化为js对象
    • JSON.stringify(obj)
      吧js对象转化为json字符串
  • 本地存储
    localStorage
    • getltem（key）
      获取值
    • setltem（可以，value）
      存储值
    • removeltem（key）
      删除存储
    • clear（）
      清空
• markdown语法