![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 82
Jason–json
这个作者很懒,什么都没留下…
展开
-
热门App 高仿项目12 个 GitHub 上的高仿项目
热门App 高仿项目12 个 GitHub 上的高仿项目原创 2022-07-11 17:38:54 · 14893 阅读 · 9 评论 -
react 生命周期-2
React生命周期中的Updation阶段,也就是组件发生改变的更新阶段,这是React生命周期中比较复杂的一部分,它有两个基本部分组成,一个是props属性改变,一个是state状态改变(这个在生命周期的图片中可以清楚的看到)。shouldComponentUpdate函数会在组件更新之前,自动被执行,会在render 渲染之前执行它要求返回一个布尔类型的结果,必须有返回值,false 下面的代码就不再执行 shouldComponentUpdate(){ // 会在rend原创 2020-07-03 16:02:43 · 139 阅读 · 0 评论 -
veux第二节 mutations和actions/modules
mutations更改 Vuex 的 store 中的状态的唯一方法是提交 mutation(类似 redux 中的 action + reducer),Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)mutation 中的函数不要直接调用mutation 中的函数被 commit 执行的时候,接收两个参数mutations中的方法会自动接收两个参数 mutations中 addNewUserV原创 2020-05-27 23:09:49 · 203 阅读 · 0 评论 -
vuex 第一节
vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式,类似 reduxvuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。当项目数据量达到一定程度的时候去使用。 vueX存储数据是存储在内存当中的这种状态管理模式包含:State : 状态数据源View : 使用状态数据源的视图Actions : 修改更新数据源的操作这种模式遵循的是原创 2020-05-20 23:31:12 · 153 阅读 · 0 评论 -
vue组件通信方案,简单介绍
vue组件通信方案组件通信的类型:基本上都是根据组件关系区分类型父子通信跨级通信兄弟通信路由视图级别通信通信解决方案props/$ emit(父子通信)<k-div :pages=age></k-div>在组件中使用props接收直接使用 Vue.component("k-div",{ props:['pages'], template:` <div>原创 2020-05-19 22:40:49 · 189 阅读 · 0 评论 -
vue 路由元信息
路由元信息meta: { requiresAuth: true }meta后跟一个对象 固定的requiresAuth(自定义)我们去自定义一段信息来去匹配对应的功能,比如验证登录(用户中心)了才能查看. 我们给用户中心路由加上这个标识,加了之后就需要验证是否是登录状态,如果是登录状态我们才能正常查看这个页面、定义路由的时候可以配置 meta 字段通过 meta 定义要验证的路由const router = new Router({ routes: [ { path: '原创 2020-05-16 23:33:06 · 431 阅读 · 0 评论 -
vue 路由组件传参
路由组件传参我们通常把路由直接映射(绑定)的组件称为 路由组件,也只有路由组件才能直接调用路由有关对象:$router、$route当我们一个组件即希望作为路由组件使用,又可能作为功能组件(某个页面中的一部分)去使用,这个时候路由组件传参的方式来做到这点案例我们对 item.vue 组件进行改造,当我们在 home.vue 的商品列表上移入移出,出现商品信息提示层 <span> <!--下面Item组件找不到item 这里点击传参原创 2020-05-16 23:09:31 · 352 阅读 · 0 评论 -
vue 重新定向
vue 重新定向重新定向的作用就是当我们访问同以一个页面时如果是第一次访问加载这个页面,我们选择了喜欢的类型浏览器记录第二次访问的还是这个页面,但是上次我们已经选择了喜欢的东西,这时判断我们是否 有选择的类型如果有 选择那么我们就重新定向直接访问已经选择的类型通过localStrage保存访问记录export default { name:'BookBoy', created() { // 访问记录,如果有打开过那么就存一下 localStorage.原创 2020-05-14 00:34:04 · 1432 阅读 · 0 评论 -
vue 嵌套路由
嵌套路由一些比较复杂的应用会有多层嵌套的路由和组件组成在应用增加一个用户个人中心,用户中心又是由多个页面组成时,使用嵌套路由const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../vi原创 2020-05-12 22:46:24 · 296 阅读 · 0 评论 -
vue 路由守卫
路由守卫当导航发生改变的时候,vue-router 会在多个不同的地方调用指定的函数,也就是与路由有关的生命周期函数,也称为:路由守卫组件内守卫路由独享守卫全局守卫组件内守卫定义在组件内的与路由有关的生命周期函数(守卫)beforeRouteEnterbeforeRouteUpdatebeforeRouteLeavebeforeRouteEnter当路由解析完成,并中指定的组件渲染之前(组件 beforeCreate 之前),不能这里通过 this 访问组件实例,需要通过 n原创 2020-05-12 22:40:38 · 211 阅读 · 0 评论 -
vue动态路由商品详情
动态路由有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url,我们不可能为每一个商品都定义一个独立的组件,而是把它们都映射到同一个组件,同时 url后面的部分为动态变化的部分,我们会在设计路由的时候进行特殊的处理import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter) const routes = [原创 2020-05-12 22:32:21 · 801 阅读 · 0 评论 -
vue-router 路由
当应用变得复杂以后,我们就需要通过一种便捷、高效的方式来管理应用,最常见的就是通过路由路由:把 url 与 应用中的对应的组件进行关联,通过不同的url访问不同的组件,当页面简丹如teb切换还是使用组件前后端路由的区别:后端路由是在分发网络资源,vue前段切换的页面交互内容新建项目时不要自定义 选择Manually-> 选择Babel(es6的编译)和Router标星号 ->use history mode for router(是否使用历史记录 选择是)->分来放是还放一起(选原创 2020-05-12 22:09:14 · 292 阅读 · 0 评论 -
vue axios模拟请求数据
搜索框总体思路:功能:搜索框输入信息获取github网站信息,一个父组件,两个子组件搜索框组件input填写要搜索的信息,点击按钮获取信息v-model发送给父组件,父组件在传递给list组件list接收到发送axios请求,获取数据,获取到之后加载到页面App.vue组件<template> <div id="app"> <h3>Search Github</h3> <!--原创 2020-05-10 14:16:06 · 306 阅读 · 0 评论 -
vue动画
在 vue 中给组件或元素添加动画的方式可以分为多种,但总体无非还是通过 css 和 JavaScript 来进行处理通过 css 添加动画的方式特别的简单,只需要利用 css 中的 transition 就可以做到...原创 2020-05-10 14:05:51 · 447 阅读 · 0 评论 -
vue动态组件
我们会发现,当组件切换的时候,都会触发组件的销毁和重建。首先,性能不好。其次,会丢失组件状态;v-if 组件切换的方式:创建和销毁导致组件状态不能留存v-show组件切换的方式,显示和隐藏DOM结构不改变动态组件 切换方式:激活和冻结(及改变DOM结构有不销毁元素)当在这些组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。keep-alive 是一个内置容器组...原创 2020-05-07 23:16:26 · 327 阅读 · 0 评论 -
vue ref/refs
如果我们希望获取组件节点,进行 DOM<相关操作,可以通过 ref 和 $refs 来完成给元素或组件添加 ref 属性,则该元素或组件实例对象将被添加到当前组件实例对象的 $refs 属性下面ref两个功能直接操作dom另类的传参方式 只能父传子该属性的是一个对象,存储了通过 ref 绑定的元素对象或者组件实例对象<li :ref="'li'+i" v-for="i ...原创 2020-05-07 23:01:38 · 297 阅读 · 0 评论 -
vue组件的生命周期
组件生命周期指的是组件从创建到销毁的过程,在这个过程中的一些不同的阶段,vue 会调用指定的一些不同得组件方法基本生命周期函数有下面几个阶段:创建阶段挂载阶段更新阶段卸载阶段创建阶段/初始化阶段,应用不多 beforeCreate(){ console.log("beforeCreate") console.log(this.$el) //创建之前输出挂载...原创 2020-05-07 22:42:01 · 158 阅读 · 0 评论 -
vue props
props 验证组件的 props 就是组件的参数,为了确保传入的数据在可控的合理范围内,我们需要对传入的 props 的值类型进行必要的验证Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 ...原创 2020-04-29 13:24:48 · 497 阅读 · 0 评论 -
vue 插槽
vue插槽默认情况下 模板,解析后会替换掉整个组件的内容,如果我们想保留摸个组件,我们可以使用 vue 提供的内置组件slot来设置(是内置组件,不是指令)当只有一个组件且没参数时,复用组件中直接在相应位置插入插槽即可 slot="default"默认可不写<div id="app"> <kkb-dialog> <p>这是内容</p&...原创 2020-04-28 20:20:16 · 221 阅读 · 0 评论 -
vue 分页
分页效果实现思路:1.每页显示的数量2.当前页数3,总页数 , 总页数放在computed中计算 放在页面 splice截取数组元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...原创 2020-04-28 20:07:00 · 1487 阅读 · 2 评论 -
vue 组件的传参
组件的传参普通方式父传 属性名随意写 使用v-bind绑定属性的方式<k-div :pages=age></k-div>子接 :使用属性propsprops:使用储存数据,组件内部数据的使用方式和data一致,直接通过this来调用注意点: 可复用性组件里,一个组件的模板必须具备一个根节点 Vue.component("k-div",{ ...原创 2020-04-28 00:32:31 · 342 阅读 · 0 评论 -
vue 组件注册
组件组件是可复用的组件实例,我们把重复的功能封装组件,达到便捷,快速开发的目的参1:组件名称,参2:组件的选项,是以对象的形式去 描述组件的功能根组件:通过 new Vue() 来创建的,通常应用中只有一个,但也可有多个(可能造成数据混乱)可复用组件:通过Vue.computed() 来创建分为全局组件Vue.component,局部组件components:{},如果跟组件只有一个那么...原创 2020-04-26 18:20:39 · 177 阅读 · 0 评论 -
vue watch侦听器
watchwatch 计算属性/计算数据/异步派出数据当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,computed和watch的区别computed是依赖数据变化,才去计算,没法处理异步的变化watch回去主动处理数据变化,可以直接处理异步watch适合处理,一个数据影响多个数据,更适合处理数据相互独立的场景computed: 适合处理 多个数据影响一个数据,...原创 2020-04-25 13:49:36 · 246 阅读 · 0 评论 -
vue computed方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-04-24 23:21:55 · 809 阅读 · 0 评论 -
vue 事件及事件修饰符
v-on事件v-on:事件名称.修饰符 =“执行的函数或表达式” , v-on: 可简写 @ 符号不带冒号注意点:事件执行的函数 fs需要在methods中定义事件绑定时的执行函数有无小括号都是调用 ,如果写了小括号目的是为了传参this:methods用来存放组件中使用的函数方法,methods对象中的函数 this指向当前vue实例(说白了this就是全局的)事件对象:event...原创 2020-04-22 16:16:08 · 523 阅读 · 0 评论 -
vue 多个div拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-04-21 20:22:01 · 1668 阅读 · 0 评论 -
vue 指令修饰符及自定义指令
指令修饰符指令:参数.修饰符 = 值修饰符是指令的(不是参数的),如属性是对象的不同的指令有不同的参数,有的指令也可能没有修饰符,有的指令可能有不同的修饰符不同的指令可能有相同的修饰符,使用修饰符一定要找 对应指令 下的修饰符多看api 才能知道有哪些修饰符,修饰符可以连着用, 自定义修饰符可以直接跟在参数,也可以跟在数据后自定义指令是为了满足千奇百怪的场景需求,这种场景下需要用到自定...原创 2020-04-21 20:17:23 · 1314 阅读 · 0 评论 -
vue 基本指令
vue 基本指令所有的指令 v-指令名称 = 表达式(而不是普通的字符串)在 vue 中,指令是一个带有 v- 前缀的属性,与普通属性不一样的地方在于,指令的值是引号括起来的 表达式,不同的指令有不同的作用,vue 内置了一些常用的指令,后期我们还可以自定义属于自己的指令 <div class="app"> {{messageX+messageX}}...原创 2020-04-17 16:45:46 · 173 阅读 · 0 评论 -
vue基础入门
Vue(读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动veu学习过程(渐进式)1.模板引擎 2.组件增加复用性 3.前端路由 4...原创 2020-04-17 16:22:02 · 647 阅读 · 0 评论