weixin_45259626的博客

原创 el-select 选择器相关

有两个Select 选择器，前面一个下拉框选中的数据，是后面Select 选择器的总数据。 <el-select v-model="value1" multiple placeholder="请选择"> <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" &g

原创 Cascader 级联选择器通过状态展示隐藏

在项目中遇到一个新需求，Cascader 级联选择器选择以后，选中的那个数据后来被删除了，但是还要让它回显和以前一样。后端就把所有的数据都保留了，但增加了一个状态字段，供我判断哪些是删除了的,status===0表示删除。我拿到数据以后配合element的disabled来改变下拉框样式将数据隐藏。 <el-cascader v-model="value" :options="options" ></el-cascader> da

原创 自适应布局之动态计算宽高

我们经常会遇到某个高度（宽度）是根据窗口高度（宽度）减去已知div高度（宽度）而得到，此时就需要calc函数。calc()语法非常简单，使用数学表达式来表示，但是得注意：使用“+”、“-”、“” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；可以混合使用各种单位进行计算；表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的，width: calc(100% - 10px)则正确；表达式中有“”和“/”时，其前后

原创 触发监听执行多个方法

当我们触发监听执行多个方法时，使用数组可以设置多项，形式包括字符串、函数、对象export default { data: { name: 'jane' }, watch: { name: [ 'sayName1', function(newVal, oldVal) { this.sayName2() }, {

原创 watch深度监听

我们在监听对象时，一般对象内部的属性被改变时是无法触发 watch的 ，所以我们需要设置深度监听deep: true，如下：export default { data: { studen: { name: 'Joe', skill: { run: { speed: 'fast' } } }

原创 watch立即执行

我们都知道watch 是在监听属性改变时才会触发，但有时候我们需要组件创建后 watch 能够立即执行。我们就可以用immediate: true，如下。export default { data() { return { name: 'Joe' } }, watch: { name: { handler: 'sayName', immediate: true

原创 vu开发小技巧之样式穿透

通常我们在开发当中经常会遇到修改第三方组件样式的时候，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style这些都比较麻烦而且可能带来组件样式被污染的副作用。所以样式穿透相比就显得简单优雅了，但是样式穿透在css预处理器中使用才生效。使用 >>> 或 /deep/ 解决这一问题:<style scoped>外层 >>> .el-checkbox { display: block; font-size: 26p

原创 vue路由参数解耦

我们vue项目中经常在组件内使用路由参数最开始我常用下面的写法：export default { methods: { getParamsId() { return this.$route.params.id } }}在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。正确的做法是通过 props 解耦const router = new VueRouter

原创 关于form与表单提交

一个表单里面只要有form元素，如果没有给action加一个默认值，为空白的时候，当你刷新页面时，会弹出一个警告框提示你已经填入表单，刷新数据将会丢失。如果一个表单里面有一个type="submit"的button、或者type="submit"的input，或者type="image"的input，点击则会触发表单提交动作。即使你使用了return false，按钮也还是会提交submit动作。form元素form元素的DOM接口是HTMLFormElement，继承自HTMLElement，因而它

原创 前端RSA加密

新项目第一次用前端RSA加密，记录一下。RSA是一种非对称加密算法,是由一对密钥来进行加解密的过程，分别称为公钥和私钥。我项目里采用公钥加密，使用私钥解密。RSA的加密过程如下：（1）后端JAVA生成一对密钥（公钥和私钥），私钥不公开，后端保留。（2）后端把公钥传给前端，前端拿到公钥对消息进行加密后传给后端。（3）后端接收到前端加密的消息，利用他自己的私钥对消息进行解密。在这个过程中，只有2次传递过程，第一次是后端传递公钥给前端，第二次是前端传递加密消息给后端，即使都被截获，也没有危险性，因为只

原创 axios的封装步骤

一、axios的封装步骤安装引入环境的切换设置请求超时post请求头的设置请求拦截响应的拦截封装get方法和post方法1.安装npm install axios; // 安装axios2.引入一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。// 在http.js中引入axiosimport axios from 'axios';

原创 H5移动前端自适应

1.固定一个某些宽度，使用一个模式，加上少许的媒体查询方案2.使用flexbox解决方案3.使用百分比加媒体查询4.使用remrem配置：// 通用适配var deviceWidthsetHtmlFontSize()if (window.addEventListener) { window.addEventListener('resize', function () { setHtmlFontSize() }, false)}function setHtmlFontSi

原创 关于WebPack的简单理解

一什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。二为什要使用WebPack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法模块化，让我们可以把复杂的程序细化为小的文件;类似于TypeScript这种在Ja

原创 JS修改this的方法bind、apply、call的理解

call、apply、bind 都是用来修改函数中的this，传参时，call是一个个传参，apply是数组形式传参，call和apply立即执行并且返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。bind是改变this后返回一个新的函数，他不会立即执行。如果bind返回的新函数需要执行，则在后面加（）如下例子的第三四个。call、apply、bind 是Function.prototype下的方法，作用是执行一下目标函数，执行时顺便把目标函数中的this改一下，然后把结果

原创 js闭包的理解

一.闭包的概念闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉。二.闭包的缺陷:闭包会导致内存占用过高,因为变量都没有释放内存。三.常见面试题for 循环中打印for (var i = 0; i < 4; i++) { setTimeout(function() { console.lo

原创 delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。var a=[1,2,3,4]var b=[1,2,3,4]delete a[1]console.log(a)this.$delete(b,1)console.log(b)

原创 Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决？($set())

<template> <div> <ul> <li v-for="value in obj" :key="value"> {{value}} </li> </ul> <button @click="addObjB">添加obj.b</button> </div> </template&..

原创 Vue监听某个属性值的变化

比如现在需要监控data中， obj.a 的变化。Vue中监控对象属性的变化你可以这样： watch: { obj: { handler (newValue, oldValue) { console.log('obj changed') }, deep: true } }deep属性表示深层遍历，但是这么写会监控obj的所有属性变化，并不是我们想要的效果，所以做点修改： watch: {

原创 mvvm和mvc区别？它和其它框架（jquery）的区别是什么？

mvc和mvvm都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。区别：vue数据驱动，通过数据来显示视图层而不是节点操作。场景：数据操作比较多的场景，更加便捷...

原创 什么是MVVM？

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据

原创 vue自定义组件添加点击事件

需要在@click后面加上.native,官方对于native的解释为：.native -——监听组件根元素的原生事件写法：<my-button @click.native=“alert1()” names=“删除” v-bind:item2=“btdata”>

原创 vue解决跨域问题的方法

方法1.后台更改headerheader('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 　　方法2.使用JQuery提供的jsonpmethods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json'

原创 vue路由钩子函数

路由的钩子函数总结有6个全局的路由钩子函数：beforeEach、afterEach单个的路由钩子函数：beforeEnter组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate模块一：全局导航钩子函数1、vue router.beforeEach（全局前置守卫）beforeEach的钩子函数，它是一个全局的before 钩子函数，（beforeEach）意思是在 每次每一个路由改变的时候都得执行一遍。它的三个参数：t

原创 vue常用的修饰符有哪些

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用...

原创 watch和computed区别 及使用场景

1、区别watch中的函数是不需要调用的computed内部的函数调用的时候不需要加()watch 属性监听 监听属性的变化computed:计算属性通过属性计算而得来的属性watch需要在数据变化时执行异步或开销较大的操作时使用对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性computed。computed 属性的结果会被...

原创 v-if和v-for同时出现怎么优化

v-if和v-for谁的优先级高？如何同时使用？首先：永远不要把 v-if 和 v-for 同时用在同一个元素上。其次：当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级1.过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users替换为一个计算属性 (比如 activeUsers)，让...

原创 Vuex的简单使用

1、在项目中安装Vuexnpm install vuex --save2、在项目src文件夹下创建store文件在此文件下创建store.js，并添加如下代码import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({ state: { ...

原创 路由跳转的方式和区别

1、router-link （声明式路由）（1）不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}">（2）带参数<router-link :to="{name:'home，params:{id:1}'}">// params传参数 (类似post...

原创 Vue中的$.nextTick的理解

因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。1、什么是Vue.nextTick()?定义：在下次DOM更新循环结束之后延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM理解：nextTick()，是...

原创 Vue中使用插件的步骤

import Vue from ‘vue’import 组件 from ‘组件包名’Vue.use(组件)

原创 vue引入组件import和require的区别

node编程中最重要的思想就是模块化，import和require都是被模块化所使用。遵循规范require是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用，所以require理论上可以运用在代码的任何地方import是编译时调用，所以必须放在文件开头本质require是赋值过程，其实requir...

原创 Vue中引入组件的步骤?

1.采用ES6的import … from …语法或CommonJS的require()方法引入组件2.对组件进行注册,代码如下注册Vue.component('my-component',{ template: '<div>A custom component!</div>'})3.使用组件<my-component></my-com...

原创 vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。beforeEach主要有3个参数to，from，next：to：route即将进入的目标路由对象，from：route当前导航正要离开的路由next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的...

原创 vue的路由：hash模式 和 history模式的区别

1.直观区别：hash模式url带#号，history模式不带#号。2.深层区别：hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，把这个页面分享...

原创 IE和标准浏览器下有哪些兼容性的写法

原创 Vue组件通信

1、父组件向子组件通信方法一：props {{msg}}方法二：使用$children使用$children可以在父组件中访问子组件。比如调用子组件的方法，并传入值等。2、子组件向父组件通信方法一：使用vue事件父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。 方法二：使用$parent使用$parent可以...

原创 Vue数据双向绑定的原理理解

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式。Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/s...

原创 Vue的生命周期

beforeCreate（创建前） 在数据观测和初始化事件还未开始created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来。 此时是最早可进行发送ajax请求的生命周期，也可进行服务端渲染beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时...

原创 对vuex的理解

Vuex是vue的状态管理模式。变状态的方式是提交mutations。stateVuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。mutationsmutations定义的方法动态修改Vuex 的 store 中的状态或数据。getters类似vue的计算属性，主要用来过滤一些数据。actio...

原创 微信小程序常用API

1.路由5种跳转方式(1)wx.switchTab :只能跳转到导航页,并关闭其他的导航页(2)wx.reLaunch :关闭所有页面，打开到应用内的某个页面(3)wx.redirectTo :关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 导航 页面(4)wx.navigateTo :只保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面(最多10层)(5)w...