- 博客(29)
- 收藏
- 关注
RSS订阅原创 快速了解Vue2.x与Vue3.x的差异
vue3.02.双向数据绑定原理vue2 的双向数据绑定是利用ES5 的Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。vue2只能有一个节点vue3可以有多个节点..........................................
2022-06-07 11:11:15
533
原创 vue脚手架使用pages快速构建一个多页应用
以上目录结构我们可以看出其实 pages 下的一个目录就是一个单页包含的功能，这里我们包含了 2个目录就构成了多页应用在单页应用中，我们的入口文件只有一个，CLI 默认配置的是 main.js，但是到了多页应用，我们的入口文件便包含了 index.js、index.html等，数量取决于 pages 文件夹下目录的个数，这时候为了项目的可拓展性，我们需要自动计算入口文件的数量并解析路径配置到 webpack 中的 entry 属性上，所以我们可以通过glob读取指定文件下指定的文件集合，方法如下：...
2022-06-01 15:05:42
1658
1
原创 vditor轻量级md编辑器
vditor一种轻量级的Markdown编辑器安装vditoryarn add vditor 或者 npm install vditor --save使用<template> <div class="editorRef"> <div ref="editorRef" class="vditor"></div> </div></template><script >import { ElM
2022-05-31 16:16:09
1797
原创 在vue中使用wangeditor
在vue中使用wangeditorwangeditor是一个轻量级富文本编辑器可见网址一、v4版本使用创建一个config.js文件：export default { menus: [ "head", "bold", "fontSize", // "fontName", "italic", "underline", '|', "strikeThrough",
2022-05-31 13:57:36
3195
原创 微信浏览器中实现音乐自动播放
近日微信浏览器中h5页面实现音乐自动播放，试了好多方法，最后还是下面方法比较好用var $myaudio;function getMusic(el, showMusic = true) { var className = 'play' // var trigger = 'ontouchend' in document ? 'touchstart' : 'click' var $musci = document.createElement('div') $myaudio.
2021-02-20 18:13:01
2966
5
原创 H5实现接金币小游戏
今日做出做出一个春节接金币红包的活动，感觉挺不错的分享给大家这个小游戏采用hilojs实现的，详情第一步：安装插件npm i hilojs或者yarn add hilojs第二步：创建一个Asset.js文件import Hilo from "hilojs";export default Hilo.Class.create({ Mixes: Hilo.EventMixin, queue: null, // 下载类 gold: null, // 金币 wood
2021-02-20 17:35:39
3311
7
原创 JavaScript实现微信聊天烟花效果
微信8.0烟花效果实现```css<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title></head><style> html
2021-02-20 17:31:05
8663
3
原创 vue中实现自定义插件
给每个组件增加$eventBus的插件功能函数里面必须有install函数，在main.js中要声明的话就要加static，再在项目中通过Vue.use()使用if判断new Vue()中是否激活调用,如果没被调用的话就不会触发this.$eventBus...
2020-04-05 16:42:47
561
原创 vue中render使用及extend和$mount
vue全局组件在vue中全局组件通常是一下方法：extend和$mount组件挂载如果组件需要挂载，比如全局弹框，就需要extend和$mount在跟文件html中创建一个标签创建一个挂载组件在vue.config.js中设置在项目里面通过事件调用弹框的话，可以封装成函数方便调用，如下：给组件设置一个定位到需要弹出位置、animate动画效果。以上挂载组件进行打包压缩的...
2020-04-05 15:30:05
1755
2
原创 vue中render函数解析
render解析 在vue文件中其实是通过读取template再渲染到render函数中，在vue的main.js中初始状态是这样的： new Vue({ render:h=>(App)}).$mount('#app')以上代码可以解析成 new Vue({ render:React.createElement=>{ return...
2020-04-05 14:29:51
726
原创 通过snabbdom插件 实现虚拟dom / virtual dom / VDOM
用js模拟dom，在js中计算出最小的变更，再操作dom。通过diff算法层层比较遍历旧的dom树遍历新的dom树排序时间复杂度O(n^3) 1000节点， 1000000000 不可取的。。。。 冒泡排序，时间复杂度O（n*2）在vdom的计算中，将时间复杂度降低到了O(n)只比较同一层级标签不同，直接删除重建，不再深层比较标签和key一样，认为是相同的节点，再进行深层...
2020-04-03 16:57:10
264
原创 vue中的数据的响应Object.defineProperty
在vue中v-model是通过Object.defineProperty来实现的，如下：const data = {};let name = '张三';// 对对象定义属性// 需要3个参数// 参数1：对象本身// 参数2:定义的属性// 参数3:定义属性的选项Object.defineProperty(data, 'name', { get(){ console.l...
2020-04-03 16:30:41
386
原创 vue中实现swiper组件
创建父组件<template><div id="app"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :index="2"> <van-swipe-item> <img src="https://pic.maizuo.com...
2020-04-03 14:26:44
548
原创 vue中怎么实现递归组件
自定义一个数据类型用于对数据渲染data.jsexport default [{ value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则', children: [{ value: 'yizhi', label: '一致' },...
2020-04-03 14:03:21
1359
1
原创 vue中slot和v-slot使用
默认slot<li> {{value}} <button @click="deleteAction"> <slot>删除</slot> </button></li><ul> <Item v-for="(item, index) in dataSource" :key="inde...
2020-04-02 23:24:48
1591
1
原创 在vue中熟练使用新手指引
方式一 driver.js安装npm install driver.js --save代码1：定义每一步的提示信息创建utils - driver.jsexport default [ { element: '#some-element1', popover: { title: '第一项', desc...
2020-04-02 22:28:50
1501
1
原创 vue中的computed和watch区别
<input type="number" v-model.number="a"/> <input type="number" v-model.number="b"/> <p>总和： {{ sum }}</p> <p>总和： {{ sum }}</p> <p>总和： {{ sum }}</p&g...
2020-04-02 21:29:51
251
原创 react中的context和children
contextReact 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，n个组件通信需要挨个props麻烦，难以维护，Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。所以context的作用就是在某个父组件中定义一个全局状态，这个状态可以在该父组件下的所有子组件中跨级传递共享方法：步骤1：创建context对象 ...
2020-03-02 22:14:30
433
原创 Redux基础使用与入门
React-Redux是Redux的官方React绑定数据的库。它能够使你的React组件从store中读取数据，操作数据并且向store分发actions以更新数据。初体验工作流：state状态 -> 到视图展示 -> 通过action操作reducer -> render操作仓库数据流程：const reducer = (state, action) => ...
2020-03-02 21:54:47
211
原创 react中怎么使用route
方法一：根目录下router/index.jsimport Home from '../App';import NotFound from '../components/notfound'import DashBoard from '../components/dashBoard'import List from '../components/list'import Setting f...
2020-03-02 20:47:55
832
原创 react入门与初体验
简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MV* 框架，都不满意，就决定自己写一套，用来架设 Instagram 照片墙 的网站（17年 用户量7亿+）。做出来以后，发现这套东西很好用，就在2013年5月开源了。所以react也是当下很火的一个框架那么react和vue有啥区别呢？共同点：模块化：从代码的角度来进行分析的；封装【逻...
2020-02-28 00:49:10
215
原创 axios和fetch区别与使用
前言在JS中我们都是用AJAX发送异步请求，promise解决异步回调地狱的，后来产生的jq把ajax进行封装，根本上解决了兼容性问题，但还没有解决异步回调地狱的问题，最后官方直接封装fetch方法，不需要直接导入库直接使用（fetch = XMLHttpRequest + promise）Vue2.0之后大部分人使用axios比较多，而axios也是基于ajax和promise封装的，但它比...
2020-02-26 20:19:58
3702
1
原创 Vue中的router使用方法
概念路由就是一个网址，它当中的路由参数也是指网址参数路由参数：根据路由参数显示不同的内容 ->不同的组件 手册初体验<div id="app"> <ul> <li><router-link to="/films">电影</router-link></li> <li&g...
2020-02-26 13:45:03
503
1
原创 vue中的组件通信和vuex
组件是vue.js中最重要的一个功能，在vue中组件的实例都是相互独立的，但开发过程中组件雨组件之间的数据相互引用是必不可少，下面来阐述vue的几种通信方式1：父组件->子组件：通过props接受父传递数据步骤1：子通过props键来接受父传递过来的数据 props:[‘变量名1’,…,‘变量名n’]步骤2：父传递给子 父必须在调用子的组件上通过语法 v-bind:子pro...
2020-02-25 20:05:47
601
1
原创 vue基础入门探讨
简单来说：Vue是当下很火的一个JS库&框架这里谈到的库也就是一些属性方法的集合，按需调用，框架也就是业务的一套解 决方案（N个库的集合），它制定了统一的开发规范真正意义上它解决了前后端分离便于开发和后期维护学过vue跟JQ的都应该了接一下它们的优缺点1-JQ有大量的DOM操作，vue有一个概念虚拟DOM 就是直接去内存中取 2-JQ没有统一模型不方便后期维护，vue是...
2020-02-25 13:54:49
285
2
原创 混合App开发原理
前言Hybrid AppHybrid App是指介于web-app（网页APP，如京东web）、native-app（原生应用，如手机上面的APP应用）这两者之间的app,它虽然看上去是一个Native App，但只有一个WebView ( WebView,可以类比成iframe )，里面访问的是一个Web App，就是包了个客户端的壳，其实里面是HTML5的网页。工作原理混合APP就是在...
2020-02-25 01:20:52
4057
3
原创 对微信小程序的理解
前言相信很多人对微信小程序都比较情有独钟，首先大家应该知道小程序的优点，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。历史从2016/9/21微信小程序发展以来发生了千变万化的变化，在此过程中增加了支付宝小程序（2017-09-20）头条小程序（2018-09...
2020-02-22 21:53:32
6979
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人