bigpatten的博客

如上图所示，没那么多废话，直接上代码。

vue双向绑定(Diff)原理：当数据发生改变时，发布消息给订阅者watcher， 然后watcher就会调用patch给真实DOM打补丁，更新相应的视图。

比如：有一个列表页面和一个详情页面，那么用户可能会经常执行打开详情 => 返回列表 => 打开详情，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染页面，从而节省内存开销。是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，该组件将不会销毁。用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。

/这里触发的方法名要和父组件中@符后面的名称一样。//触发父组件中的方法，并把值以参数的形式传过去。"子组件向父组件传送的信息""父组件传给子组件的值"

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L7ssoWOR-1658307849412)(C\Users\zll\AppData\Roaming\Typora\typora-user-images\1658303809058.png)]的组件是默认关闭的，也即通过模板ref或者$parent链获取到的组件的公开实例，不会暴露任何在。2.1父组件的内容。2.2子组件的内容。2.1父组件的内容。2.2子组件的内容。......

/ 定义控制弹窗显隐的变量。"监听flag值得变化:"// 接受父组件传过来的值。'你点击了确定按钮''你点击了确定按钮''你点击了确定按钮'// 将变量暴露出来。

前台封装 zip 文件流的下载并如何使用在前端开发过程中有关于文件下载的基本是后台返回文件地址指向的 url ，前端通过 window.open 进行下载，但是对于后台返回 zip 文件流如何进行下载呢？接下来 来看看如何实现。1. 后台返回 zip文件流2. 前台使用axios请求后台接口获取zip文件流请求前的准备axios的 responseType 设置为blob将返回的zip文件流转换为blob对象解析，并指定type为：“application/zip;charset-UTF

问题一：关于使用轨道控制器：THREE.OrbitControls 出现的问题。问题描述：当场景使用轨道控制器后，致使页面中的输入框或单选或复选按钮全部失效的问题分析问题原因：该问题是由于轨道控制器的工作原理造成的，当模型不是全屏状态(body中)渲染，而是在局部渲染时会出现该问题。解决办法是：// 第二个参数默认为body 如果您的场景是局部渲染的，请确保使用它(即场景渲染的容器)controls = new THREE.OrbitControls(that.camera, that.re

1. 下载需要的依赖npm install vue-pdf 或 yarn install vue-pdf2. 引入组件import pdf from 'vue-pdf'; // 引入pdf组件3. 注册组件// 注册pdf组件components: { pdf},data() { return { pdfUrl: '', }},methods: { getPdfInfo() { this.$http.get('/sys/user/pdf/info')

vue项目中指定某个DOM进入全屏模式与退出全屏首先安装全屏插件npm install screenfull@4.2.1 --save在使用的页面中引入import screenfull from ‘screenfull’我们指定某个DOM元素的id，然后获取这个DOM节点methods: { // 定义全屏方法，通过按钮点击触发 fullscreenHandle () { const element = document.getElementById('ta

前端导出PDF首先，你需要安装相关插件或依赖npm install html2canvasnpm install jspdf在项目的 src/utils 目录下新建tools.js文件，写入以下内容import html2canvas from 'html2canvas';import JsPDF from 'jspdf';export default { /** * @param ele 要生成 pdf 的DOM元素（容器） * @param padfName

基于 Element 表格组件进行二次封装首先来看张截图在项目 views 目录下新建表格展示页面<template> <div class="container"> <!-- 参数配置请看组件的 `props` 部分 --> <my-eltable ref="table" id="printTable" :fit="true" :size="'small'" :isSho

基于 Element 表格组件进行二次封装首先来看张截图在项目 view 目录下新建表格展示页面<template> <div class="container"> <my-eltable ref="table" id="printTable" :fit="true" :size="'small'" :isShow="isShow" :loading="loading"

基于 vue 项目来简单了解下 webscoket 与后台实时通信的使用首先：初始化 weosocketcreated() { // 初始化加载WebSocket this.initWebSocket()}// 初始化WebSocket方法methods: { initWebSocket() { if (typeof WebSocket === "undefined") return alert("您的浏览器不支持WebSocket") // websocket地址

定义 request.js 文件，我们可以放在项目的公共文件夹下，我放的位置在 src/utils/request.js下面是逻辑代码：import axios from 'axios'import Cookies from 'js-cookie'import router from '@/router'import qs from 'qs'import { clearLoginInfo } from '@/utils'import isPlainObject from 'lodash/isP

来看两张效果图，首先来看保存前的数据再看保存后的数据其原理简单来说就是，改变了对象数组的某一项在原数据中所在的位置，比如：将数组下标为0的数据和下标为1的数据更换了位置，相当于排序一样的逻辑，然后再把更换后的新数据保存到后台。接下来看使用方法，首先安装相关依赖npm install lodash // 用于表单提交时的防抖节流npm install sortablejs // 表格拖动相关依赖npm install vxe-table // 支持拖动的表格在使用的页面中引入import

1. 采用 :http-request="" 自定义上传的方式<el-upload action="" list-type="picture-card" :file-list="fileList" :http-request="httpRequest" :on-success="handleSuccess" :on-remove="handleRemove"> <i class="el-icon-plus"></i></el-upl

采用DRACO压缩并加载gltf模型的用法，以VUE开发为例首先，在官方文件中找到对模型进行压缩 所需要的文件 位置大概在项目的examples/js/libs/draco/gltf下，我们可以放在项目的public目录下，如下图所示：下面来安装gltf-pipeline；该插件的作用是把现有的gltf格式模型进行压缩，跟图片压缩一样。缩小体积，更快的加载。npm i -g gltf-pipeline用法：在命令行或终端中输入以下命令，格式为：gltf-pipeline -i 原始文件

声明前端代码规范规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。一、编程规约(一)命名规范1.1.1 项目命名全部采用小写方式， 以中划线分隔。正例：mall-management-system反例：mall_management-system / mallManagementSystem1.1.2 目录命名全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数正例： scripts / styles / compone

话不多说，简单粗暴，直接上代码 ！！！首先根据项目开发规范在项目中新建tool.js文件，比如：我放在了项目中的src/utils/文件夹下export default { getDateSpan: function (action) { var star_time, end_time; if (action == "today") { star_time = this.getDateBefore(0) + " 00:00:00" end_time = t.

1. 引入Threejs我们可以在public下的index.html文件中引入：2. 相关依赖文件可以在main.js文件中引入3. 模型可以放在public文件夹下新建static文件夹放入其中function loadGlt(obj) { //为模型添加添加天空盒子环境贴图反光材质 var path = 'static/surround/' var urls = [ path + 'you.jpg',

现实环境中，人们之所以能看得到物体，是因为有光，物体的材质反射光到人眼中。在ThreeJS中有几种光源，去模拟现实环境。最常见的四种分别为：环境光( AmbientLight )：笼罩在整个空间无处不在的光点光源( PointLight )：向四面八方发射的单点光源聚光灯( SpotLight )：发射出锥形状的光， 模拟手电筒，台灯等光源平行光( DirectinalLight )：平行的一束光，模拟从很远处照射的太阳光其他还有半球光光源( HemisphereLight )，平面光光源(.

创建场景添加天空盒子相关代码如下：var scene = new THREE.Scene() //创建场景 var path = 'static/surround/' //注意加载的图片是有顺序的，分别是：右 => 左 => 上 => 下 => 前 => 后 六张宽高、格式相同的图片 //我们可以想象一下一个正方体盒子，而我们的模型就位于正方体盒子内部一样。 var urls = [ path + '4.jpg', path +

首先在对项目开启支付功能，在项目的manifest.json文件中勾选APP模块配置中的Payment支付模块，并将需要的信息填写完整，如下图然后直接上代码：定义一个按钮并绑定点击事件<view class="btn"> <button class="submit" @tap="deposit">立即支付</button></view>下面时逻辑代码：//支付宝支付deposit() { var that = this; // 调用un

首先需要下载echarts插件，通过npm下载npm install echarts -S下载完后在需要用到的地方导入// 导入echarts图表import echarts from 'echarts'当然，不想麻烦也可以在main.js中全局导入// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts 然后直接上代码：<template> <div>

首先，在登录时将token字段存储到本地sessionStorage中。<el-button type="primary" plain @click="login">登录</el-button> // 验证表单登录是否通过 表单的valid方法 // 在返回数据是promise时，我们可以使用await来简化promise // 同时要把紧挨着await的方法修饰成异步的asick方法，即在方法的最前面加上async login() { this.$refs.

父组件调用子组件的方法父组件调用子组件的方法，为子组件绑定ref属性，父组件通过$refs触发执行子组件的方法父组件：<template> <div> <children ref="mychild"></children> <button @click="clickParent">点击</button> </div></template><script>impor

办法1 在项目开发的过程中，能使用图标的尽量使用图标，关于图标的使用：我们可以使用阿里巴巴的矢量图标库。使用方法如下：官方地址将font文件夹放到我们项目的assets静态资源文件夹中：在min.js中导入图标库：// 导入图表库import './assets/font/iconfont.css'在页面中使用：<span class="icon iconfont 图标名称"></span>图标名称可以打开font文件夹下的demo_index.html

首先来看效果图：我们可以清除的看到级联选择器的高度已经溢出了，看起来非常的不友好，而且功能还会受到一定的阻碍，那么怎么来解决这个问题呢？其实非常的简单，出现这个效果的原因就是因为好的不确定是由内容撑起来的，所以在数据很多的时候就会出现高度满屏的情况，我们只需要给他添加给定的高度就可以了。在你的全局样式表中加上如下代码就可以了：.el-cascader-menu { height: 350px;}更改后的效果图如下：...

那么怎么实现非父子组件间的通信，可以通过实例一个vue brother作为媒介，要相互通信的兄弟组件之中，都引入brother，然后通过分别调用brother事件触发和监听来实现通信和参数传递。父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。父组件可以使用props向子组件传递数据。另一个组件也import。在需要通信的组件都引入。

function request(url, body, successCallback, errorCallback, maxCount = 3) { return fetch(url, body) .then(response => successCallback(response)) .catch(err => { if (maxCount <= 0) return error

1. 首先需要安装两个依赖cnpm install --save xlsx file-saver2. 为<el-table></el-table>表格添加id属性标识<el-table id="educe-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :header-cell-style="{

方式一：通过name和params传递参数。首先看一下效果：在当前页面中：<template> <div> <TestNum msg="测试页面" /> <button @click="gogo">跳转</button> </div></template><script>import TestNum from '@/components/textNum.vue'expor

从调试工具中可以看出MyForm是MyButton的父组件，或者说id="app"是MyForm的父组件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue父子..

细心的朋友应该不难看出，全局组件和局部组件的定义方式还是又所不同的。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue全局和局部组件</title>.

1. 自动去除console输出我们知道，我们在开发过程中，不可避免的会使用console.log()、console.error()等方式输出一些信息，供我们调试，但是当我们使用对Vue项目进行build的时候，如果项目中有console输出，则会编译不通过，我们可以根据提示手动的将这些输出删除就能解决问题，不过也可以通过一个开发依赖包来设置在编译过程中自动处理这个包是：babel-plugin-transform-remove-console，是一个运行依赖。基于命令行安装# 基于命令行下的安装

vscode 安装 ESlint 和 vetur 扩展，然后在 vscode 的 config.json 配置文件中加入如下内容即可：{ "eslint.autoFixOnSave": true, // 用来配置作用的文件类型 "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix

们使用Vue脚手架工具创建好项目以后，其目录结构是这样的：在这里面的很多内容是示例内容，是可以删除的，实际开发中我们经常使用且比较有用的文件是：src/components/ 目录src/router/ 目录及其文件src/main.jssrc/App.vue创建一个自己的组件，比如叫：User.vue在src/components/目录中新建一个User.vue 单文件组件，并编写内容<template> <div> <p>我是Us

Vue传统组件的问题全局组件不能重名定义组件的时候，一个组件中可以有JS、有html模板、但是无法定义css样式JS高级语法无法施展使用字符串定义组件模板十分丑陋，也无语法高亮和代码提示Vue单文件组件的用法基本语法规则每个组件都是一个后缀名为.vue的文件每个组件内部都可以有 template、script、style 三个定义区域可以style标签中加入 scoped 属性设置样式私有比如：<template><!-- 模板区域 --> &

依然是设置项目根目录的 vue.config.js 对其配置中的 devServer.proxy 进行设置：module.exports = { devServer: { open: true, port: 8888, proxy: { '/api': { // API服务器的地址 target: 'https://shop.ruan.work/', // 如果是https接口，需要配置这个参数 sec