qq_40519017-优快云博客

原创 Vue的一些开发技巧

1. provide和inject 描述: provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中; 并且这对选项需要一起使用; 以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 //父组件: provide: { //provide 是一个对象,提供一个属性或方法 foo: '这是 foo', fooMethod:()=>{ console.log('父组件 fooMetho

2020-07-13 14:59:22 199

原创复盘Js

1、call,apply和bind call和apply可以调用函数,改变this,实现继承和借用别的对象的方法; 1.1 call和apply用法间接调用函数,改变作用域的this值劫持其他对象的方法 var foo = { name:"张三", logName:function(){ console.log(this.name); } } var bar={ name:"李四" }; foo.logName.call(bar);//李四 // 实质是cal

2020-07-09 12:11:32 468

原创 Vue技术分享

1、Vue简介是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合是一个构建用户界面的框架是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定数据驱动和组件化的前端开发通过简单的API就能实现响应式的数据绑定和组合的视图组件 MVVM模式图 MVVM 由 Model,View,ViewModel 三部分构成，M.

2020-07-07 20:09:41 662

原创 Vue源码好用的函数

1、cached /** * Create a cached version of a pure function. */ function cached (fn) { var cache = Object.create(null);//es6语法，创建一个空对象 return (function cachedFn (str) { var hit = cache[str]; console.log(cache) //加的代码，打印cache，观察变化 return

2020-07-07 18:05:30 229

原创 React之redux和react-redux

1、redux的使用：（1）基本概念和 API： 1.1 Store Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。 Redux 提供createStore这个函数，用来生成 Store。 createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。 import { createStore } from 'redux'; const store = createStore(reducer); 1.2State .

2020-07-03 14:57:11 235

原创切换路由时的动画效果

在vue中使用动画时，包裹一个transition标签 app.vue： <template> <div id="app"> <transition :name="transitionName"> <router-view/> </transition> &lt...

2019-07-02 10:54:53 796 1

原创 mock的使用

（1）下载mock： cnpm install --save-dev mockjs （2）文件夹： index.js: import Mock from 'mockjs' import { getUserInfo } from "./response/data"; Mock.mock(/\/getUserInfo/, getUserInfo); export default...

2019-06-14 11:59:16 206

原创 axios的封装

① 在lab文件夹下新建一个axios.js的文件 import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constructor (baseUrl = baseURL) { this.baseUrl = baseUrl this.queue = {} } g...

2019-06-09 15:32:04 191

原创 vue3.0的vuex

1. bus的使用原理：其实bus就相当于一个vue实例，兄弟之间的数据传输是要基于vue实例（也就是创建好的bus）创建一个bus.js文件 import Vue from 'vue' const Bus = new Vue(); export default Bus 在maini.js中导入该文件 import Bus from './lab/bus' Vue.prototy...

2019-05-28 17:50:42 2146 2

原创 vue_cli3的router

1. 路由的简单配置和技巧（1）在路由地址后面 :name { path: '/argu/:name', component: () => import('@/views/argu.vue') } 在组件内 <div> {{ $route.params.name }} </div> 其中 $route.params....

2019-05-16 19:36:44 1675 1

原创 axios

创建一个方法，导出这个方法就能给任一个页面使用 /* *axios的用法： *axios({ * method: 'post', * url: '/user/12345', * data: { * * } *}); */ //引入axios import axios from 'axios' //定义一个函数fetch，里面的参数：（url,data,meth...

2019-05-05 17:18:34 107

原创 vue-quill-editor富文本编辑器的使用

HTML:  <div class="edit_container">  <quill-editor v-model="addForm.content" ref="m...

2019-04-29 13:28:13 266

原创七牛上传

HTML中： <div class="fileUpload-main"> <div class="upload-img"> <div class="imgItem" v-for="(item,index) in addForm.dialogImageUrl" :key="index"> <img :...

2019-04-29 12:16:45 406

原创 webpack+vue-cli+elementUI

1. 配置webpack和vue-cli cmd: vue init webpack [文件名字] 前提是要先下载好全局的node vue-cli webpack 2. 再安装elementUI，cmd: npm i element-ui -S 3. 在vue-cli 中的main.js 中引用element-ui import ElementUI from 'element-ui...

2019-04-15 18:10:42 405