选项/数据
data
用于存放页面上使用的数据
组件的data是函数类型 -- 复用组件时 每个组件都是通过函数调用后得到的全新对象, 互相之间不影响
props
用途1: 为组件自定义属性, 便于
父子传参
用途2: 搭配路由系统使用时, 如果路由开启了
属性解构
props:true
就可以通过 props 来接收路由的参数
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: 元数据
编程式跳转
路由传参