Vue是目前 `前端三大框架` 之一: Angular React Vue
- 理念: `自动化+数据驱动`
- 自动完成DOM的相关操作, 数据变更时 自动更新相关DOM元素
- 作者希望用户: 只要关心数据的变化即可, DOM的操作全自动
Vue分三个版本:
- vue1: 已淘汰
- `vue2`: 目前占有率较高
- vue3: 以后的主流
Vue开发方式:
- 脚本: 同 jQuery 引入脚本即可, 适合入门阶段
- 脚手架: 适合实际开发 !
Vue语法:
new Vue({配置项}): 创建一个Vue对象, 根据配置项进行 个性化处理
el: 设置vue管理的元素, 值是 `id选择器`
data: 数据. 存储元素中使用的相关数据
methods: 方法们. 存储元素中使用的方法
HTML中新增语法
{{}}: 使用范围 -- `双标签的内容`, 其中书写JS代码
v-bind 或 : 使用范围 -- 属性
v-bind:属性名=""
:属性名=""
v-on 或 @ : 使用范围 -- 事件
v-on:事件名=""
@事件名=""
动态class :class="{样式类: true/false}"
根据值是 true还是false 决定是否添加样式
指令: vue提供的一套DOM属性, 可以快速操作DOM
v-html : 本质 innerHTML, 内容作为html解析后显示- v-text : 本质 innerText, 内容作为文本展示
v-show : 利用 css 的 style 的 display:none 实现元素的隐藏
v-once : 一次性渲染. 元素初始化渲染后, 后续数据变化不会更新
v-for : 遍历数组 生成元素
v-for="值 of/in 数组"
v-for="(值, 序号) of/in 数组"
key属性: 为遍历出来的DOM元素添加`唯一`标识, 当数组内容发生变更时, 相同唯一标识的元素直接复用. 提高使用效率
选项: 可选的配置项 -- 通过官方API文档查看
el : 指定vue对象管理的元素
data : 存放元素上使用的数据
在.vue文件里, data必须是函数, 和复用有关
methods: 存放元素上使用的方法/函数
通常和事件存在绑定关系
@click="方法名"`: 触发方法时,默认把 事件参数作为实参传递给方法
@click="方法名()" : 自定义传参模式. 如果需要事件参数, 则显式传递 `$event`
computed: 计算属性(`get`), 自动触发,不需要()
方法存储在 computed 中, 自动转为计算属性
脚手架:
一类软件的统称: 用于生成项目包; 就像建楼房时的脚手架, 创建楼房
vue的脚手架安装: npm i -g @vue/cli
使用脚手架生成包
vue create 包名 包名不允许大写字母
v-pre: 原样输出 {{}} 代码
v-model: 双向数据绑定. 适用于 `表单元素` -- 输入框,单选,下拉,多选,多行文本框
表单元素的特点: 用户可以操作并修改其值
利用v-model 把变量绑定在 表单元素上
方向1: 变量的值会显示在元素上
方向2: 元素的值发生变化时. 同步更新给变量
自定义指令:
选项: directives
格式: v-指令名
语法1:
directives:{
指令(元素, 绑定的值){
操作元素...
}
}
语法2: 面试考点 - 生命周期
dicrectives:{
指令: {
bind(){
DOM元素在内存中创建完毕, 还未展示到页面上 的时间点
},
inserted(){
DOM元素被显示到页面上时
},
updated(){},
unbind(){}
}
}
网络请求
使用第三方模块 axios: 利用Promise封装而来, 没有回调地狱风险
注意: 必须先安装再使用 npm i axios vue-axios
使用: axios.get(url).then(res=>{...})
生命周期
组件从创建 到 最终销毁, 会触发一系列的`钩子函数`
钩子函数: 在固定的事件发生时, 自动触发的函数
创建周期: 负责选项中的 `数据` 部分的加载
beforeCreate
created
挂载周期: 负责DOM元素的显示
beforeMount
mounted: 此处发网络请求
更新周期: DOM元素变化时
beforeUpdate: 数据有变化, 马上要更新到页面
updated: 数据更新到页面
销毁周期: .vue文件要销毁
beforeDestroy: 马上要销毁
destroyed: 数据之类的销毁, 不再可用
重点:vue文件 在加载到页面上的一瞬间, 就会触发 mounted 配置项函数
通常在这里 自动触发网络请求
指令:vue为元素提供了一套新的属性
v-text: innerText 原样显示文本- v-html: innerHTML 作为html解析后显示
v-show: 利用 display:none 实现隐藏, 适合频繁切换
v-if: 利用 移除/添加DOM实现隐藏. 适合网络请求的数据. 请求前先不加载, 请求完再加载
v-else
v-else-if
v-for: 遍历数据并展示
v-for="值 of/in 数组"
v-for="(值, 序号) in/of 数组"
v-for="值 in/of 数字"
搭配 :key使用
给遍历出来的元素添加`唯一标识`, 一旦数组有变化 可以更好的复用相同唯一标识的元素
v-on: 事件绑定 -- `@`
@事件名="方法名" -- 默认参数1 是 事件参数
@事件名="方法名(..., $event)"-- 自定义传参, 用 $event关键词代表事件参数
v-bind: 属性绑定 -- :
:属性名="值"
v-model: 双向数据绑定 -- 适用于用户可操作性的 表单元素 -- 单选 多选 输入..
方向1: 把数据显示到DOM元素
方向2: DOM元素的值发生变化, 更新给变量
v-pre: 原样显示 标签内容, 不解析`{{}}`
v-once: 一次性渲染, 后续不随数据变化
过滤器: filters
语法{{ 值 | 过滤器 }}
组件: components
把大型网页中的 某一部分 拆分到外部书写, vue文件
data为什么是函数: 复用
vue文件作为组件可以重复使用. 为了确保每次使用时 都是独立的数据项, 会调用data函数, 来获取新的数据对象
slot: 插槽
一个占位符, 组件可以用于制作布局, 在使用时临时替换成具体内容
默认插槽: `<slot />` 命名插槽: `<slot name="名字" />`
组件的双标签语法: `<组件></组件>` 其中的内容会替换掉默认插槽
命名插槽语法分3种
vue2.6前: <div slot="名字">
vue2.6后: 必须用 template 标签配合使用
<template v-slot:名字
<template #名字
watch: 监听器
可以监听任意属性的变化
路由系统
<router-view/>: 占位符, 会根据路径 切换成 对应的组件
<router-link>: 类似超连接, 点击后可以切换路径
特点: 切换路径不会刷新整个页面
属性 to : 类似href, 用于指定跳转的地址
样式问题:
给 a标签 添加样式
自带两个激活样式
router-link-active: 模糊匹配
router-link-exact-active: 精确匹配
编程式跳转
$router: 就是路由对象, 在 router/index.js 中构造的
包含了路由的所有操作
例如: push方法, 可以跳转 切换路径
$route: 是 $router.currentRoute 属性, 保存了当前路由的信息
由于 currentRoute 太长, 读取复杂, 所以作者提取出来简化为 $route
路由懒加载
通过测试发现:
非懒加载: 初始化时就请求完毕, 使用时不会重新发请求
懒加载: 初始化时不请求, 在使用时临时发请求
优点: 提高首页的访问速度, 避免在首次进入时加载多余的页面