![](https://img-blog.csdnimg.cn/20201217195404469.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 74
VueVueVue
心湖中的石子
这个作者很懒,什么都没留下…
展开
-
vuex补充:state存储数据,mutation修改数据(传参),action处理异步(传参),getters
1、组件访问state的第一种方法this.$store.state.全局数据名称2、组件访问state的第二种方法从vuex中按需导入mapState函数import{ mapState } from ‘vuex’将全局数据,映射为当前组件的计算属性 computed:{ ...mapState(['count']) }完整代码:<template> <div> <h3>当前最新的count值为:{{count}}</原创 2021-12-31 08:49:07 · 2040 阅读 · 0 评论 -
vue2项目复习02-合并参数,mockjs模拟数据,在store中存取轮播图数据,使用swiper插件实现轮播图,使用watch+$nextTick解决轮播图
1、合并参数合并params和query参数goSearch(){ //代表的是如果有query参数也带过去 if (this.$route.query) { let location = { name: "Search", params: { keyword: this.keyword || undefined }, }; location.query = thi原创 2021-12-04 23:52:11 · 971 阅读 · 0 评论 -
vue2项目复习01-关闭elint检校,src文件别名,路由传参的对象写法,代理解决跨域问题,nprogress,vuex状态管理库,store的模块式开发,节流与防抖,编程式导航+事件委托路由跳转
1、关闭elint语法校验创建vue.config.js//关闭elint语法校验{ lintOnSave:false;}2、src文件夹配置别名jsconfig.json配置别名@代表src文件夹,@不能在node_modules和dist文件夹中使用{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/"] }, "exclude": ["node_module原创 2021-12-04 21:33:26 · 1137 阅读 · 0 评论 -
Vue3-EWShop电商系统前端开发-笔记01
1、接口文档https://www.showdoc.com.cn/12077455682696742、一些基础配置ico图标,public/index.html<link rel="icon" href="<%= BASE_URL %>favicon.ico">配置/vue.config.jsmodule.exports={ configureWebpack:{ resolve:{ alias:{ 'assets':'@/asse原创 2021-11-22 23:03:37 · 1501 阅读 · 0 评论 -
vue3小野森森-05-createApp,component,mount,unmount,directive指令,use,plugin,推荐一个好的vue3系列教程
1、createApp,component,mount,unmount许多apllication Api都放在了app实例上(通过createApp创建的实例)创建一个app实例const app = createApp(App)创建全局组件app.component('组件名',组件模块名)2、directive指令略过吧3、use,plugin4、推荐一个好的vue3系列教程简书上的一个教程...原创 2021-11-19 10:09:47 · 1740 阅读 · 0 评论 -
vue3小野森森-04-error handler,warnHandler,globalProperties,isCustomElement,optionMergStrategeies,perform
1、error handler,warnHandler,globalProperties(全局属性)通过createapp创建的app对象里面包含config对象,error handler,warnHandler,globalProperties都在config对象里globalProperties(全局属性)可以在全局被访问,用来替代vue2里面的Vue.prototype如果要在原型上添加一个utils属性可以使用如下代码import { createApp } from 'vue'impo原创 2021-11-19 09:42:30 · 1024 阅读 · 0 评论 -
vue3小野森森-03-toRaw,markRaw,生命周期钩子,选项式provide及inject,组合式provide及inject,给provide及inject增加响应式,$refs
1、toRaw返回一个reactive或readonly包裹的proxy对象其实就是将一个proxy对象转化成普通对象<template> <div> </div></template><script>import {ref,reactive,toRaw,readonly,shallowReactive,shallowReadonly,toRefs} from 'vue'export default { name:原创 2021-11-18 23:26:17 · 1418 阅读 · 0 评论 -
vue3小野森森-02-readonly,watchEffect,watch,watch侦听多值,reactive与readonly周边,shallowReactive,shallowReadonly
1、readonly<template> <div> <span>{{}}</span> </div></template><script>import {reactive,readonly} from 'vue'export default { name: 'App', setup (props,context) { const reactiveObj=reactive({原创 2021-11-18 12:02:54 · 470 阅读 · 0 评论 -
vue3小野森森-01-关于setup,reactive,ref,unref,toRef,toRefs,isRef,customRef,shallowRef,triggerRef,computed
1、关于setup的一些概念vue3里面自定义事件依然需要先定义后使用vue3不再使用this.emit来发射自定义事件,而是使用context.semit来发射自定义事件,this已经是昨日黄花和vue2一样,emit里面有两个参数,一个是自定义事件名,一个是要发射过去的数据,数据可以是多个或者是数组在setup里面定义的变量和函数一定要通过return返回出去vue3把钩子都作为函数放在‘vue’里需要从‘vue’中解构出来在setup里面使用的变量要用ref或者reactive包裹一下,原创 2021-11-17 23:15:06 · 1094 阅读 · 0 评论 -
vue2、3复习04(完结)-vue-cli脚手架,后面都是基于vue2的创建,直接完结吧
1、vue-cli脚手架原创 2021-11-14 09:52:07 · 568 阅读 · 0 评论 -
vue2、3复习04-前端路由,路由工作方式及步骤,vue-router的使用步骤,路由重定向,路由高亮,嵌套路由及重定向,动态路由匹配,获得动态路由参数的两种方法,编程式导航,命名路由,导航守卫
1、前端路由后端路由:请求方式,请求地址与function处理函数之间的对应关系。后端路由基本使用方法(以express为例)2、spa与前端路由单页面应用程序,所有组件的展示与切换都在这唯一的一个页面内完成,不同组件的切换需要通过前端路由来实现前端路由:就是hash地址与组件之间的关系3、前端路由的工作方式1、用户点击了页面上的路由连接2、导致了url地址栏中的hash值发生了变化3、前端路由监听到了hash地址的变化4、前端路由把当前hash地址对应的组件渲染到浏览器中4、前端原创 2021-11-13 23:59:18 · 1447 阅读 · 0 评论 -
vue2、3复习03-组件概念,keep-alive保持状态,插槽的基础用法、默认内容,具名插槽,作用域插槽,解构作用域插槽的scope,私有及全局自定义指令,updated函数,自定义指令的参数值
1、什么是动态组件指的是动态切换组件的显示与隐藏,vue提供了一个内置的<component>组件,专门用来实现组件的动态渲染。1、<component>是组件的占位符2、通过is属性动态来指定要渲染的组件名称3、<component is="要渲染的组件的名称"></component关键代码: <component :is="comName"></component>源码grandFather.vue<t原创 2021-11-13 12:54:01 · 643 阅读 · 0 评论 -
vue2、3复习02-组件的生命周期,父子组件、兄弟组件、后代之间组件的数据共享,vuex,全局配置axious,使用ref引用dom元素,使用ref引用组件的方法,this.$nextTick
1、组件的运行过程原创 2021-11-12 22:46:24 · 1162 阅读 · 0 评论 -
vue2、3复习01-对props校验,自定义事件,自定义事件传参,组件上的v-model,watch侦听器,侦听器的immediate、deep选项,侦听对象中单个属性的变化
1、对props校验使用validator函数进行校验props:{ name:String, age:[Number,String], address:String, count:{ type:Number, require:true, default:100 }, type:{ validator(value){ return ['success原创 2021-11-12 07:40:09 · 769 阅读 · 0 评论 -
vue3(撩课)笔记05-setup,ref,reactive,readonly,toRefs,toRef,context,计算属性新用法,watch,watchEffect,provide
1、组合式API(composition API)概念选项式API(options API)随着开发会日益臃肿,且数据分散组合式API数据集中不分散,比较好维护组合式API主要是以函数的形式呈现的2、组合式API基本语法–setupsetup可以理解为一个调度仓库,以往的data,computed,methods,watch都可以写在这里取代了beforeCreate()和created()钩子函数 setup(props,context){ return {原创 2021-10-02 08:42:57 · 687 阅读 · 0 评论 -
Vue3(撩课学院)(完结)笔记10-vuex4简介,继承,获取和共享状态,多页面共享,修改共享状态,异步状态,改进用法,模块分割
1、vuex4简介全局状态管理可以使用组合式API(compose API)单向数据流理念vuex把组件共享状态抽取出来,以一个全局单例模式管理,在这种模式下,项目中的组件树构成了一个巨大的‘视图’,不管在树的哪个位置,任何组件都能够获取状态或触发行为。vuex是什么vuex是专为vue.js应用程序开发的状态管理模式,她采用集中式存储管理应用的所有组件的状态,并以响应的规则保证状态以一种可预测的方式发生变化一句话表述:vuex相当于一个数据银行,对vue应用中多个组件的共享状态进行集原创 2021-09-04 21:12:45 · 843 阅读 · 0 评论 -
Vue3(撩课学院)笔记09-axios简介,发起get请求的两种方式,发起带参的get及post请求,发起并发请求,并发请求结果将数组展开,axios全局配置,axios配置及封装,请求和响应拦截
1、axios简介axios是基于promise可以用于浏览器和node.js的网络请求库,在服务器端使用原生node.js,在浏览气短使用ajax(即XMLHttpRequests)2、axios发起get请求撩课提供的api接口地址:http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001<template> <div> <h1>axios-发起get请求</h1&原创 2021-09-04 15:58:31 · 1353 阅读 · 0 评论 -
Vue3(撩课学院)笔记08-路由前置守卫,路由前置守卫设置元信息,路由后置守卫,keep-alive,一个路由tabbar案例,promise基本使用,链式调用,优化
1、路由全局前置守卫对符合条件的路由路径进行判断并决定是否放心Router/index.js//引入路由import {createRouter,createWebHashHistory} from 'vue-router'import Home from './../components/Home.vue'import Mine from './../components/Mine.vue'import News from './../components/News.vue'import原创 2021-09-04 11:46:05 · 408 阅读 · 0 评论 -
Vue3(撩课学院)笔记07-vueRouter路由,创建路由,路由重定向,路由跳转,动态路由,路由懒加载,路由嵌套,路由参数穿传递的两种形式,通过事件来跳转路由
1、vueRouter路由原创 2021-08-04 13:12:57 · 822 阅读 · 2 评论 -
Vue3(撩课学院)笔记06-cli脚手架
1、cli工程化使用vite构建vue项目2、快速创建项目npm方式(亲测可用)npm init @vitejs/app 项目名cd 项目名npm installnpm run devps项目名不可以是驼峰出现端口占用问题 throw er; // Unhandled ‘error’ eventnode 报错 throw er; // Unhandled ‘error’ event 解决办法Vite2.0项目运行报esbuild相关错误 errno: -4058(Error: sp原创 2021-07-22 11:50:05 · 806 阅读 · 5 评论 -
Vue3(撩课学院)笔记04-高阶API-mixin混入,mixin自定义属性,全局配置mixin,自定义全局指令,自定义局部指令,自定义指令传入数据,teleport传送门
1、Mixin混入将课复用代码独立出来用于复用通过创建Mixin对象将复用代码放在Mixin对象中在根组件中添加mixins属性,通过数组来存放多个minxin对象(也就是把minin内容混入根组件中)基本案例:<body><div id="app"></div><script> //定义一个minxin对象 const myMixin={ data () { return { msg:'测试原创 2021-07-20 17:09:17 · 561 阅读 · 3 评论 -
Vue3(撩课学院)笔记03-slot插糟,具名插槽,渲染作用域,作用域插槽,动态组件、异步组件、生命周期、watch侦听器、组件单向数据流、props动态绑定传参,no-props,过渡及动画
1、插槽的具体定义及基本使用 - 插槽就是子组件提供给父组件使用的一个占位符,用<slot></slot>表示 - 父组件可以在这个占位符中填充任何模板代码,如html,组件等 - 填充的内容会替换子组件<slot></slot>标签案例<body><div id="app"> <sub-Box> <!-- 组件标签对内的内容是用来填充slot插槽的--> <button>原创 2021-07-20 09:04:27 · 614 阅读 · 0 评论 -
Vue3(撩课学院)笔记02-创建组件,全局组件,局部组件,父子组件,组件标签化,组件的data数据共享,组件间通讯,props,父传子$ref,子传父$parent
1、创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上<body><div id="app"> <div class="component"> <button-counter></button-counter> </div></div><script&g原创 2021-07-16 21:57:12 · 687 阅读 · 1 评论 -
Vue3(撩课学院)笔记01-创建实例对象,v-for遍历,时间绑定,传参,时间修饰符,计算属性,v-if,v-show,深拷贝,v-model与各类表单的绑定
1、概述原创 2021-07-15 16:41:39 · 1273 阅读 · 1 评论 -
Vue全家桶09(黑马vue)--vuex管理数据,基本使用,mutation,mapMutation,action处理异步,action带参,getter,todo案例
1、使用Vuex管理数据的好处:A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新有点类似于安卓的信息中心,有一个store对象用来存储所有共享数据2、Vuex的基本使用1、安装vuex依赖包npm install vuex --save2、导入vuex包import Vuex from ‘vuex’3、创建sore对象con原创 2021-07-03 17:26:13 · 531 阅读 · 0 评论 -
Vue全家桶笔记08(黑马vue)--模块化规范化webpack的使用等
1、大一统的模块化规范–ES6模块化ES6模块化规范中定义:每个js文件都是一个独立的模块导入模块成员使用import关键字暴露模块成员使用export关键字2、node.js中通过babel体验es6模块化安装babel模块npm install babel项目根目录创建babel.config.js在babel.config.js文件中添加如下代码const presets=[ [ "@babel/env",{ targets:{ edge:'17',原创 2021-06-25 16:08:34 · 142 阅读 · 2 评论 -
Vue全家桶笔记07(黑马vue)--vue-router的基本使用,路由重定向,嵌套路由,动态匹配路由,props路由组件传递参数,命名路由的配置规则,vue-router编程式导航
1、vue-router的基本使用引入相关的库文件添加路由连接router-link是vue中提供的标签,默认会被渲染为a标签to属性默认会被渲染为href属性to属性的值默认会被渲染为#开头的hash地址<div id="app"><router-link to="/user">User</router-link><router-link to="/register">Register</router-link></原创 2021-06-24 21:23:09 · 452 阅读 · 0 评论 -
Vue全家桶笔记06(黑马vue)--接口调用,异步,promise,发送ajax请求,promiseAPI的实例方法和静态方法,fetch,fetch API中的http请求及相应格式,axios
1、接口调用方式原生ajax基于jQuery的ajaxfetch(推荐)axios(推荐)2、异步1、JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责解释和执行 JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程 异步模式可以一起执行**多个任务**2、 JS中常见的异步调用定时任务ajax事件函数3、promise主要解决异步深层嵌套原创 2021-06-23 22:41:28 · 457 阅读 · 0 评论 -
vue看练代码01插槽、过滤器、watch监听,计算属性,声明周期,$refs、$nextTick、路由配置,嵌套路由,axios,并发请求
1、插槽与父子组件传值的合练<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>fengray</title> <script src="./vueSource/vue.js"></script> <style type="text/css"> body{ margin:0; paddin原创 2021-02-13 21:49:55 · 428 阅读 · 1 评论 -
Vue(小码哥王洪元)笔记11,项目day1-day7、使用git托管代码,划分目录结构
1、使用git安装gitbub参考本文1、第1种方法连接jighubcmd下面git initgit add .git commit -m 'shopping-mall' //shopping-mall是分支名称,这个名称在github页面上新增页面的时候创建按照要求输入github的用户名邮箱gti config --global user.email 'xxx@xxx.com'有可能要重复执行git commit -m 'shopping-mall' git push --s原创 2021-01-29 11:00:36 · 410 阅读 · 0 评论 -
Vue(小码哥王洪元)笔记10,知识点完结axios,axios支持的请求方式,安装axios框架,进行网络请求,发送并发请求,全局配置,常见全局配置项,axios实例,封装,拦截器
1、什么是axios原创 2021-01-19 18:28:04 · 517 阅读 · 0 评论 -
Vue(小码哥王洪元)笔记09vuex,单界面的状态管理,mutation,vuex的核心概念,单一状态树,getters,mutation,module的使用
1、什么是xuex官方解释:vuex是一个专门为vue.js开发的状态管理模式vuex也集成到vue的官方调试工具devtools extiension,提供了诸如零配置的time-travel调试,状态快照导入导出等高级调试功能状态管理到底是什么?状态管理模式,集中式存储管理等,可以简单地将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后将这个对象放在顶层的vue实例中,让其他组件可以使用。可以把状态管理看做是一个公共变量的管理。这个公共变量是事实可更新的。有点类似于vue实例里面的原创 2021-01-18 23:58:24 · 519 阅读 · 1 评论 -
Vue(小码哥王洪元)笔记08Promise,什么是promise,promise用得到的场景,promise的三种状态,promise的其他处理形式,prosmise的链式调用,all方法
1、什么是promise1、promise是异步编程的一种解决方案2、什么时候会处理异步事件呢主要是网络请求当封装一个网络请求的函数,由于不能立刻拿到结果(耗时操作),往往会传入另一个函数,在数据请求成功时,将数据通过传入的函数回调出去。以上只是在简单网络请求的时候可行,如果在复杂请求时,则会出现回调地狱。回调地狱:回调里面还有回调,多层回调,就称为回调地狱promise是一个封装的类,用来解决回调地狱的问题,以一种优雅的方式来解决多层回调的问题2、一个简单的promise1、原始的原创 2021-01-17 18:34:04 · 768 阅读 · 1 评论 -
Vue(小码哥王洪元)笔记07路由案例tabbar
1、tabbar案例011、创建一个样式文件base.cssbody{margin:0; padding: 0;}2、修改App.vue<template> <div id="app"> <div id="tab-bar"> <div class="tab-bar-item">首页</div> <div class="tab-bar-item">分类</div>原创 2021-01-17 15:36:37 · 672 阅读 · 0 评论 -
Vue(小码哥王洪元)笔记06路由,url的hash,history,router-linke,路由跳转,动态路由,懒加载,路由嵌套,router参数传递,导航守卫
1、什么是路由路由器提供了两种机制:路由和传送路由:数据报从来源到目的地的路径传输:将输入端的数据转移到合适的输出端路由有一个非常重要的概念教路由表路由表本质上就是一个映射表,决定了数据包的指向2、前端渲染和后端渲染1、后端渲染如jsp,后端渲染好网页再传给前端2、后端路由后端处理url和页面之间的映射关系3、前后端分离后端只负责提供数据,不负责任何阶段的内容ajax出现后出现的前后端分离模式后端只提供api来返回数据,前端通过ajax获取数据,并且可以通原创 2021-01-15 22:22:59 · 1275 阅读 · 2 评论 -
Vue(小码哥王洪元)笔记05脚手架,安装脚手架2,4,脚手架目录结构,箭头函数,使用vite创建vue3脚手架项目
1、什么是Vue CLI脚手架1、是command-line interface的意思,俗称脚手架,可以快速搭建vue开发环境及对应的webpack配置。2、vue-cli的使用前提是要安装node及webpack2、安装Vue CLI脚手架1、安装脚手架npm install -g @vue/cli2、安装脚手架2模板由于脚手架更新较快,安装时脚手架已经更新到了4.5.10版本,因此需要创建一个脚手架2版本的模板npm install @vue/cli-init -g3原创 2021-01-14 16:29:03 · 422 阅读 · 1 评论 -
Vue(小码哥王洪元)笔记04前端模块化,模块化规范,模块对象的导出和导入,webpack打包,配置,loader,处理less,css,图片,vue,抽取模板内容,插件,搭建本地服务器
1、前端模块化原创 2021-01-14 09:22:48 · 2581 阅读 · 3 评论 -
Vue(小码哥王洪元)笔记03slot插槽的基本使用,封装的原则,插槽的默认值,具名插槽,编译的作用域,作用域插槽
1、slot插槽的基本使用插槽的作用是为了让组件更具有扩展性直接在组件模板需要的地方放入 <slot></slot>标签对<template id="cpn"> <div> <div>我是组件 </div> <slot></slot> </div></template>2、封装的原则抽取共性,保留个性,对个性的部分预留插槽slot3、插槽的使用&原创 2021-01-11 00:08:51 · 559 阅读 · 0 评论 -
Vue(小码哥王洪元)笔记02--父子组件间的通信,props基本用法,props值的两种方式,子组件向父组件传值,子组件内部双向数据绑定,父子组件的访问$children,$refs,$parent
1、父子组件间的通信子组件不应该直接向服务器请求数据顶层组件请求数据之后,再向子组件传递数据(通信)父向子:通过props(属性)父组件向子组件传递数据子向父:通过事件子组件向父组件发送消息2、props基本用法1、在顶层vue实例中(父组件)创建需要用于传递的数据,并注册一个子组件cpnvar app=new Vue({ el:"#app", data:{ message:"关于父组件传值", movies:['一秒钟','我和我的家乡','夺冠','原创 2021-01-10 22:25:02 · 638 阅读 · 0 评论 -
Vue(小码哥王洪元)笔记01--组件补充,options,mustache ,数据绑定,闭包,es6函数增强写法,父子组件,组件模板抽离写法,组件data必须是函数,修饰符,target,const
1、组件语法糖写法语法糖省略掉了extend1、使用语法糖注册全局组件<body><div id="app"> <!--使用组件--> <box-component></box-component> </div><script type="text/javascript">//注册与创建组件同时完成:Vue.component('box-component',{ template原创 2021-01-10 16:59:13 · 591 阅读 · 2 评论