随笔分类 - Vue
1
摘要：1、背景 最近项目有个需求，需要使用vant的picker选择器，并且搭配弹出层使用，并且picker的数据是异步获取的，但是在测试的过程中，数据已经正确获取到，页面也实现了响应式，但是picker选择器的数据却没有更新，这是为什么呢？？？ 代码： html <van-popup position=
阅读全文
摘要：一、vue相关 1、为什么data是一个函数？（防止数据在组件之间共享） 组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。 而单纯的写成对象形式，就使得所有组件实例共
阅读全文
摘要：1、代码层面的优化 使用 v-if 与 v-show 减少初始化渲染和切换渲染的性能开销；（v-if其实是重复的销毁与创建，v-show只是基于简单的CSS进行切换） v-for 加上 key提高 Diff 算法的速度； 图片的大小优化以及懒加载（vue-lazyload）； 不同格式的图片对比 j
阅读全文
摘要：1、发送请求 2、云函数中发送请求，例子request https://github.com/request/request-promise 创建云函数movielist，右键在终端打开，输入 npm install --save request 然后输入 npm install --save re
阅读全文
摘要：1、为什么要用vuex 在vue组件通信的过程中，我们通信的目的往往就是在组件之间传递数据或组件的状态（这里将数据和状态统称为状态），进而更改状态。但可以看到如果我们通过最基本的方式来进行通信，一旦需要管理的状态多了，代码就会变得十分混乱。对所有状态的管理便会显得力不从心，尤其是多人合作的时候。此时
阅读全文
摘要：一、登录机制 在项目中，我们可以大致得出一个登录的过程，主要分为 登录验证、登录保持、退出三个部分。登录验证是指客户端提供用户名和密码，向服务器提出登录请求，服务器判断客户端是否可以登录并向客户端确认。 登录保持是指客户端登录后， 服务器能够分辨出已登录的客户端，并为其持续提供登录权限的服务器。退出
阅读全文
摘要：1、背景 大家是否经常遇到在关闭网页的时候，会看到一个确定是否离开当前页面的提示框？想一些在线测试系统、信息录入系统等就经常会有这一些提示，避免用户有意或者无意中关掉了页面，导致数据丢失。而最近在做项目的时候有一个需求，用户在表单页面中进行操作，为了防止用户在未保存表单数据的情况下离开、刷新页面等造
阅读全文
摘要：1、背景 2、基本使用 HTML //下拉框 <div class="select"> <el-select v-model="value" > <el-option v-for="item in item" :key="item.value" :label="item.label" :value=
阅读全文
摘要：1、简述 2、基本使用 Html代码 <el-button type="primary" @click="downLoad(url)">下载图片</el-button> Script代码 data数据 url : '文件下载地址' methods方法 /** * [getBlob 获取二进制流] *
阅读全文
摘要：1、背景 2、基本使用 定义返回按钮： <el-button type="primary" plain @click="returnPage">{{$t('message.test.return')}}</el-button> 在methods中定义方法： /** * [returnPage 返回按
阅读全文
摘要：1、基本使用 第一种常用写法：导航菜单与 router-view 的配合使用 将所用的导航菜单数据编写成一个数组的形式，提高维护性； 在utils工具文件夹中建立utils.js文件； import merge from 'webpack-merge' /** * 工具类Class */ class
阅读全文
摘要：1、项目的基本创建（官方文档：https://cli.vuejs.org/zh/guide/） 安装@vue/cli 1、卸载vue-cli 2.x版本 npm uninstall vue-cli -g 2、安装@vue/cli 3.x版本 npm install -g @vue/cli3、查看版本
阅读全文
摘要：1、背景 2、实现 思路：我们希望在代码当中增加判断语句，即判断是否为生产环境，在开发环境下采用相对路径下的内容，而在开发环境下采用动态路径下传入的内容（不可为相对路径，否则打包出现错误）； 动态设置标题 data.json文件 { "platName" : [ { "courtName" : "某
阅读全文
摘要：1、安装 2、基本使用 安装成功后，在package.json里面增加以下内容 在相应的Vue组件中引入qrcode插件 import QRCode from "qrcodejs2"; 在html中增加相应的DOM结构 <div id="qrcode"></div> 在methods定义方法 /**
阅读全文
摘要：1、vue-router 安装方式 基本使用 概念： 后端路由：根据不同的url返回不同的内容(node) 前端路由：根据不同的hash返回不同的组件（Vue生成的项目叫做单页应用（SPA）,单页面应用的特点就是可以在改变URL不重新请求页面的情况下更新页面视图。） 类型： 一、经常使用，无兼容性问
阅读全文
摘要：1、组件的定义 组成： template：包裹HTML模板片段（反映了数据与最终呈现给用户视图之间的映射关系） 只支持单个template标签； 支持lang配置多种模板语法； script：配置Vue和载入其他组件或者依赖库 只支持单个script标签； 支持通过import方式载入其他.vue后
阅读全文
摘要：1、过滤器的基本概念 概念：本质上是函数； 作用：用户输入数据后，它能够进行处理，并返回一个数据结果；（无return语句不会报错，但是这种过滤器没有丝毫意义） 格式：管道符（ | ）进行连接，而管道符的作用就是：上一个命令的输出可以作为下一个命令的输入； 位置：只能是Mustache表达式、v-b
阅读全文
摘要：1、什么是计算属性 如果模板中的表达式存在过多的逻辑，那么模板会变得臃肿不堪，维护起来也异常困难，因此为了简化逻辑出现了计算属性； <template> <div id="example"> <p>{{message.split(" ").reverse().join('!')}}</p> </di
阅读全文
摘要：1、安装 2、数据绑定 语法：采用了 “Mustache” 语法（标签） 即 “文本插值” {{ }}（双大括号） 3、指令 定义：v-*，其值限定为绑定表达式 作用：当表达式值变化的时候，可以将变化反应到DOM上 内部指令： v-if：根据表达式的值在DOM中生成或移除一个元素（false：不渲染
阅读全文
摘要：1、Vue的理解 概念： Vue是一套用于构建用户界面的渐进式框架； Vue的核心库只关注视图层； 是一个数据驱动的MVVM框架； 特性： 确实轻量：体积比较小； 数据绑定简单、方便； 有一些简单的内置指令（v-*），也可以自定义指令，通过对应表达式的值就可以修改对应的DOM； 插件化：Vue核心库
阅读全文
1
浙公网安备 33010602011771号