VUE2中不同API的作用

选项/数据

• data

  • 用于存放页面上使用的数据

  • 组件的data是函数类型 -- 复用组件时 每个组件都是通过函数调用后得到的全新对象, 互相之间不影响

• props

  • 用途1: 为组件自定义属性, 便于父子传参

  • 用途2: 搭配路由系统使用时, 如果路由开启了 属性解构 props:true 就可以通过 props 来接收路由的参数

                 VUE的路由传参方式

• computed

  • 计算属性: 本质是函数, 使用时不需要() 就能触发 -- 使用更简单

• methods

  • 存放各种方法, 适合于 事件进行绑定场景

• watch

  • 属性监听器: 可以监听任意属性的变化

  • 默认是浅层监听: 监听基础数据类型

  • 深层监听: deep:true 适合 对象类型 的监听

特殊属性

• ref: 快速把DOM元素 和 变量捆绑在一起

  • 目的是 代替原生DOM的查找方式

• key

  • 唯一标识, 配合 v-for 使用

  • 当数组有增删改操作时, 页面的DOM元素会自动更新 -- 同样key的元素会复用 -- 节省系统资源

生命周期

• 创建 

  • beforeCreate: 准备创建

  • created: 创建完毕

• 挂载 

  • beforeMount

  • mounted: 组件显示在页面时, 适合发网络请求

• 更新 

  • beforeUpdate

  • updated

• 销毁 

  • beforeDestroy

  • destroyed

选项/资源

• directives

  • 指令, 用v- 开头

  • 绑定某个元素, 在其相应周期中自动触发, 对此元素做一些操作

• filters

  • 过滤器: {{ 值 | 过滤器(参数...) | 过滤器 }}

  • 把数据进行改造

• components

  • 组件: 注册外部的组件到当前组件中

指令

• v-text: 原样替换标签中原有内容

• v-html: 解析成HTML 再替换原有内容

• v-show: 利用 css的 display:none 实现隐藏

• v-if: 移除/添加DOM元素

  • v-else

  • v-else-if

• v-for: 循环生成

• v-on: 事件绑定

  • @事件名="方法名"

• v-bind: 属性绑定

  • :属性名=""

• v-model:双向绑定 -- 搭配输入框使用

• v-pre: 原样输出 {{}}

• v-once: 一次性渲染, 后续不更新

实例属性: 即 this 中的属性

• $refs: 保存了通过 ref 属性绑定的元素

• $parent: 获取父元素

外部css相关

• 全局引入方式

  • js中: import 'css文件路径'

  • style中: @import url(css文件路径)

• 局部引入:只对自身有效

  • style中: <style src="文件路径" />

路由系统

• SPA: Single Page Application 单页应用

• 目前主流的网页制作方式都是 单页应用

  • 特点: 整个网页就是 public/index.html 文件

  • 切换网页内容是局部切换

  • <router-view />占位符, 会根据路径切换成对应的组件

  • 路由配置中: 进行 路径和组件对应关系的相关配置

  • 路由守卫     VUE中如何添加路由守卫

  • meta: 元数据

  • 编程式跳转

  • 路由传参