JavaScript之Vue详解

以下内容转载编辑自Vue官网

介绍

什么是Vue

• 一套用于构建用户界面的渐进式框架
• 可以自底向上逐层应用
• 只关注视图层
• 易于上手
• 便于与第三方库或既有项目整合

安装

常用指令

• v-show 条件显示/隐藏
• v-if 条件渲染
• v-else-if 条件渲染
• v-else 条件渲染
• v-for 列表渲染
• v-once 一次性插值
• v-html 输出html
• v-bind: 绑定参数（缩写为:）
• v-on: 监听事件（缩写为@）

选项配置

• el：挂载在DOM
  • string|HTMLElement
• data：数据对象
  • Object | Function
• computed：计算属性
  • { [key: string]: Function | { get: Function, set: Function } }
  • 必须有返回值
• methods：自定义函数
  • { [key: string]: Function }
• watch：监听对象
  • { [key: string]: string | Function | Object }

生命周期

• beforeCreate 完成实例初始化
• created 实例创建完成
• beforeMount
• mounted
• beforeUpdate 数据更新
• updated 实例更新
• beforeDestroy 实例销毁前
• destroyed 实例销毁
  

组件