qq_43477721的博客

React 和 Vue 有许多相似之处：使用 Virtual DOM提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时.

optionMergeStrategies 主要用于 mixin 以及 Vue.extend() 方法时对于子组件和父组件如果有相同的属性(option)时的合并策略自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { // 返回合并后.

Vite 意思是轻快的意思。它和我们以前使用Vue-cli的作用基本相同，都是项目初始化构建工具，相当于Vue项目构建的第二代产品，当然它也包含了项目的编译功能。需要注意一下Vite的生产环境下打包是通过Rollup来完成的，Rollup是JavaScriptd的模块bundler(打包器)，可以将一小段代码编译为更大或更复杂的内容，例如库或应用程序。Vite 提供的是开发环境中的编译，打包工作是依靠的 Rollup。Vite特性介绍轻快冷服务启动。冷服务的意思是，在开发预览中，它是不进行打.

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。主要是有include、exclude、max三个属性；前两个属性允许keep-alive有条件的进行缓存；max可以定义组件最大的缓存个数，如果超过了这个个数的话，在下一个新实例创建之前，就会将以缓存组件中最久没有被访问到的实例销毁掉。两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。Home.vue<template> <div class="hello"&.

电商类的网站为了让顾客更加清晰的看见商品图片，一般会提供放大镜效果。今天我们就使用三种方法来实现一下这个效果说是三种，其实就一种，框架就是在原生的基础上适配一下语法我主要是为了方便使用框架的同学啥？为啥没有 angular，因为我不会不皮了，正文开始????????????????获取页面元素let smallImg = document.getElementById("smallImg");let smallDiv = document.getElementById("sma

上效果图upload.vue（样式是boostrap，不必要太在意样式，可以自己写）<template> <div class="file-upload"> <div class="file-upload-container" @click.prevent="triggerUpload"> <slot v-if="fileStatus === 'loading'" name="loading"> <bu

拖拽事件在IE4的时候，Js就可以实现拖放功能了，当时只支持拖放图像和一些文本。后来随着IE版本的更新，拖放事件也在慢慢完善，HTML5就以IE的拖放功能制定了该规范，Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。 默认情况下，网页中的图像、链接和文本是可以拖动的，而其余的元素若想要被拖动，必须将 draggable 属性设置为true，这是HTML5规定的新属性，用于设置元素是否能被拖动。因此，图像、链接、文本的 draggable 属性默认为 true，.

这是一个悲伤的故事，其实很简单，但是我花费了一天，我也不知道自己这是怎么了。我脑残。。。首先去 github 下载 vuepress-theme-recohttps://github.com/vuepress-reco/vuepress-theme-reco。npx @vuepress-reco/theme-cli init安装的过程中可以按照提示进行就可以了。（注：选择 blog）之后运行这个项目。其实这个已经很不错了。但我本着瞎折腾的精神开始捣鼓了。修改 config.js 文件（我觉

安装最新版的 node。这篇文章是在安装成功之后立刻写的，时间为 2020.12.19，当时的 node 官网的最新稳定版本为 14.15.3，建议安装这个版本。使用 yarn 命令安装。不知道别人的使用情况如何。反正笔者的 window10 电脑，使用 npm 一直都是处于报错状态，即使配置了淘宝源也是如此。 yarn global add @vue/cli这个一般不会报错，当安装完成之后，出现 success 证明安装成功（建议在网速较好的时候进行配置）yarn 的环境配..

看个效果图，再决定学不学================好像还凑合吧那就学起来吧~~~~~~~~~~~~~~~~~~~~~~~<template> <div class="container_box" id="video_box"> <div class="van_swipe"> <!--vant van-swipe 滑动组件 --> <van-swipe :show-indica

实现效果如下，包含后退，播放暂停，前进，指定播放，音量，播放倍速修改等功能1、常用的方法如下：playPause() //播放时暂停，播放时暂停skip(number) //从当前位置跳数秒（使用负值向后移动）stop() //重放setVolume(newVolume) //将播放音量设置为新值[0…1]（0 =静音，1 =最大）play([start[, end]]) //从当前位置开始播放。可选start且end以秒为单位可用于设置要播放的音频范围2、使用代码如下<tem

笔者较为熟悉 vue 框架，就在这个里面为大家演示吧。（主要是我也没试过 react 行不行）先上效果图（pc端和移动端均可使用，笔者这里是为了录制 gif 图，才把页面缩小）1.安装npm install driver.js虽然插件提供链接方式引入，但一般的开发中很少使用main.jsimport Driver from 'driver.js';import 'driver.js/dist/driver.min.css';Vue.prototype.$driver = new Dri

1. 打包项目修改根目录下的 vue.config.js 文件（没有就新建一个），添加下面的代码，保证打包之后不会白屏module.exports = { publicPath: "./"}运行 npm run build，打包之后， dist 目录下的文件，如下所示2.使用一个神器，HbuildX，安装下载啥的，咱就不说了。新建一个 5+App 项目替换，将 dist 目录下的所有文件复制，粘贴到刚刚创建的 uniapp 项目中，全部替换。配置 manifest.json

这篇文章主要介绍，页面瀑布流布局的实现，主要包括瀑布流是什么瀑布流的实现原理瀑布流的使用场景瀑布流的的实现有哪些问题&如何解决1.瀑布流是什么瀑布流, 又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为宽度相等高度不定的元素组成的参差不齐的多栏布局，随着页面向下滚动，新的元素附加到最短的一列而不断向下加载。2.瀑布流的实现原理寻找各列之中高度最小者，并将新的元素添加到该列上，然后继续寻找所有列的高度最小者，继续添加到高度最小列上，一直到所有元素均按要求排列完成为止。

v-imgLazy使用 IntersectionObserver API实现。IntersectionObserver 对象的 observe() 方法向IntersectionObserver 对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根，但是可以监视多个目标元素，以查看这些目标元素可见区域的变化。简单来说可以监听dom元素进出可视区域，并且可以控制具体的变化。 具体使用请看IntersectionObserverAPI：https://developer.mozilla.org

安装 vuex 啥的，就不说了，大家都会。安装好之后，就要开始了。src 文件夹下新建一个 store 文件夹（即，store文件夹下，创建四个文件夹，每一个文件夹下创建一个同名的 js 文件）store.jsimport Vuex from 'vuex'import defaultState from './state/state'import mutations from './mutations/mutations'import getters from './getters/ge

mixins就是混入。 一个混入对象可以包含任意组件选项。 同一个生命周期，混入对象会比组件的先执行。test.jsexport const mixinsTest = { methods: { hello() { console.log("hello"); } }, created() { this.hello() }}home.vue<template> <div>home</div></t.

为了界面可以好看一点，我们使用 Vant 组件库的 sku 组件（安装，使用都很简单，就跟普通的组件库一样）。????????????????????代码如下<template> <div class=""> <div class="sku-container"> <van-sku v-model="showBase" :sku="sku" :goods="goods_info"

NavigationBar.vue<template> <div class="nav-bar z-index-max" :class="{'bottom-line': pageName}" :style="navBarStyle" > <div class="left"> <img v-if="isShowBack" src="@img/back.svg" alt=""> <slot n

<template> <div class="count-down"> <span class="count-down-end-time">{{endHours}}点场</span> <span class="count-down-surplus">{{surplus | filterTime}}</span> </div></template><script>expo

终端输入vue create demo选择第二个填入 y选择自己想要使用的 css 预处理器选择第三个选择第一个选择第二个填入 n（如果你想要下一次构建项目的时候也使用这些配置，就可以填入 y）等待项目构建项目构建成功之后，进入项目所在目录，npm run serve，启动项目由于构建的是移动端的项目，所以我们需要做一些适配的方案，保证项目可以正确的运行在各大机型上。1. public / index.html<meta name="viewport" con

B站地址 https://www.bilibili.com/video/BV1nJ411V75n?p=1模仿 element-ui 组件库，实现一个自己的组件库。????????????一、vue脚手架初始化一个项目vue created 自己的项目名称。这里我们选择自定义。初始化好之后，我们将多余的东西去掉。二，开始封装组件在 componets下创建一个button.vue的文件，name 为 cbButton(名字就自己起，叫啥都行)。????????<te

前端代码<template> <div class="chat-box"> <header>聊天室人数：{{count}}</header> <div class="msg-box" ref="msg-box"> <div v-for="(i,index) in list" :key="index" class="msg" :style="i.u

VuePressVue 驱动的静态网站生成器请确保你的 Node.js 版本 >= 8.6。全局安装npm install -g vuepress创建项目文件夹mkdir vuepress-demo cd vuepress-demo初始化项目 npm init -y改写package.json{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Game</title> <link rel="stylesheet" href="https.

fgdf

做登录或者注册的时候，会用到验证码，前端会接收后端发的验证码图片就像这样的<el-form-item label="验证码" prop="name"> <el-input style="width: 147px;" v-model="ruleForm.verification" placeholder="请填写验证码"></el-input> <div class="verification"> <img :src="this.ve

大概效果就是这样<div class="top-wrapper"> <div class="top-left"> // 显示头像的地方 // imageView 这个是我自定义的组件，用 img 标签代替就可以了 <div class="circle" @click="showChooseImg"> <imageView :src="userImg"></imageView> </div>.

Vue中的 watch ， watch Api1.Watch 用法1：常见用法<div id="root"> <h3>Watch 用法1：常见用法</h3> <input v-model="message"> <span>{{copyMessage}}</span></div>new Vue({ el: '#root', watch: { messag

作者：Lucky Girl https://zhuanlan.zhihu.com/p/92407628vue官网1.vue优点？轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；组件化：保留了 react 的优点...

B站地址：https://www.bilibili.com/video/BV1XJ411a7Mf/?spm_id_from=333.788.videocard.18在此之前，要先安装 less less-loaderwebpack.base.conf.js{ test: /\.less$/, use: [{ loader: "style-l...

Uncaught TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’这个是 vue 项目使用 element-UI 的 InfiniteScroll 无限滚动，出现的报错，参考过几篇博主的文章，都不能解决问题。最后在一头雾水的时候，本来想放弃使用 eleme...

样式没有写，所以长得有点丑<template> <div> <p>请上传身份证照片</p> <input type="file" accept="image/*" ref="uploadId" @change="uploadId" multiple/> <p>请上传学...

1.安装 Vue-clinpm install -g vue-cli2. 使用脚手架初识化项目vue init webpack my-project3.运行项目cd my-projectnpm run dev4.正式编写由于是简单应用，所以直接改造 main.js 和 index.htnlindex.html<!DOCTYPE html><html&...

FATAL Cannot find module '@nuxtjs/axios'Require stack:- D:\vue\VueBase\mt-app\node_modules\@nuxt\core\dist\core.js- D:\vue\VueBase\mt-app\node_modules\nuxt\dist\nuxt.js- D:\vue\VueBase\mt-app\ser...

1.vue init nuxt-community/koa-template nuxt-learn2. yarn install or npm install3.npm run dev出现报错ERROR Failed to compile with 1 errors20:10:54 error in ./server/index.jsModule build failed: E...

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化官方文档import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex)// 在 state 里面储存了一个 count 的变量，值为 1const state = { ...

vue-cli 3使用 vue create app 创建的项目[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use t...

<template> <div class="nav-wrapper"> <div class="logo-wrapper"> <div class="img-wrapper"> <img src="http://tpl-c913457.pic-tpl.websiteonline.cn/upload/f0...

vue过滤器const digitsRE = /(\d{3})(?=\d)/gexport function currency (value, currency, decimals) { value = parseFloat(value) if (!isFinite(value) || (!value && value !== 0)) return '' curr...