M father-CSDN博客

Vue计算属性和Watche的区别1.computed: 计算属性依赖改变会重新执行函数,取返回的最新结果,不能写异步逻辑只有依赖改变,才会重新计算当computed内部有异步操作,无法监听数据变化计算属性是依赖其他属性,多对一或者一对一,一般用computedcomputed 计算的属性不用在data中声明2.watch : watch监听的值改变watch重新执行,可以进行异步操作不支持缓存,数据发生改变,直接会触发相应的操作监听的函数接收两个参数,第一个是最新的值,第二个是之前的

2021-11-04 15:13:07 158 1

原创 WebSocket的使用

注释:WebSocket允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输,除非一方主动断开握手。如果只是某几个地方需要用到WebSocket,就没有必要进行封装,直接使用,代码如下:data(){ wsLink:''}watch:{ wsLink(val){ this.initWS() }}mouted(){ this.wsLink = 'ws://xxxxxx'}method

2021-11-03 18:30:33 263

原创 vue bus传值

简述 : bus传值是两个组件之间的传值,适用兄弟组件之间的传值1.utils中创建bus.js文件import Vue from 'vue'const Bus = new Vue()export default Bus2.在需要传值的组件中添加代码A.vue页面// 兄弟组件中的传值import Bus from './utils/bus..js'// 在适当的时机通过this.$emit进行传参methods:{ toBPage(){ Bus.$emit('val',data

2021-11-03 17:35:03 979

原创 vue双向数据绑定的原理

1.v-model是vue的双向数据绑定指令,v-model其实是一个语法糖,可以将页面上空间输入的值同步到data属性,同时也在更新data绑定的时候,同步到页面<--原表单中--><input type='text' v-model = 'name' /><--相当于:先给input绑定value属性值为name,input绑定input事件,然后将input的value属性值赋值给name,表单中v-mode是以下代码的语法糖--><input typ

2021-11-01 17:50:06 196

原创 ES6 class类与类的继承

1.class类class,定义一个类,前面不用加function关键字,直接把函数定义放进类里面即可,方法之间也不需要逗号分割class Father { constructor(){ this.name = 'xiaohua' }; children(){ return `姓名:${this.name}` }}let F = new Father()console.log(F.children()); // 姓名:xiaohua

2021-11-01 17:32:26 100

原创 Promise对象的使用

1.Promise基础用法状态:pending(进行中)fulfilled(已成功)rejected(已失败)let p = new Promise((resolved, rejected) => {let num = Math.ceil(Math.random() * 10) // 称称1-10的随机数// 做一些异步操作 setTimeout(() => { if (num < 5) { // 符合条件的放在resolved方法里面

2021-11-01 16:21:08 236

原创数组的方法

1.sort()方法按照生序排列,最小在前面排序的时候,sort()方法会调用每个数组的toString()转型方法,比较得到的字符串,所以会出现排序紊乱的情况解决方法:sort()接受一个比较函数作为参数,v1和v2,如果是升序v1-v2,如果是降序v2-v1let arr = [11,13,1,16,9,7,6]// 数组排序,使用sortconsole.log(arr.sort(v1,v2)=>{ return v1-v2})2.concat()将参数添加到原数组中,

2021-11-01 11:49:46 63

原创常用的Object方法

1.Object.assign(target,…sources)(浅拷贝)将多个对象的可枚举属性拷贝到目标对象上,并且返回复制后的目标对象target:目标对象…sources:源对象let oage = { age:8}let osex = { sex:'女'}let p = Object.assign({name:'rousi'},oage,osex)console.log(p); // {name:'rousi',age:8,sex:'女'}2.Object.

2021-11-01 10:31:43 140

原创 this指向的四种情况

this的指向问题:1.作为对象的函数被调用(this指向该对象)2.作为普通函数被调用(此时this指向全局对象,在浏览器的JavaScript中,全局对象是window)3.构造函数调用4.Function.prototype.call 和 Function.prototype.apply 调用 (与普通的函数调用相比,可以动态的改变传入函数的this)1.作为对象函数被调用(this指向该对象let obj = { name:'jack', getName:function

2021-10-30 17:05:44 1038

原创继承的5种方式

继承的几种方式:1.借用构造函数2.组合继承3.原型式继承4.寄生式继承5.寄生组合式继承1.借用构造函数// 定义SupTyp构造函数function SupType() { this.colors = ['red', 'yellow', 'blue']}function SubType() { // 继承了SuperType SupType.call(this) }let instancel = new SubType()instancel.color

2021-10-23 18:32:21 359

原创 vue中动态添加el-select属性导致视图不更新问题

问题:项目中碰到了v-model动态添生成的需求,前面的都没问题,但是此时el-select却出问题了,视图不显示,change事件也有数据过来,找了很多方法,都没用第一种:this.$set(target , key , value) ,要更改的数据源key 要更改的具体数据value 重新赋的值这个方法我尝试了,但是没有效果,只能改变一部分就不行了第二种方法: this.$forceUpdate() 强制刷新页面这个是可行的.// 在@change，使用$forceUpdate(

2021-10-22 10:12:55 2452

原创 Promise基本用法

// 定义promise对象 let params = new Promise((res, rej) => { // 创建随机数 let random = Math.random() if (random < 0.5) { // 成功返回 res(random) } else { // 失败返回 rej(random) ..

2021-09-29 15:28:32 139

转载 vue.config.js 试用proxy解决跨域

如果在vue.config.js 的devServe中创建 proxy 对象 devServer: { https: false, // https: {type:Bollean} open: true, // 配置自动启动浏览器 // 配置代理 proxy: { "/apis": { target: 'http://xx.xx.xx.xx:8085', // 想要访问接口域名或者ip // 开启跨域,在本地创建一个虚拟服.

2021-07-22 17:47:33 406

原创函数防抖JS

看了挺多函数防抖的,但是感觉是不是都太麻烦了,请大佬斧正一下,这个算是函数防抖吗1.html部分 <button id="id">按钮</button>2.js部分function ant(fn, dealy) { return () => { setTimeout(fn, dealy) } } document.getElementById('id').onclick = ant(() =&gt

2021-07-17 14:40:55 61

原创 Vue父组件监听子组件值变化

子组件组件1.通过this.$emit(‘方法’,监听的值)this.$emit('changeName',this.nackName)2.父组件// 子组件<component @changeName="nickName" />// 父组件方法 methods:{ nickName(name) { // 给需要的地方赋值 this.texts = name; }, },...

2021-04-22 15:31:26 6280 3

原创登录小插件

1.utils文件夹下创建Loginplugin.jsimport store from '@/store/'import router from '@/router/router.js'import { Dialog } from 'vant';let myPlugin = {}myPlugin.install = (Vue) => { // 我在这个插件里给Vue扩展了一个方法 // 方法叫isLogin Vue.prototype.$isLogin = func

2021-03-10 10:25:00 354

原创 vuex的五个核心概念简述

1.Vuex理解Vuex是vue.js应用设计的状态管理架构,通俗理解,可以想象就是vue组件中的data1.state=>基本数据源对应一般vue对象中的datastate里存放数据为响应式,Vue组件从store里面读取,如果store钟数据发生改变,依赖这个数据的组件也会生更新// 简单的stateconst store = new Vuex.Store({ state: { count:0 }，})2.mutatios=>提交更改数据

2021-03-09 11:34:16 359

原创 vue cli3 引入 Echarts

1.全局安装Echartsnpm install echarts -S2.在main.js钟全局引入Echarts// 引入echartsimport echarts from 'echarts' // 更改原型Echarts名称Vue.prototype.$echarts = echarts3.在项目中使用<template> <div class="echartsDemo"> <div id="myEcharts" ></div&

2021-03-04 11:33:32 627 1

原创 vue cli移动端适配

依次安装npm i -S amfe-flexiblenpm install postcss-pxtorem --save-dev在main.js中引入import 'amfe-flexible'新建一个postcss.config.js文件module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] },

2020-12-24 18:21:42 214 1

weixin_46003800的博客

原创 js防抖和节流

原创 watch 和 computed的区别