vue2 学习总结

动态创建或者移除 display:none 样式，从而实现DOM元素隐藏、场景：频繁切换元素的展示状态、基于数组来循环渲染一个列表结构 语法 ：item in items。

vue2

• 思维导图笔记
  • 第一章 Vue特性
    • 数据驱动视图
      • 数据变化驱动视图更新，单项数据绑定
        • 优点： 程序员只需要维护数据，自动渲染交给vue
    • 双向数据绑定
      • 不操作DOM，自动将数据同步到数据源中
        • 优点;：开发者不用手动操作DOM，form负责采集数据，ajax负责提交数据
    • MVVM
      • 实现数据驱动视图和双向数据绑定的原理
  • 指令
    • 内容渲染指令：渲染DOM元素
      • v-text 缺点容易覆盖原先的元素
      • { { } } 插值表达式 不会覆盖原有内容 只能用在元素节点， 不能用在属性节点
      • v-html 将带标签的进行渲染
    • 属性绑定指令
      • v-bind 单项数据绑定 语法糖 ：
        • v-bind绑定时，如果拼接，字符串外面应该包裹单引号 “‘hello’+‘world’”
    • 事件绑定指令
      • v-on 给DOM元素添加添加事件 语法糖 @
      • 事件对象 $event vue提供了内置变量，$event,原生DOM的事件对象 e
      • 事件修饰符
        • 阻止事件跳转 e.preventDefault
        • 阻止事件冒泡 e.stop
      • 按键修饰符 @keyup
    • 双向绑定指令
      • v-model 相当于v-on和v-bind 不需要获取DOM
        • 修饰符 .number .trim .lazy
    • 条件渲染指令
      • v-if
        • 动态创建或者移除元素，从而实现DOM元素隐藏
          • 刚进入页面，某些元素不需要展示
        • 配套指令 v-else-if和v-if一起使用，类似于if...else
      • v-show
        • 动态创建或者移除 display:none 样式，从而实现DOM元素隐藏
          • 场景：频繁切换元素的展示状态
    • 列表渲染指令
      • v-for
        • 基于数组来循环渲染一个列表结构 语法 ：item in items
          • item : 被循环的每一项 items : 待循环的数组
        • 注意：使用了v-for，尽量绑定一个 : key 值尽量把id作为key值
  • 监听器
    • watch 针对数据的变化做特定的数据操作，本质上是一个函数
      • 如果侦听的是一个对象，对象属性变了，也不会触发
      • 无法自动触发
    • 对象格式监听器
      • immediate
        • 进入页面侦听器自动触发
        • 可以通过deep侦听器，进行深度监听
  • 计算属性：通过计算得到的一个属性
    • 动态计算出来的，可以被模板使用，或者和methods方法使用 computed
      • 当成普通的属性使用
      • 要定义成方法
      • 优点：实现了代码的复用
  • Axios ：用于发送请求
    • post请求体需要写到body中
    • get需要将参数写到params中，无请求体
    • 返回值是Promise
    • Props:封装通用组件的时候合理使用，提高代码的复用性，只能读取不能修改
      • 如果外界没有给props传值，则props默认值生效
      • type用来规定属性的值类型
      • required必填项 true或者false
  • 自定义事件:子组件向父组件传值
    • this.$emit
    • 兄弟之间传值：EventBus
  • ref
    • this.$nexTtick:需要延迟代码，推迟到组件DOM执行完后在运行
  • 路由 ：router
    • 父路由可以加 /,子路由不加 /
    • 动态路由：将Hash地址中可变的路由地址定义作为参数项，提高复用性 使用英文的 :
    • 导航：跳转
      • 声明式导航：点击链接实现跳转
      • 编程式导航：调用api接口实现导航
        • this.$router.push('url')
        • this.$router.replace('url')
        • this.$router.go('数值l')
    • 导航守卫:控制路由的访问权限
      • 全局前置路由导航守卫 三个参数 to from next
        • next函数三种调用函数
          • 拥有后台访问权限，直接放行 next()
          • 没有后台权限：强制到登录页，next('/loogin')
          • 没有后台权限：不允许到后台，next(false)