vue基础

vue基础知识思维导图，包括：指令、生命周期、生命周期函数、组件之间的数据共享等内容。

vue 基础

• day1
  • 指令
    • 内容渲染指令
      • v-text
        • 缺点：覆盖元素中的默认内容
      • {{ }}
        • 插值只能用在元素的内容节点，无法用在属性节点
      • v-html
        • 用处：把带有 HTML 标签的字符串，渲染为真正的 DOM 元素
    • 属性绑定指令
      • v-bind:
      • 简写 :
    • 事件绑定指令
      • v-on:
      • 简写 @
      • @click="show" 和 @click="show(传参)"
      • 内置的变量 $event
        • @click="show(3, $event)"
      • 事件修饰符
        • .prevent
        • .stop
      • 按键修饰符
        • .esc
        • .enter
    • 双向数据绑定指令
      • v-model
        • 只能用在表单元素上
      • 修饰符
        • .number
        • .trim
        • .lazy
    • 循环渲染指令
      • v-for="(item, index) in 数组"
      • :key="item.id"
      • 拿索引当 key 没有意义
    • 条件渲染指令
      • v-if
        • 动态创建和移除元素
        • v-else-if
        • v-else
      • v-show
        • 动态添加和移除 display: none 样式
    • 过滤器
      • 全局过滤器
        • Vue.filter('名字', function(过滤器前面的值) { return 结果 })
      • 私有过滤器
        • 定义到组件的 filters 节点之下
      • 调用
        • {{ message | dateFormat }}
• day2
  • watch
    • 两种格式
      • 方法格式
        • 简单
        • username(newVal, oldVal) {}
      • 对象格式
        • username: {
          • handler(newVal, oldVal) {}, deep: true, immediate: true
  • computed
    • 在定义的时候，要定义为 function
    • 在使用的时候，当作普通属性使用即可
      • 在 template 模板结构中可以使用
      • 在 methods 方法中，也可以使用
        • this.计算属性的名字
    • 要 return 一个计算的结果
    • 只要任何一个依赖的数据项发生了变化，计算属性就会重新旧值
  • vue-cli
    • 全局安装
      • npm install @vue/cli -g
    • 创建项目
      • vue create 项目的名称
    • 组件的构成
      • template
        • 只能有唯一的根节点
      • script
        • export default {}
        • .vue 中的 data 必须是方法
      • style
        • 启用 less 语法
          • lang="less"
        • 防止组件之间样式冲突
          • scoped
          • /deep/ 深度选择器
            • 在需要覆盖第三方组件样式的时候，会用到
• day3
  • props
    • 极大的提高组件的复用性！
    • 定义 props 有两种格式
      • 数组格式
        • 简单
        • props: ['init']
      • 对象格式
        • 定义的时候稍微复杂
        • props: {
          • init: { type: Number, default: 0, required: true } }
    • props 是只读的，因此在项目开发中，不要直接修改它的值。
      • 把 props 的值，“转存”到 data 中，就可以进行读写操作。
  • 生命周期
    • 概念：每个组件从创建 -> 运行 -> 销毁的一个过程，强调的是一个时间段！
  • 生命周期函数
    • 概念：在生命周期的不同阶段，会按次序、自动依次执行的函数，叫做生命周期函数。强调的是时间点。
    • 三个阶段
      • 创建阶段
        • beforeCreate
        • created
          • 发起 Ajax 最早的时机，请求数据
        • beforeMount
        • mounted
          • 组件第一次被渲染到浏览器中
          • 操作 DOM 的最早的时机
      • 运行阶段
        • beforeUpdate
        • updated
          • 能够操作到最新的 DOM 元素
      • 销毁阶段
        • beforeDestroy
        • destroyed
  • 组件之间的数据共享
    • 父 -> 子
      • 自定义属性
        • 子组件中，通过 props 来自定义属性
        • 父组件中，负责把数据，通过 v-bind: 绑定给子组件
    • 子 -> 父
      • 自定义事件
        • 在子组件中调用 this.$emit() 来触发自定义事件
          • 参数1：字符串，表示自定义事件的名称
          • 参数2：值，要发送给父组件的数据
        • 在父组件中，通过 v-on: 来绑定自定义事件，并提供一个事件处理函数。通过事件处理函数的形参，接收到子组件传递过来的数据。
    • 兄弟组件共享数据
      • EventBus
        • 数据发送方
          • 导入 eventBus.js
            • import bus from './eventBus.js'
          • bus.$emit('要触发的事件的名字', 要发送的数据)
        • EventBus 模块
          • 创建 vue 的实例对象 new Vue()
          • 向外导出 Vue 的实例对象
            • export default new Vue()
        • 数据接收方
          • 导入 eventBus.js
            • import bus from './eventBus.js'
          • bus.$on('要声明的自定义事件的名字', 事件的处理函数)
          • 通过事件处理函数的形参，可以接收到发送过来的数据
          • 在数据接收方的 created 生命周期函数中，调用 bus.$on() 方法