vue-个人杂记

VUE-解决计算精度问题

安装依赖npminstallmathjs--save全局挂载main.jsimportmathfrom'mathjs'Vue.prototype.$math=mathjsmath.add()//加math.subtract()//减math.divide()//除math.multiply()//乘math.sqrt(4)//开方math.bignumber()//大数字BigNumber进行计算
你这个锤子·2023-07-28 04:10

Vue-购物车案例

1.案例效果2.实现步骤①初始化项目基本结构②封装EsHeader组件2.1创建并注册EsHeader组件2.2封装es-header组件③基于axios请求商品列表数据（GET请求，地址为https://www.escook.cn/api/cart）④封装EsFooter组件4.1创建并注册EsFooter组件4.2封装es-footer组件4.2.0封装需求4.2.1渲染组件的基础布局4.2.
一支咸鱼·2023-07-27 22:23

Vue-组件高级(下）

一、目标能够知道如何使用ref引用DOM和组件实例能够知道$nextTick的调用时机能够说出keep-alive元素的作用能够掌握插槽的基本用法能够知道如何自定义指令二、目录ref引用动态组件插槽自定义指令Table案例ref引用1.什么是ref引用ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的D
一支咸鱼·2023-07-27 22:23

Vue-路由

一、目标能够说出前端路由工作的过程能够知道如何在vue3中配置路由能够知道如何使用嵌套路由能够知道如何实现动态路由匹配能够知道如何使用编程式导航能够知道如何使用导航守卫二、目录前端路由的概念与原理vue-router的基本使用vue-router的高级用法后台管理案例前端路由的概念与原理1.什么是路由路由（router）就是对应关系。路由分为两大类：①后端路由②前端路由2.回顾：后端路由后端路由指
一支咸鱼·2023-07-27 22:23

vue-使用canvas画布实现平面图点位标注功能

前言最近需要一个在平面图标注点位功能，去搜了一圈，发现......,最后在查阅文档一顿操作之后。不停修改bug之后，做出一版可以基本使用的版本。最后发现canvas标签可以完成很多功能，电子签名，点位标注，问题标注，画图功能等等效果canvas画布功能难点画布渲染问题-基于canvas提供的渲染方法封装渲染方法，x，y坐标，width，height高，url图片移动距离问题-我们需要借助鼠标点击，
-風过无痕·2023-07-27 14:43

vue-页面使用websocket建立连接用于测试

前言websocket双向通讯在项目中经常使用，但一般都是封装成第三方包，登录，退出建立连接。这样使用是合理，但不便于测试，其实在.vue页面通过new方式可以直接使用websocket。在页面实例加载完成之后连接websocket，在组件销毁时候断开websocket连接。注意具体情况要跟后端对接，比如唯一值（比如token），是不是一对一发，还是一对多发（链表）。细节-websocket方法拆
-風过无痕·2023-07-26 09:56

vue-实例方法 / 生命周期

vm.$mount([elementOrSelector])参数：{Element|string}[elementOrSelector]{boolean}[hydrating]返回值：vm-实例自身用法：如果Vue实例在实例化时没有收到el选项，则它处于“未挂载”状态，没有关联的DOM元素。可以使用vm.$mount()手动地挂载一个未挂载的实例。如果没有提供elementOrSelector参数
JK丶帝·2023-07-25 19:18

VUE-布局

一、表单输入什么是双向数据绑定Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定
W_Meng_H·2023-07-25 16:43

VUE-事件与网络

一、事件v-on监听事件v-onHTML点我注：在这里我们使用了v-on绑定了click事件，并指定了名为sayHi的方法JavaScript方法必须定义在Vue实例的methods对象中varvm=newVue({el:'#vue',data:{message:'HelloWorld'},//在`methods`对象中定义方法methods:{sayHi:function(event){//`t
W_Meng_H·2023-07-25 16:42

vue-百度地图自动获取定位

前言使用地图的项目中经常会出现定位问题，进入页面是需要一个地图中兴点默认值，来生成地图如果这个值写死，就会出现不管谁在任何地方使用这个系统位置是不会动的，用户体验不好其实百度地图是提供了这个api的，使用这个api就可以获取用户的经纬度这个api原理是根据你计算机的ip地址获取定位，网络原因会出次定位不准问题。这个api在别的浏览器（除谷歌之外）可能还有兼容问题，需要测试如果域名不是https每次
-風过无痕·2023-07-25 06:27

vue-使用Baidu（百度地图）实现输入位置获取定位经纬度

前言开发中我们需要地图定位，就是用户输入位置，自动定位获取经纬度，传递给后端存在数据库找了一圈发现千篇一律，最后也是使用element的搜索输入款配合原生百度地图实现这个功能点击地图需要逆地址解析，输入地址时调用百度地图渲染在下拉框，选择传输地址，经纬度一般是在添加时加载地图，可能会因为网络原因加载地图实例失败，所以需要一直加载到实例在项目中工具文件形式引入，相当于创建了一个标签引入地图资源，挂在
-風过无痕·2023-07-25 06:17

Vue-数据监听-数组监听

说完了对象的监听和后期添加对象的操作，接下来，我们来说一说针对于数组的监听。1、首先还是定义一组数据用于展示，hobbys为字符串数组，friends为对象数组constvm=newVue({el:'#root',data(){return{hobbys:['抽烟','喝酒','烫头'],firends:[{name:'al',age:20},{name:'hj',age:22}]}},})2、展
白桃味稠鱼烧·2023-07-25 00:18

[Vue.js] 为已有对象添加新的响应式属性

Vue-我的学习姓名：{{userProfile.name}}姓名：{{userProfile.age}}姓名：{{userProfile.favoriteColor}}varvm=newVue({el
大写K·2023-07-24 21:46

Vue-模块化

目录1、为什么要有模块化？2、ES6中的模块化2.1export、import3、webpack3.1认识webpack3.2webpack安装3.3webpack的起步3.3.1使用webpack管理项目的基本流程。3.3.2webpack.config.js文件和package.json文件的使用4、webpack中loader的使用4.1css-loader和style-loader的使用4
拉一次撑死狗·2023-07-24 16:53

Vue-如何使用axios实现同步请求嵌套方法

Vue-如何使用axios实现同步请求嵌套方法axios.get('/userAll').then(asyncresponse{console.log(response);//要同步这个方法awaitaxios.get
少年你好，我是π。。。·2023-07-23 18:51

（五）Vue-响应式原理

响应式响应式处理的入口src\core\instance\init.jsinitState(vm)vm状态的初始化初始化了_data、_props、methods等src\core\instance\state.js//数据的初始化if(opts.data){initData(vm)}else{observe(vm._data={},true/*asRootData*/)}initData(vm)
JerrySi·2023-07-22 01:39

VUE- quill-editor 编辑器使用及自定义toobar详解

vue使用编辑器，这里讲解编辑器quil-editor官网：https://quilljs.com/docs/modules/toolbar1：安装[email protected]：创建一个页面，再template里写入在script中引入依赖及quill的toobar的各种按钮的简单配置//主库import_Quillfrom"quill";//核心库，不包含
海的天空1661·2023-07-21 21:16

VUE- 选取本地图片，自定义裁切图片比例 vue-cropper

裁切图片，按照比例裁切，分步骤1：el-upload选择本地图片（分选择本地和上传两步骤）2：在on-change回调方法中拿到el-upload选中的图片，显示在vueCropper上（）。2.1：在vueCropper显示前，用el-dialog弹框显示。3：提交：拿到vueCropper的回调方法realTime中的裁切好的图片，转化为base64，再转为file文件提交上传给服务器。看代码
海的天空1661·2023-07-21 21:46

vue-cli项目下引入vant组件

vant地址：https://youzan.github.io/vant/#/zh-CN/intro本章目标1.在vue-
一只流浪的小码农·2023-07-21 18:08

Vue-项目

一.环境搭建1.安装node去官网下载node安装包傻瓜式安装万一安装后终端没有node环境,要进行node环境变量的配置(C:\ProgramFiles\nodejs)可以通过node提供的npm包管理器安装vue脚手架通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npminstall-gcnpm--registry=https://registry.npm.taobao.o
徐弱西·2023-07-21 09:56

【VUE-编辑回显】

编辑编辑保存取消editForm:{str2:"",str3:"",str4:"",str5:"",str7:"",str15:"",str16:"",str17:"",str21:"",str23:"",str24:"",str25:"",str26:"",str27:"",str28:"",str29:"",str30:[],},//注意：一定要初始化里面的字段，不然当数据里面的字段是null
聚宝盆_·2023-07-20 18:49

【vue-清除默认样式-完结】

vue-清除默认样式1.在public文件夹创建reset.css/*@import".
聚宝盆_·2023-07-20 18:19

vue-使用JSEncrypt对密码本地存储时加解密

前言在实际开发中需要对一些敏感信息进行加解密（本地存储时），不如密码，身份证号，公司社会码其实像这种普遍经常用的功能，一般都是有第三方包拿来直接用的比如jsencrypt-提供好方法我们可以根据提供的网址跟换密钥对下面我们就已开源项目若依前后端分离项目进行演示代码实现1下包npminstalljsencrypt2.在工具文件下建包utils/jsencrypt.js-内容如下importJSEnc
-風过无痕·2023-07-20 14:32

vscode报错 vue : 无法加载文件...，因为在此系统上禁止运行脚本。

问题：终端输入vue-显示版本号，vscode终端输入报错解决办法：（1）以管理员身份运行VSCode（2）执行命令：get-ExecutionPolicy（取得shell的当前执行策略）显示Restricted
老衲爱编程·2023-07-20 04:38

由修改路由懒加载引起的

layout:posttitle:由修改路由懒加载引起的tags:-Vue-笔记项目背景项目环境：vuecli2vue2.xbabel6webpack3项目是很早之前搭建的了，页面和体积越来越多，影响页面加载速度
Dannn_Y·2023-07-19 19:54

vue-前端实现省市三级联动选择（elementUI的级联选择器el-cascader）

参考链接：emementUI官方介绍element-china-area-data参考链接安装npminstallelement-china-area-data-S使用regionData是省市区三级联动数据（不带“全部”选项）CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText[‘110000’]输出北京市import{regionData,CodeToTex
卷毛崽·2023-07-19 15:21

vue-选项 / 数据

data类型：Object|Function限制：组件的定义只接受function。详细：Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对)：浏览器API创建的原生对象，原型上的属性会被忽略。大概来说，data应该只能是数据-不推荐观察拥有状态行为的对象。一旦观察过
JK丶帝·2023-07-19 07:03

【vue-进阶】之深入理解Vuex

为什么需要Vuex通常Vue项目中的数据通信，我们通过以下三种方式就可以解决，但是随着项目多层嵌套的组件增加，兄弟组件间的状态传递非常繁琐，导致不断的通过事件来变更状态，同步状态多份拷贝，最后代码难以维护。于是尤大大开发了Vuex来解决这个问题。父传子props；子传父$emit；eventBus事件总线。当然中小Vue项目可以不使用Vuex，当出现下面这两种情况的时候我们就应该考虑使用Vuex统
尤小小·2023-07-19 02:25

Vue-组件基础（下）

一、目标能够知道如何对props进行验证能够知道如何使用计算属性能够知道如何为组件自定义事件能够知道如何在组件上使用v-model二、目录props验证计算属性自定义事件组件上的v-model任务列表案例props验证1.什么是props验证指的是：在封装组件时对外界传递过来的props数据进行合法性的校验，从而防止数据不合法的问题。使用数组类型的props节点的缺点：无法每个prop指定具体的数
一支咸鱼·2023-07-18 10:50

VUE-服务端渲染SSR和静态站点生成SSG

一、服务端渲染SSR1.定义：Vue支持将组件在服务端直接渲染成HTML字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的HTML“激活”为能够交互的客户端应用。2.优点：更快的首屏加载：服务端渲染的HTML无需等到所有的JavaScript都下载并执行完成之后才显示，所以用户将会更快地看到完整渲染的页面。除此之外，数据获取过程在首次访问时在服务端完成，相比于从客户端获取，可能有更快的数据
weixin_43962020·2023-07-18 06:45

vue-使用ElementPlus搭建系统

详尽的搭建过程可以参考使用ElementPlus页面布局搭建本章只提取重要且常用部分Container布局容器Layout布局Dropdown下拉菜单Menu菜单-》动态菜单显示-》动态router实现菜单折叠效果
不会叫的狼·2023-07-18 01:59

Vue-封装组件的案例

1.案例效果封装要求：①允许用户自定义title标题②允许用户自定义bgcolor背景色③允许用户自定义color文本颜色④MyHeader组件需要在页面顶部进行fixed固定定位，且z-index等于999使用示例如下：App根组件importMyHeaderfrom'./02MyHeader/MyHeader.vue'exportdefault{name:'MyApp',components:
一支咸鱼·2023-07-17 06:44

Vue-组件基础（上）

一、目标能够说出什么是单页面应用程序和组件化开发能够说出.vue单文件组件的组成部分能够知道如何注册vue的组件能够知道如何声明组件的props属性能够知道如何在组件中进行样式绑定二、目录单页面应用程序vite的基本使用组件化开发思想vue组件的构成组件的基本使用封装组件的案例单页面应用程序1.什么是单页面应用程序单页面应用程序（英文名：SinglePageApplication）简称SPA，顾名
一支咸鱼·2023-07-17 06:41

Vue-品牌列表案例

1.案例效果2.用到的知识点bootstrap4.x相关的知识点：卡片（Card）、表单相关(Forms)、按钮(Buttons)、表格(Tables)vue指令与过滤器相关的知识点：插值表达式、属性绑定、事件绑定、双向数据绑定、修饰符、条件渲染、列表渲染、全局过滤器3.整体实现步骤①创建基本的vue实例②基于Vue渲染表格数据③实现添加品牌的功能④实现删除品牌的功能⑤实现修改品牌状态的功能3.1
一支咸鱼·2023-07-15 08:38

2018-09-17 Vue-过滤器

1.过滤器：让要显示在页面上的内容进行重新筛选2.过滤器分为：全局过滤器：{{5|zore}}Vue.filter("zore",function(data){if(data局部过滤器：{{5|zore}}newVue({el:"#itany",filters:{zore:function(data){if(data练习：1.保留两位小数{{129.3626554|number}}Vue.filt
Alive_92dc·2023-07-15 03:10

Vue-数据驱动的渐进式前端框架

第五天、VueJs一、VueJs的概述1.1、什么是VueJs？VueJs是【数据驱动】的【渐进式】前端框架。渐进式：1、可以只使用部分功能，而不用全部实现2、与第三方很好的兼容1.2、VueJs的模型:MVVM模型Mmodel模型（数据）Vview视图(页面)VMcontroller控制(控制数据到页面的流程)本质上就是【MVC】，分离数据与视图二、VueJs的入门2.0、引入vuejs对象引入
Eleganise°·2023-07-14 22:48

vue-实例属性

vm.$data类型：Object详细：Vue实例观察的数据对象。Vue实例代理了对其data对象属性的访问。参考：选项/数据-datavm.$props2.2.0新增类型：Object详细：当前组件接收到的props对象。Vue实例代理了对其props对象属性的访问。vm.$el类型：Element只读详细：Vue实例使用的根DOM元素。vm.$options类型：Object只读详细：用于当前
JK丶帝·2023-06-24 02:28

Vue-消息订阅与发布(pub/sub)

消息订阅与发布(pub/sub)消息订阅与发布和全局事件总线一样，也是一种组件间通信的方式pub/sub全称为publisher(订阅)/subscriber(发布),一般需要数据的人订阅消息，提供数据的人发布消息这个技术非常简单容易上手，主要有以下两步1订阅消息：消息名2发布消息：消息内容想要实现这个功能，原生js不太行，需要借助第三方库，这里推荐pubsub-js,使用了这个库之后就可以在任意
小花皮猪·2023-06-23 13:06

【无标题】安装依赖报错：Refusing to install package with name “***“ under a package

报错信息：Refusingtoinstallpackagewithname“vue-”underapackagenpmERR!
雷加祥·2023-06-23 10:58

Vue-组件自定义事件(绑定和解绑)

组件自定义事件(绑定)像click,change这些都是js的内置事件，我们可以直接使用，本次我们学习自己根据需求打造全新的事件，但是js内置的是给html元素用的,本次的自定义事件是给组件用的注意：组件上也可以绑定原生DOM事件，需要使用native修饰符，销毁组件实例也会销毁组件对应的自定义事件下面通过案例说明1编写案例如图，我有三个组件，分别是学生，学校和app，由app管理其他两个组件，这
小花皮猪·2023-06-23 08:33

Vue-几种插槽(slot)的使用

插槽(slot)插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明1基本案例首先编写一个基本的案例，三个组件展示不同的数据类型页面进行展示现在要改需求，美食的列表只展示一个海报图片，电影则展示一段宣传视频，游戏则不变如果要按照美食的需求去改统一加上照片那么三个列表都有了这个
小花皮猪·2023-06-23 08:02

Vue-动画效果

vue动画效果vue中动画效果是很简单的一个东西，vue帮助我们做了一些动画封装，同时也支持自定义动画，过度，第三方库，这些方式都可以实现，我们一一举例说明注意：下面的相关截图，由于不是gif动图，所以展示的并不全面。1编写案例首先编写基本组件代码，首先是普通组件，写点基本元素和样式然后是app组件，引入并展示组件查看基本效果，可以通过点击按钮展示或者隐藏h1元素但是这种切换，是没有动画效果的，所
小花皮猪·2023-06-23 08:32

Vue-全局事件总线 GlobalEventBus

组件间通信的方式：适用于任意组件间通信使用步骤：1、安装全局事件总线newVue({...beforeCreate(){//用一个vue实例来充当事件总线对象,将EventBus对象挂载到Vue原型上，让所有的组件都可以访问Vue.prototype.$bus=this;//$bus就是当前应用的vm},...})2、使用事件总线：（A组件给B组件传递数据）B组件接收数据，则在B组件中给$bus绑
张美丽呀·2023-06-23 08:31

Vue-全局事件总线(GlobalEventBus)

全局事件总线(GlobalEventBus)全局事件总线是vue中特别厉害的一种组件中通信的方式，它可以实现任意组件中通信，随便拿出来两个组件就能互通数据，就像对讲机一样，它在开发中用的也是特别的多1编写案例首先准备两个组件，它们之间是兄弟关系，被App统一管理简单的页面如下2安装全局事件总线在main.js中定义$bus(总线)，因为main.js是整个程序的入口，然后在vm中使用钩子函数bef
小花皮猪·2023-06-23 08:59

vue-路由

路由用Vue.js+VueRouter创建单页应用，是非常简单的。使用Vue.js，我们已经可以通过组合组件来组成应用程序，当你要把VueRouter添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉VueRouter在哪里渲染它们起步.router-link-exact-active{color:red;}职位搜索constposition={templ
王蕾_fd49·2023-06-21 14:10

Vue- 29 代码框架

本节：两种vue的代码框架Documentvarapp=newVue({el:'#app',data:{message:'HelloVue!',},created:function(){},//页面最开始运行的程序methods:{}});3333exportdefault{data(){return{};},created(){},methods:{},};
V_zcm·2023-06-19 23:04

vue-类型转换

js1、int->stringvara=1;varb=a.toString();2、string->intvara='1';varb=parseInt(a);/**方法二*/vars='32';vari=newNumber(s);ui1、int->string
@幻影忍者·2023-06-17 09:53

vue-手撸五子棋

重置exportdefault{data(){return{wh:999,//宽高interval:0,//间隔init_X_Y:10,//初始点r:12,//半径points:[],//所有点位exist_point:[],//存在点位（弃用）operate:"user",//用户或者电脑computerdirection:[//方位"up","down","left","right","lef
无情编码工具人·2023-06-17 04:22

Vue- mixin(混入)

mixin(混入)mixin：翻译过来叫混入，也有人叫混合，官方叫混入作用：两个组件共享一个配置(配置必须是一样的)，本质就是复用配置通过案例理解学习如何使用以及作用1编写案例提出需求，新增一个组件，当点击学生姓名的时候，弹窗展示学生的姓名，当点击学校姓名的时候，弹窗展示学校的姓名虽然实现了效果，但是不够好这些代码都是一样的，如果能进行封装下复用就更好了，这时候就可以借助mixin进行混入了2创建
小花皮猪·2023-06-17 03:52

Vue-插件(plugin)

插件(plugin)插件是vue中特别强大并且特别简单的一个东西，它可以帮助我们增强vue插件本质来说就是一个对象，但是这个对象必须包含install(安装)方法，由vue帮助我们调用只要插件写的足够的好，就可以帮助我们实现很多的功能，提高开发效率，而我们只需要简单的引入并且use下即可使用插件里面的全部的功能只要是插件，都需要使用Vue.use()进行使用1定义插件新建一个plugin.js文件
小花皮猪·2023-06-17 03:52
上一页 3 4 5 6 7 8 9 10 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他