Vue基础入门知识

学习vue必看的知识点，省去看文档的繁琐，让你更快速更方便去了解学习。建议收藏！喜欢的小伙伴可以点个赞哦！

Vue

• 基础
  • 指令
    • v-text
      • 你本质为DOM的innerText, 内容作为普通文本展示
    • v-html
      • 本质为DOM的 innerHTML, 内容作为HTML解析展示
    • v-if
      • 满足条件则加载元素, 不满足条件则移除元素
      • 适合网路请求场景中, 数据下载后 再加载DOM元素
    • v-else
      • 配合 v-if 使用
    • v-else-if
      • 配合 v-if 使用
    • v-show
      • 利用css实现元素的显示与隐藏
      • 相较于 v-if, 更适合频繁切换显示/隐藏的DOM元素
    • v-for
      • 遍历生成DOM元素
      • 支持 in 和 of 两种关键词, 效果没有区别
      • v-for="值 in 数组"
      • v-for="(值, 序号) in 数组"
      • v-for="值 in 数字"
      • 搭配 key 属性使用
        • 为遍历生成的元素添加唯一标识, 当数组内容变化时, 重新渲染DOM. 如果key相同 则直接复用, 提高性能
    • v-on
      • 事件绑定
      • @事件名="方法名"
        • 方法名不写()
          • 默认参数1 为事件参数
        • 方法名写()
          • 自定义传参模式
          • 如果需要事件参数, 则需要用 $event 来显式传递
    • v-bind
      • 属性绑定
      • :属性名="JS代码"
    • v-model
      • 双向数据绑定
        • 表单元素使用::单选框, 多选框, 勾选, 下拉选, 输入框 等
      • 方向1: 数据传递到元素上
      • 方向2: 元素发生变化时, 同步更新到绑定的数据
    • v-slot
      • 插槽
        • 组件中的占位符, 使用时被替换成组件双标签的内容
      • 默认插槽
        • <slot>
      • 具名插槽
        • <slot name='xx'>
        • 分多种使用方式
          • <el slot='xx'>
            • vue2.6前
          • <el v-slot:xx
            • vue2.6后
          • <el #xx
            • vue2.6后的简化语法
    • v-pre
      • 标签内容不解析vue语法, 即 {{}} 原样输出
    • v-once
      • 一次性渲染, 后续数据变化不会更新组件
  • 生命周期
    • beforeCreate
      • 组件实例初始化之后, 进行 数据监听, 计算属性, 方法 等的配置之前调用
    • created
      • 组件实例初始化之后, 进行数据监听, 计算属性, 方法等配置完毕后调用. 但是组件还未展示到页面上
    • beforeMount
      • 组件即将显示到页面上
    • mounted
      • 组件实例挂载到页面上之后触发, 此时组件对用户首次可见
    • beforeUpdate
      • 数据发生变化后, DOM被更新之前被调用
    • updated
      • 数据变更导致虚拟DOM重新渲染 和 更新完毕之后 被调用
    • beforeDestroy
      • 实例销毁之前调用
    • destroyed
      • 实例销毁后调用
    • activated
      • 被 keep-alive 缓存的组件激活后调用
    • deactivated
      • 被 keep-alive 缓存的组件失活时调用
  • 资源
    • directives
      • 自定义指令
      • 以 v- 开头的指令, 存放在这里
    • filters
      • 过滤器
      • {{ 值 | 过滤器 | 过滤器 }}
    • components
      • 组件
      • 组件存储在 components 文件夹下
      • 命名推荐大驼峰. 至少2个单词. 为了避免与系统标签重名
      • props
        • 此属性中声明组件参数, 接收使用时的传参
  • 其他
    • ref
      • 为元素绑定一个变量, 存储在vue实例属性 $refs 里
    • keep-alive
      • 保持活动状态, 在此标签中的组件, 不会因为路由切换而被销毁
    • $nextTick
      • 下一个渲染周期执行其中的回调函数
    • $on
      • 添加事件监听
    • $off
      • 移除事件监听
    • $emit
      • 触发事件
  • 资源文件
    • 图片, css 存储在 assets 目录下
    • 图片使用技巧
      • html中 和 style中 直接书写 相对路径 来使用图片
      • JS中使用图片, 需要使用 require() 来引入图片地址
    • css使用技巧
      • scoped关键词
        • 局部作用域, 代表样式只影响到当前组件中的元素
      • scss文件
        • js中引入
          • import ''
            • 全局引入
        • style中引入
          • @import xxx 受到scoped影响
      • css文件
        • 单独引入方式 <style scoped src='assets/xxx.css'
    • public文件夹
      • 存储在这个文件夹的资源, 打包时不被webpack影响, 直接存储在根目录里
• Vue Router
  • 浏览器地址栏的路径切换时, 页面内容随之切换
  • views
    • 通过路由切换的组件存放在此文件夹
  • router-link
    • 类似超链接a标签, 通过 to 属性指定跳转的路径. 路由要求书写绝对路径, 使用 / 开头代表根目录
    • 通过 :to 写法, 内容使用模板字符串实现路径的动态拼接
    • 要想添加样式, 直接给 a 标签添加即可
  • 编程式跳转
    • $route
      • 当前路由的各种配置信息
    • $router
      • 路由对象, 包含路由的所有操作方法和配置信息
      • $router的 currentRoute属性 就是 $route 所以 $router 包含 $route
      • 常用方法
        • push
          • 跳转到新的路径
          • 如果跳转的路径 与 当前路径相同, 会报错 需要在跳转前进行判定, 不相同才跳转
        • replace
          • 替换当前页面路径
        • go
          • 历史操作
  • router-view
    • 路由占位符, 根据路径的变化切换成对应组件
  • 路由参数
    • ?方式传参
      • 路径?参数=值&参数=值
      • 通过 $route.query 来读取
    • :方式传参
      • 配置文件中, 路径 path: '/路径/:参数'
        • 通过 : 来标定参数
      • 读取
        • $route.params
        • 配置中添加 props:true 可以开启组件props属性读取路由参数功能
  • 配置文件
    • path
      • 路径
        • :代表参数
        • ? 代表参数可选
        • 必须 / 开头
        • * 是通配符, 可以匹配所有未配置过的路径
    • meta
      • 元数据, 存放自定义的各种属性
        • 例如 标题, 是否隐藏头
    • component
      • 路径对应的组件
        • 非懒加载
          • 先在顶部 import 此处直接写
          • 项目打包后, 组件会整合到app.js中, 一起加载到页面上
        • 懒加载
          • 使用箭头函数 ()=> import 来进行引入
          • 懒加载的组件在打包后变为 独立的js文件, 然后按需引入
    • name
      • 此配置的名称
    • 全局前置守卫
      • 路由守卫可以监听路由的所有变化, 前置守卫会在路由变化前触发
      • beforeEach
      • 用途
        • 根据路由修改标签名, 配合 meta 属性使用
• Vuex
  • 全局状态共享: 在所有组件之间共享数据
  • 5个核心属性
    • state
      • 共享的数据存这里
      • 使用方式
        • $store.state.属性名
        • 辅助函数 mapState , 存放在 computed 里
    • getters
      • 计算属性, 把state中的值转换后输出
      • 使用方式
        • $store.getters.属性名
        • 辅助函数 mapGetters , 存放在 computed 属性里
    • mutataions
      • 存放同步操作, 修改state中的值
      • 使用方式
        • $store.commit('名字', 参数)
        • 辅助函数 mapMutataions, 存放在 methods 属性里
    • actions
      • 存放异步操作, 以网络请求操作为主
    • modules
      • 用于引入外部模块, 当vuex较大时, 需要按照功能模块进行拆分存放. 此场景中使用
• vue3
  • TypeScript
    • 结合了大量JAVA特性的 JavaScript语言, 由微软公司开发维护
    • 强类型特征
      • 变量名: 类型名
      • 变量只能赋值为 指定类型的
    • 函数的语法
      • function 函数名(参数: 类型名): 返回值类型名{}
    • 编译环境
      • npm i -g typescript
      • 编译命令
        • tsc xxx.ts
        • 用于把 ts文件 编译成 js 文件, 然后运行js
    • 常见类型
      • string, number, boolean, null, undefined
      • any 任意类型
      • 自定义混合类型
        • 利用 | 间隔
      • 数组类型
        • 变量 :Array<类型>
        • 变量: 类型[]
        • 变量: [类型, 类型, 类型]
          • 规定数组中 元素个数 及 相应类型
        • 数组中 每个元素都是 指定类型的
      • 对象类型
        • object
        • 接口
          • interface
          • 可以规定对象中, 具体拥有哪些属性 及 每个属性的类型
    • 面向对象
      • class
      • 属性必须先声明 才能使用
      • 权限词
        • public
          • 公开的, 代表 类外 子类 类自身 均能使用
        • protected
          • 保护的, 代表 子类 类自身 能使用, 类外不可用
        • private
          • 私有的, 代表 类自身 能使用
      • 接口
        • interface
        • class 类名 implement 接口
        • 类中 必须实现接口中规定的 属性 和 方法
    • 模块
      • 导出
        • export {变量1, 变量2...}
      • 导入
        • import {变量1, 变量2} from xxx
  • Vue3
    • 通过ES6 的 Proxy 特性, 实现对 对象类型的监听
    • template
      • 不再严格要求唯一的根元素
    • style
      • 同vue2 没有变化
    • script
      • setup
        • 新增 setup 生命周期, 相当于vue2 的 created
        • 所有页面上使用的内容, 都需要setup中返回
        • 变量默认不具备监听器功能, 变化不再重新渲染界面
        • ref
          • 把变量存储到 使用 set 监听器管理的对象中, 即 vue2 的效果
        • reactive
          • 把 对象类型 用 Proxy 方式进行管理, 实现实时变化监听
        • toRefs
          • 把 reactive 方式转换的对象类型, 转化成多个 ref 方式管理的 属性
        • watch
          • 监听器
        • computed
          • 计算属性
        • 生命周期
          • onBeforeMount
            • 挂载前
          • onMounted
            • 挂载完毕
          • onBeforeUpdate
            • 更新前
          • onUpdated
            • 更新完毕
          • onUnmounted
            • 卸载组件, 销毁
        • 使用路由
          • const $route = useRoute()
          • const $router = useRouter()
        • 使用Vuex
          • const $store = useStore()
          • 目前不支持 辅助函数
        • axios
          • 安装
            • npm i axios
          • 使用
            • 没有全局注册, 不能全局使用
            • 在组件中书写 import 进行axios的引入
• 第三方
  • axios
    • 官网
      • http://www.axios-js.com/
    • 针对vue的用法
      • http://www.axios-js.com/docs/vue-axios.html
    • 安装
      • npm i axios vue-axios
    • 集成代码
      • import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
    • main.js
      • 在此文件中引入集成代码
    • 使用方式
      • get
        • this.axios.get(url).then(res=>{})
      • post
        • this.axios.post(url, params).then(res=>{})
        • 参数与路径需要分开存储
    • 基础路径
      • axios.defaults.baseURL
      • 设置基础路径, 所有的请求都会自动添加此路径前缀
    • 注释事项
      • 请求数据需要先存储到本地后, 才能全局使用
      • 请求数据使用前, 利用 v-if 进行判断
  • swiper
    • https://www.swiper.com.cn/
    • 非常有名的轮播图框架, 功能多多, 需要自己探索
    • 低版本vue2中使用
      • 安装命令
        • npm install swiper@^5 vue-awesome-swiper@^4
    • 文档地址
      • https://www.swiper.com.cn/api/index.html
    • 案例地址
      • https://v1.github.surmon.me/vue-awesome-swiper