zcm629-CSDN博客

原创 Vue官网文档笔记

一、 Vue.extend(options)使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data选项是特例，需要注意 - 在Vue.extend()中它必须是函数<div id="mount-point"></div>// 创建构造器var Profile = Vue.extend({ template: '&l...

2019-07-10 16:57:35 540

原创 vue面试题集锦

本博文持续更新中，如有更好的解决方案，请留言。组件通信1、父向子// 父组件<HelloWorld msg="Welcome to Your Vue.js App"/>// 子组件props: { msg: String }2、子向父// 子组件this.$emit('add', good)// 父组件<Cart @add="cartAd...

2019-07-01 11:07:09 1157

原创 MVVM

一、说一下对 MVVM 的理解Model - 模型、数据View - 视图、模板（视图和模型是分离的）ViewModel - 连接 Model 和 ViewVue三要素一、响应式：vue 如何监听到 data 的每个属性变化？1、什么是响应式修改 data 属性之后，vue 立刻监听到data 属性被代理到 vm 上2、Vue如何实现响应式（Object...

2019-06-05 10:49:32 231

原创小程序运用

一、小程序尺寸单位与设计原则以iphone6（375*667）作为调试设备，设计稿以750*1334 ，改设备下设计稿与rpx为1:1关系，以px为单位时，则除以2。二、rpx与px的选择在绝大多数情况下，都可以用rpx,但以下几种情况需要具体的斟酌1、字体的大小（字体是否需要随着机型放大缩小）2、当设置border时三、推荐使用flex布局四、苹果机型默认字体： ...

2019-05-31 15:47:20 189

原创 div实现textarea效果

在之前的一个项目中，用到textarea时，发现一个问题，就是textarea不能做到高度自适应，就采取了用div模式的形式<div class="textarea" contenteditable="true"></div> width: 100%; height: 420px; outline: 0;...

2019-05-16 15:17:36 2258

原创 JavaScript专题之数组去重

一、双层循环 var array = [1, 1, "1", "1"]; function unique(array) { // res用来存储结果 var res = []; for (var i = 0, arrayLen = array.length; i < arrayLen; i++) { ...

2019-05-13 16:25:17 153

原创 react动态路由、异步组件

一、动态路由列表组件<Link key={index} to={'/detail/' + item.get('id')}></Link> 路由配置<Route path='/detail/:id' exact component={Detail}></Route>详情组件获取 idthis.props.match.p...

2019-02-19 15:19:50 1215

原创 React-使用Redux-thunk中间件实现ajax数据请求

把异步函数放在生命周期函数里写，生命周期函数会变得越来越复杂，组件会变得越来越大。Redux默认只处理同步，借助redux-thunk ,可以把异步请求放在actionCreators.js里管理，而且有利于自动化测试。中间件指的是是action 与store的中间，是redux的中间件,它使得我们可以在action中写函数（返回函数）安装依赖npm install redux-thun...

2019-02-15 17:24:34 396

原创 redux-immutable统一数据格式

在实际项目中，数据都放在reducer.js下不利于对数据进行管理，可以把一个大的reducer.js拆分成多个小的reducer.js。一、header文件夹下的store文件夹reducer.jsconst defaultState={ focused:false}export default(state=defaultState,action)=>{ ...

2019-02-15 14:56:39 280

原创 immutable在react中的使用

在使用redux时，组件派发出action，在reducer中处理时，我需要返回一个处理后的新的对象，也就是说不能对state进行直接的修改。immutable的作用就是，将state设置为不可变对象。以下是实现步骤。按照依赖npm install immutablestore文件夹下reducer.jsimport { fromJS } from 'immutable';...

2019-02-15 14:21:30 571

原创 react-redux

一、store文件下actionType.js文件，定义acition类型的常量export const CHANGE_INPUT_VALUE = 'change_input_value'export const ADD_ITEM = 'add_item'export const DEL_ITEM = 'del_item'2、reducer.js文件，根据不同的action类型，...

2019-02-15 14:02:20 129 1

原创 vue-cropper实现图片裁剪功能

实现代码<template> <div class="upload_con"> <el-dialog :title="title" :visible.sync="isShowUpload" @close="close" width="630px"> <div style="

2019-02-14 11:13:42 1238

原创在vue项目中使用ueditor

1、下载uditor压缩包从Ueditor的官网Ueditor编辑器，官网地址为：http://ueditor.baidu.com/website/将上述ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹；2.修改配置在ueditor.config.js中修改如下代码：window.UEDITOR_HOME_URL = "./stati...

2019-02-14 10:54:56 1230

原创 vue项目兼容ie

1、安装babel-polylfilnpm i --save-dev babel-polyfill2、在build下webpack.base.conf.js文件中引入module.exports = { entry: { app: ['babel-polyfill', './src/main.js'] },}3、.babelrc文件的配置{ ...

2019-02-14 10:51:21 564

原创 vue+element ui +vue-quill-editor 实现富文本编辑器功能

一、兼容性vue-quill-editor 不兼容ie10以及ie10以下，所以有兼容性需求时，慎用。二、实现代码<template> <div> <div style="background:#fff;width:100%;height:100%"> <quill-editor v-model="co...

2019-02-14 10:42:30 4171

原创 vue后台管理权限控制

说到后台管理系统，就免不了涉及到权限的管理。在项目中，主要遇到的有两种，一种是页面的限制，一种操作按钮的限制。首先我们聊一下页面的权限限制：一、路由的配置（router—> index.js）1、不对权限做限制的页面（路由的初始配置）export const constantRouterMap = [ { path: '/', na...

2019-01-25 10:42:57 1948 1

原创文件的下载、预览

项目中，我们经常遇到对文件的下载、预览功能。首先我们先说一下下载一、文件的下载1、后台根据数据生成word文件，存放到服务器，然后通过接口给前台返回地址，前台进行下载。该方法不足点就是，生成的文件会占据硬盘内存。window.location = commonUrl + '/template/exportEvent?eventId=' + id + ''2、后台给前台返回文件数据...

2019-01-17 16:07:36 3046

原创上传文件知识点总结

在实际项目中，不可避免的会有上传文件的功能，本篇文章，不会具体介绍实现该功能的各种插件，而是是总结一下，在原生input[type=file]上实现，以及文件与数据流之间的转换 <input class="fl Inp" type="file" @change="readURL">upimg() { let fileinput = event.currentTa...

2019-01-17 11:30:14 924

原创 js异步总结

一、单线程单线程：只有一个线程，只能做一件事原因：避免DOM渲染的冲突解决方案：异步浏览器可以渲染DOMjs可以修改DOM结构js执行的时候，浏览器DOM渲染会暂停两段js也不能同时执行(都修改DOM就冲突了)webworker支持多线程，但是不能访问DOM二、event- loopevent-loop：事件轮询，js实现异步的具体解决方...

2019-01-07 16:33:10 205

原创 vue知识点运用(动态路由、路由导航守卫）

一、动态路由应用场景：从信息列表组件，点击详情操作，跳转至详情组件，显示该条信息。个人实现思路：在列表页，获取该条数据id,将该id传至详情组件，在详情组件中传id参数，通过详情接口获取详情信息知识点：1、jQuery项目中，跨页面传参的实现1.1通过url传参function getUrlParam(key) { // 获取参数 var url = window.lo...

2019-01-02 10:54:40 614

原创 vue项目开发环境的跨域问题

一、使用脚手架自带的代理机制config下的index.js中的proxyTable的配置dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: './', proxyTable: { '/api': { target: 'http://news.baidu.com',...

2019-01-02 10:54:16 398

原创 vue跨域处理（vue项目中baseUrl设置问题）

一、方法一在公用文件common.js中设置baseUrlexport var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api'该方法的优点：在项目打包时，static下面的文件是不会被webpack处理的，所以可以通过改变static下config.js中的值，更改服务器地址...

2019-01-02 10:45:58 42445 9

原创 vue项目中的静态资源处理

如图所示，一个vue项目结构如下：src下assets文件夹需要进过webpack打包，而static则不需要进行打包一、将静态资源放到assets文件夹时当我们把一些静态资源放到assets文件夹下时，我们需要用相对路径引入： <div> <img :src="require('@/assets/img/1.png')" alt> &...

2019-01-02 10:45:43 4080 1

原创 react生命周期函数

Todolist.js组件import React, { Component, Fragment } from 'react'import TodoItem from './TodoItem'import './style.css'export default class Todolist extends Component { // 当父组件的render函数被运行时候...

2018-12-17 14:17:25 120

原创 git常用操作

打开本地git命令窗口或者cmd命令窗口，cd到你存放项目的根目录下，并执行一下命令行：$ git clone https://github.com/susieZzhang/VueDemo.git (github项目地址)打开项目文件夹，会发现刚才在github里面新建的文件都存在本地了将要上传的文件拷贝到这个目录下，拷贝完成后，再执行下命令git status，...

2018-12-03 10:57:04 134

原创 charles的使用

一、安装https://www.jianshu.com/p/fb2bdde5b498二、使用tools—>Map Local在ajax中调用

2018-11-30 10:17:09 137

原创 vue官方文档注意点——Prop

1、Prop的大小写HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 pro...

2018-11-26 11:05:05 748

可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。幸好如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件...

2018-11-26 10:47:23 421 1

原创 vue官方文档注意点———自定义事件（事件名）

一、自定义事件（事件名）不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的：<my-component v-on:my-event="doSomethi...

2018-11-26 10:17:04 1137

原创 Redux的工作流

一、安装reduxnpm i redux二、在src下创建store文件夹index.js文件import { createStore } from 'redux'import reducer from './reducer'const store = createStore(reducer)export default store reducer.jsco...

2018-11-23 15:48:14 434

原创 vue-cli搭建vue项目

一、安装node.jsnode官网地址注意：安装时，可以默认安装到指定路径，如何更改安装路径，请更改环境变量配置。我的电脑—属性—高级系统设置—高级—环境变量—Path检测node是否安装成功 node –v 如果安装成功，则会显示node的版本号二、安装vue-clinpm i vue-cli -g三、搭建vue项目vue init webpack...

2018-11-22 09:43:55 123

原创 textarea实现换行操作

在与后台交互时，传至时将“/\n|\r\n/g”用“”替换$(“#mdresponsibilities”).val().replace(/\n|\r\n/g, “<br>”),将返回的数据显示在页面中的textarea中。var reg = new RegExp(“<br>”, “g”)$(“#mdresponsibilities”).val(info.resp...

2018-11-14 17:04:47 637

原创移动端页面的适配

一、关于viewport设置&amp;lt;meta id=&quot;device&quot; name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no&quot;&amp;gt;二、关于不同设备rem大小的

2018-11-14 16:53:35 236

weixin_43182021的博客