![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 67
米儿web
这个作者很懒,什么都没留下…
展开
-
vueRouter路由总结
https://blog.csdn.net/qq_24767091/article/details/119326884原创 2024-05-27 18:34:36 · 258 阅读 · 0 评论 -
Vue-Router知识点总结
1.简介SPA(Single Page Application)Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作) SPA(Single Page Application)单页面应用程序:整个网站只有一个页面,内 容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作 SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历 史的变化、但是hash的变化不会触发新的URL请求 在实现SPA过程中,最核心的技术点就是前端路由前端...原创 2021-12-12 09:29:37 · 1497 阅读 · 0 评论 -
VUE知识点总结
1.计算属性的作用计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题.计算属性是根据data中已有的属性,计算得到一个新的属性.使用计算属性还有一个好处:计算属性是有缓存性:如果值没有发生变化,则页面不会重新渲染也就是说:只要相关依赖没有改变,对此访问计算属性得到的是之前缓 存的结果,不会多次执行。 所以说在进行大量耗时计算的时候,通过计算属性可以提升性能。2.2. 侦听器侦听器就是侦听data中的数据变化,如果数据一旦发生变化就通知侦听器所绑定方法,来执行原创 2021-12-11 14:41:10 · 1036 阅读 · 0 评论 -
前端面试题汇总:css、html、js
1.css与html2.flex布局主要属性:flex-direction:属性决定主轴的方向(即项目的排列方向)。flext-wrap:默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。justify-content:属性定义了项目在主轴上的对齐方式。align-items:属性定义项目在交叉轴上如何对齐align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,原创 2021-08-29 11:03:54 · 204 阅读 · 0 评论 -
TypeScript语法:认识、运行环境
JavaScript缺点:直到今天JavaScript也没有加入类型检测这一机制我们可以给JavaScript加上很多限制,在开发中就可以很好的避免这样的问题了:比如我们的getLength函数中str是一个必传的类型,没有调用者没有传编译期间就会报错;比如我们要求它的必须是一个String类型,传入其他类型就直接报错;那么就可以知道很多的错误问题在编译期间就被发现,而不是等到运行时再去发现和修改TypeScript:解决这一问题与...原创 2021-08-18 11:51:43 · 143 阅读 · 0 评论 -
Vue3:nexttick、historyApiFallback
nexttick官方解释:将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。 比如我们有下面的需求: 点击一个按钮,我们会修改在h2中显示的message; message被修改后,获取h2的高度; 实现上面的案例我们有三种方式: 方式一:在点击按钮后立即获取到h2的高度(错误的做法) 方式二:在updated生命周期函数中获取h2的高度(但是其他数据更新,也会执行该操作...原创 2021-08-12 17:35:34 · 619 阅读 · 0 评论 -
Vuex的状态管理:module(模块)
module的基本使用什么是Module? 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,store 对象就有可能变得相当臃肿; 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module); 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块;module的局部状态对于模块内部的 mutation 和 getter,接收的第...原创 2021-08-12 16:21:54 · 567 阅读 · 0 评论 -
Vuex的状态管理:actions
actions的基本使用Action类似于mutation,不同在于: Action提交的是mutation,而不是直接变更状态;(mutation里是直接更改state状态)Action可以包含任意异步操作;(mutation里不允许异步操作)这里有一个非常重要的参数context: context是一个和store实例均有相同方法和属性的context对象; 所以我们可以从其中获取到commit方...原创 2021-08-11 15:47:32 · 830 阅读 · 0 评论 -
Vuex的状态管理:Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation:组件中commit提交,传统写法<template> <div> <h2>当前计数: {{ $store.state.counter }}</h2> <hr> <button @click="$store.commit('increment')">+1</button> <button @c原创 2021-08-08 20:27:33 · 150 阅读 · 0 评论 -
Vuex的状态管理:state、getters进一步抽取封装
前面在hooks里封装好useState.js和useGetter.js,因为两者代码基本一样,所以还可以进行进一步的抽取,形成useMapper.jsuseMapper.jsimport { computed } from 'vue'import { useStore } from 'vuex'export function useMapper(mapper, mapFn) { // 拿到store独享 const store = useStore() // 获取到对应的对象原创 2021-08-08 19:25:51 · 229 阅读 · 0 评论 -
Vuex的状态管理:getters,封装useGetter.js
getters的基本使用某些属性我们可能需要警告变化后来使用,这个时候可以使用getters:getters第二个参数gettersgetters的返回函数mapGetters的辅助函数这里我们也可以使用mapGetters的辅助函数。<template> <div> <h2>总价值: {{ $store.getters.totalPrice }}</h2> &l..原创 2021-08-08 19:13:29 · 727 阅读 · 0 评论 -
Vuex的状态管理:state、封装useState
组件获取状态在前面我们已经学习过如何在组件中获取状态了。 <h2>{{ $store.state.counter }}</h2>当然,如果觉得那种方式有点繁琐(表达式过长),我们可以使用计算属性:但是,如果我们有很多个状态都需要获取话,可以使用mapState的辅助函数: mapState的方式一:对象类型; mapState的方式二:数组类型; 也可以使用展开运算符和来原有的computed混...原创 2021-08-08 14:27:35 · 957 阅读 · 1 评论 -
Vuex的状态管理基础及Vue devtool插件安装
什么是状态管理在开发中,我们会的应用程序需要处理各种各样的数据,这些数据需要保存在我们应用程序中的某一个位置,对于这些数据的管理我们就称之为是 状态管理。 在前面我们是如何管理自己的状态呢? 在Vue开发中,我们使用组件化的开发方式; 而在组件中我们定义data或者在setup中返回使用的数据,这些数据我们称之为state; 在模块template中我们可以使用这些数据,模块最终会被渲染成DOM,我们称之为View; 在...原创 2021-08-07 20:03:58 · 819 阅读 · 0 评论 -
vue3:vue-router路由的使用各知识点简单案例代码
目录结构//index.jsimport { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'// import Home from "../pages/Home.vue";// import About from "../pages/About.vue";// 配置映射关系const routes = [ { path: "/", redirect: "/hom原创 2021-08-07 14:41:50 · 650 阅读 · 0 评论 -
vue3:vue-router路由的使用,v-slot、动态添加、删除路由、路由导航守卫、登录守卫功能
router-link的v-slot在vue-router3.x的时候,router-link有一个tag属性,可以决定router-link到底渲染成什么元素: 但是在vue-router4.x开始,该属性被移除了; 而给我们提供了更加具有灵活性的v-slot的方式来定制渲染的内容; v-slot如何使用呢? 首先,我们需要使用custom表示我们整个元素要自定义 如果不写,那么自定义的内容会被包裹在一个 a 元素中; 其次...原创 2021-08-07 14:33:59 · 14385 阅读 · 4 评论 -
vue3:vue-router路由的使用
目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得非常容易。 目前Vue路由最新的版本是4.x版本。 vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起...原创 2021-08-04 12:21:50 · 33479 阅读 · 0 评论 -
Vue3高级语法:jsx、自定义指令、指令的生命周期
一、jsxjsx的babel配置如果我们希望在项目中使用jsx,那么我们需要添加对jsx的支持: jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的); 对于Vue来说,我们只需要在Babel中配置对应的插件即可; 安装Babel支持Vue的jsx插件:npm install @vue/babel-plugin-jsx -D在babel.config.js配置文件中配置插件:jsx计数器案...原创 2021-07-31 16:17:21 · 3898 阅读 · 0 评论 -
Vue3的Composition API高级语法:生命周期钩子、provide函数、inject函数、hooks提取代码案例
一、生命周期钩子我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项,也可以替代 生命周期钩子。 那么setup中如何使用生命周期函数呢? 可以使用直接导入的 onX 函数注册生命周期钩子;<template> <div> <button @click="increment">{{counter}}</button> </div>&...原创 2021-07-29 10:07:32 · 692 阅读 · 1 评论 -
Vue3的Composition API
Reactive判断的APIisProxy 检查对象是否是由 reactive 或 readonly创建的 proxy。 isReactive 检查对象是否是由 reactive创建的响应式代理: 如果该代理是 readonly 建的,但包裹了由 reactive 创建的另一个代理,它也会返回 true; isReadonly 检查对象是否是由 readonly 创建的只读代理。 toRaw ...原创 2021-07-24 14:34:43 · 217 阅读 · 1 评论 -
Vue3的setup函数、Composition API:Reactive API、Ref API
vue2和vue3的一个区别:vue3可以吧vue2的Options API转换成Composition APIOptions API即下面所示<script> export default { 此处的内容为vue2的options API }</script>Options API的弊端在Vue2中,我们编写组件的方式是Options API: Options API的一大特点就是...原创 2021-07-11 19:49:16 · 226 阅读 · 1 评论 -
vue抽取相同代码逻辑:Mixin、extends。在开发中extends用的非常少,在Vue2中比较推荐大家使用Mixin,而在Vue3中推荐使用Composition API。
目前我们是使用组件化的方式在开发整个Vue的应用程序,但是组件和组件之间有时候会存在相同的代码逻辑,我们希望对相同的代码逻辑规则原创 2021-07-11 11:22:13 · 1139 阅读 · 0 评论 -
Vue3过渡&动画:列表的过渡及例子
目前为止,过渡动画我们只要是针对单个元素或者组件的: 要么是单个节点; 要么是同一时间渲染多个节点中的一个; 那么如果希望渲染的是一个列表,并且该列表中添加删除数据也希望有动画执行呢? 这个时候我们要使用 <transition-group> 组件来完成; 使用<transition-group> 有如下的特点: 默认情况下,它不会渲染一个元素的包裹器,但是你可以指定一个元素并以 tag attr...原创 2021-07-09 10:57:05 · 1358 阅读 · 2 评论 -
Vue3过渡&动画:animate.css、gsap库
如果我们手动一个个来编写这些动画,那么效率是比较低的,所以在开发中我们可能会引用一些第三方库的动画库, 比如animate.css。官网:https://animate.style/什么是animate.css呢? Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders...原创 2021-07-08 13:49:32 · 2126 阅读 · 0 评论 -
Vue3过渡&动画:过渡动画transition,CSS动画animation,过渡的模式mode,appear初次渲染
在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group; Vue中为我们提供一些内置组件和对应的API来完成动画,利用它们我们可以方便的实现过渡动画效果;如果我们希望给单元素或者组件实现过渡动画,可以使用 transition 内置组件来完成动画;一、Vue的transition...原创 2021-07-07 16:45:11 · 4143 阅读 · 0 评论 -
Vue3组件化开发:生命周期、组件的v-model、computed实现、Mixin
站位原创 2021-07-06 11:12:37 · 259 阅读 · 0 评论 -
Vue3组件化开发:Webpack的代码分包、现异步组件
站位原创 2021-07-06 11:10:52 · 320 阅读 · 0 评论 -
Vue3组件化开发:切换组件、keep-alive
比如我们现在想要实现了一个功能: 点击一个tab-bar,切换不同的组件显示;我们可以通过两种不同的实现思路来实现: 方式一:通过v-if来判断,显示不同的组件; 方式二:动态组件的方式;1.v-if显示不同的组件我们可以先通过v-if来判断显示不同的组件,这个可以使用我们之前讲过的知识来实现: 2.动态组件的实现动态组件是使用 component 组件,通过一个特殊的attribute is 来实现:...原创 2021-07-06 10:49:16 · 2659 阅读 · 0 评论 -
Vue3组件化开发:插槽Slot
1.认识插槽Slot在开发中,我们会经常封装一个个可复用的组件: 前面我们会通过props传递给组件一些数据,让组件来进行展示; 但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素; 比如某种情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使用组件希望显示的是一张图片; 我们应该让使用者可以决定某一块区域到底存放什么内容和元素; 举个栗子:假如我们定制一个通用的...原创 2021-07-05 15:04:43 · 2432 阅读 · 0 评论 -
Vue3组件化开发:非父子组件的通信:provide/Inject,Mitt全局事件总线
在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信。 这里我们主要讲两种方式: Provide/Inject; Mitt全局事件总线;一、Provide和InjectProvide/Inject用于非父子组件之间共享数据: 比如有一些深度嵌套的组件,子组件想要获取父组件的部分内容; 在这种情况下,如果我们仍然将props沿着组件链逐级传递下去,就会非常的麻烦; 对于这种情况下,...原创 2021-07-02 17:11:08 · 521 阅读 · 2 评论 -
Vue3组件开发-父子组件之间通信的方式
父子组件之间如何进行通信呢? 父组件传递给子组件:通过props属性; 子组件传递给父组件:通过$emit触发事件;一、父组件传递给子组件在开发中很常见的就是父子组件之间通信,比如父组件有一些数据,需要子组件来进行展示: 这个时候我们可以通过props来完成组件之间的通信; 什么是Props呢? Props是你可以在组件上注册一些自定义的attribute; 父组件给这些attri...原创 2021-06-24 14:48:56 · 2337 阅读 · 2 评论 -
Webpack基础打包
一、Webpack的默认打包我们发现是可以正常进行打包的,但是有一个问题,webpack是如何确定我们的入口的呢? 事实上,当我们运行webpack时,webpack会查找当前目录下的 src/index.js作为入口; 所以,如果当前项目中没有存在src/index.js文件,那么会报错;...原创 2021-06-04 16:40:24 · 110 阅读 · 1 评论 -
Vue3组件化开发
一、V-model的原理原创 2021-06-02 14:40:11 · 353 阅读 · 0 评论 -
VUE基础语法watch、购物车小案例
一、认识侦听器watch侦听器的用法如下: 选项:watch 类型:{ [key: string]: string | Function | Object | Array}侦听器watch的配置选项我们先来看一个例子: 当我们点击按钮的时候会修改info.name的值; 这个时候我们使用watch来侦听info,可以侦听到吗?答案是不可以。 这是因为默认情况下,watch只是在侦听info的引用变化,对于内部属性的变...原创 2021-05-27 15:09:59 · 385 阅读 · 0 评论 -
vue知识点:动态路由
在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下路径/user/aaa或/user/bbb除了有前面的/user之外,后面还跟上了用户ID这种path和Component匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)router下index.js配置路由{ path:'/user/:id', component: User}进入user页面点击路径<template> <div id="原创 2020-12-17 13:54:13 · 2938 阅读 · 0 评论 -
vue商城项目(一)创建项目
一、创建项目vue create 项目名二、用github托管代码在github创建仓库,将本地代码与github仓库联系起来方法一:将git上创建的项目clone下来git clone https://github.com/mier17717/supermall.git三、划分目录结构1.清除用不到的东西HelloWorld.vue用不到,先删掉将App.vue里相关的删掉,变为最简洁的<template> <div...原创 2020-11-04 14:49:53 · 1782 阅读 · 0 评论 -
vue知识点:Vue-webpack
一、webpack node、npm的关系webpack模块化打包,webpack为了可以正常运行,必须依赖node环境,node环境为了可以正常执行很多代码,必须其中包含各种依赖的包npm工具(node package manager)是node.js自带的软件包管理工具二、webpack安装1.查看node版本,没有node需要安装node-v2.全局安装webpack(这里先指定版本号3.6.0,因为vue cli2依赖该版本)npm install webpack原创 2020-11-03 13:14:55 · 173 阅读 · 0 评论 -
vue 中使用vuex和localStorage保存登录状态
需求:刷新页面,登录状态不会因此改变首先说一下vuex和localStorage的区别1.实质区别vuex存的是状态,存储在内存;localStorage是浏览器提供的接口,让你存的是接口,以文件的形式存到本地2.应用场景vuex用于组件之间传值,localStorage主要用于页面间传值3.永久性当刷新页面时,vuex存储的值会丢失,localStorage不会总...原创 2020-03-11 15:41:28 · 2708 阅读 · 0 评论 -
vue-动态绑定属性v-bind
1.v-bind动态绑定属性比如动态绑定a元素的href属性,img元素的src属性2.v-bind动态绑定class对象3.v-bind动态绑定class数组语法4.v-bind动态绑定style原创 2020-01-15 16:08:58 · 750 阅读 · 0 评论 -
vue的其他指令
一、插值操作的其他指令操作1.v-once:当不希望界面随意跟随变化时用,元素和组件只渲染一次,不会随数据的改变而改变2.v-html:该指令后面会跟一个string类型,使用该指令会将string的html解析出来并进行渲染3.v-pre:用于跳过这个元素的编译过程,用于显示原本的Mustache语法4.v-cloak:在某些情况下,我们浏览器可能会直接显示出来编译的...原创 2020-01-14 15:39:08 · 87 阅读 · 0 评论 -
Vue.js-如何划分组件
一、组件划分1.功能模块---select,pagenation...2.页面区域---header, footer, sidebar...二、引用组件举例在App.vue中引用header.vue和footer.vue组件1.用import引入2.用components:[ Header, Footer ]引入 注册组件3.引用模板三、组件之间的通信1...原创 2018-09-11 16:46:08 · 1463 阅读 · 0 评论