Vue

vue知识树，包括vue指令，vue过滤器，vue侦听器，vue计算属性，vue脚手架，vue的组件，生命周期。

Vue知识树

• vue指令
  • 内容渲染
    • v-text
    • v-html
    • 插值表达式：{{}}
  • 属性绑定
    • v-bind/简写为“：”
  • 事件绑定
    • v-on/简写为“@”
  • 双向绑定
    • v-model
  • 条件渲染
    • v-if
    • v-else-if
    • v-else
    • v-show
  • 列表渲染
    • v-for
• vue过滤器
  • 私有过滤器
    • 语法：filiters：{过滤器名（）{return 执行语句}
    • 特点：只能在定义该过滤器的组件中使用
  • 全局过滤器
    • 语法：Vue.filter('过滤器名'，过滤器处理函数
    • 特点：可以进行全局使用
  • 使用方法：{{name | filter1（参数） | filter2}}【用管道符隔开，且可以传递参数】
• vue侦听器
  • watch侦听器：与data平级写入
  • 什么是侦听器：watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
  • 侦听器配置属性
    • immediate：组件初次加载完毕后立即调用watch侦听器
    • deep：若监听的是一个对象，那么开启此属性即可检测到对象中数据的改变
• vue计算属性
  • 计算属性：与data平级
  • 计算属性特点：本质是一个属性，计算属性可以缓存计算结果，当计算属性依赖的数据变化时，将重新进行运算
• Vue脚手架
  • vue-cli：vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。
  • 安装：使用npm命令 npm i -g @vue/cli
  • 使用：vue create 项目名称
  • 启动项目：npm run serve
• Vue的组件
  • 组件化开发：组件化开发指的是:根据封装的思想，把页面上可重用的UI结构封装为组件,从而方便项目的开发和维护。
  • 组件组成部分
    • template:每个组件对应的模板结构
    • script：主要是用来书写js的业务逻辑
    • style：给组件添加样式
  • 组件的使用分为三部
    • ①导入组件：使用 import XXX from “XXX”语法导入
    • ②注册组件：components:{组件名}节点注册组件
    • ③使用组件：<组件名></组件名>。也可以直接写以一个自结束标签
  • 注册全局组件：找到main.js入口文件，使用Vue。component( )方法注册全局组件
  • 组件的自定义属性props
    • 语法：props:['组件1','组件2']
    • 特点：自定义属性是只读的，不可以改变props的值
    • 修改方法：将props的值转存到data中即可进行修改
    • props写为对象时，会有default默认值，type数据类型，required是否必选
  • scoped
    • 使用方法：写在style标签中<style></style scoped>
    • 解决的问题：解决了组件间style样式的冲突问题
    • /deep/样式穿透（深度选择器）：在父组件中使用该选择器，该选择器下的样式将被应用到子组件中
  • 组件之间的数据共享
    • 父子关系
      • 父组件传子组件：使用自定义属性
      • 子组件传父组件：使用自定义事件
    • 兄弟关系
      • 使用eventBus进行数据共享
• 生命周期
  • 组件生命周期：是指一个组件从创建>运行>销毁的整个阶段,强调的是一个时间段，
  • 生命周期函数：生命周期函数是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
  • 生命周期的三个阶段
    • 创建阶段
      • beforCreate：在组件实例初始化完成之后立即调用。
      • created：在组件实例处理完所有与状态相关的选项后调用。
      • beforMount：在组件被挂载之前调用。
      • mounted：在组件被挂载之后调用。
    • 运行阶段
      • beforUpdate：在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
      • updated：在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
    • 销毁阶段
      • beforDestroy：在一个组件实例被销毁之前调用。
      • destroyed：在组件销毁完毕后调用