分类：Vue

2020
12-24

vue绑定class的三种方法

一、对象语法1、给v-bind:class设置一个对象，可以动态地切换class，例如：<divid="app"><div:class="{'active':isActive}"></div></div><script>varapp=newVue({el:'#app',data:{isActive:true}})</script>最终渲染结果：<divclass="active"></div>2、对象中也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存，例如：<divid="app"><divclass="static":class="{'active':isActive,'... 继续阅读 >
2020
12-24

全面解析Vue中的$nextTick

当在代码中更新了数据，并希望等到对应的Dom更新之后，再执行一些逻辑。这时，我们就会用到$nextTickfuncioncallback(){//等待Dom更新，然后搞点事。}$nextTick(callback)；官方文档对nextTick的解释是：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。那么，Vue是如何做的这一点的，是不是在调用修改Dom的Api之后（appendChild,textContent="xxxxx"诸如此类），调用了我们的... 继续阅读 >
2020
12-23

vue下拉刷新组件的开发及slot的使用详解

“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发：正式开篇在前端项目的components文件夹下新建pullRefreshView文件夹，在其中新建组件index.vue：（它代表“整个屏幕”，通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新）首先需要编写下拉刷新组件的template，这里用到<slot>，代码如下：<template... 继续阅读 >
2020
12-23

springboot+vue实现页面下载文件

本文实例为大家分享了springboot+vue页面下载文件的具体代码，供大家参考，具体内容如下1.前端代码：<templatev-slot:operate="{row}"><vxe-buttonstyle="color:#409eff;font-weight:bolder"class="el-icon-download"title="成果下载"circle@click="downloadFile(row)"></vxe-button></template>downloadFile(row){window.location="http://localhost:8001/file/downloadFile?taskId="+row.id;}2.后端代码... 继续阅读 >
2020
12-22

Vue3 实现双盒子定位Overlay的示例

在Vue3中，使用<Teleport>可以很优雅的把某个组件渲染到根节点之外的节点，同时使其渲染的内容不丧失响应式和对应的生命周期函数调用。那么基于此，用<Teleport>实现相对于某一元素的Overlay。实际上，这篇文章跟Vue3的关系不大，只是通过Vue3讲解一类Overlay的设计方法。原理要实现相对于某一元素的Overlay需要依靠两个元素，Origin和Panel，Origin表示相对于的元素，而Panel表示Overlay本身，实现方法... 继续阅读 >
2020
12-22

详解Vue的异步更新实现原理

最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有跳转的过程。怎么可以让页面上有从1到100显示的过程呢，就是用setTimeout或者Promise.then等方法去模拟。讲道理，如果不在vue里，单独运行这段程序的话，输出一定是从1到100，但是为什么在vue中就不一样了呢？for(leti=1;i<=100;i++){conso... 继续阅读 >
2020
12-22

Vue组件简易模拟实现购物车

Vue组件简易模拟实现购物车 本文实例为大家分享了Vue组件模拟实现购物车的具体代码，供大家参考，具体内容如下代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><scriptsrc="./lib/vue-2.4.0.js"></script><style>#app{width:600px;}#myTable{width:500px;border-collapse:collapse;}td,th{text-align:cente... 继续阅读 >
2020
12-22

vue实现购物车的小练习

vue实现购物车的小练习 今天从网上找了一个购物车的小例子，照着敲了一下，收获不少。下面的用一个小动图展示一下成果：接下来上代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><linkhref="css/shoppingcart.css"rel="stylesheet"type="text/css"/><title></title></head><body><divid="app"><h2>购物清单</h2><divclass="nav"><div><spanclass="noselected"v-bind:class="{selected:ifAllselect}"@click="allSelect(ifAlls... 继续阅读 >
2020
12-22

Vue实现小购物车功能

Vue实现小购物车功能 本文实例为大家分享了Vue实现小购物车功能的具体代码，供大家参考，具体内容如下本人还在初级学习阶段，有很多不足之处，希望能指出错误，一起进步HTML代码块<body><divid="app"><divv-if="books.length"><table><thead><tr><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><trv-for="(itme,index)inbooks"><td>{{itme.id}... 继续阅读 >
2020
12-22

vue监听滚动事件的方法

vue中监听滚动事件，然后对其进行事件处理，一般有：1.滚动到顶部吸附；2.根据滚动的位置激活对应的tab键（锚链接tab键）这两种方式的处理都是可通过监听scroll来实现mounted(){window.addEventListener('scroll',this.handleScroll)//监听滚动事件，然后用handleScroll这个方法进行相应的处理}处理方法1.滚动到顶部吸附html元素<!--如果isFixed为true的话，就添加classis_fixed设置固定定位--><divid="boxFixed":cl... 继续阅读 >
2020
12-22

vue 在单页面应用里使用二级套嵌路由

在一个单页面应用里使用二级套嵌路由目录结构如下：其中main.js为全局配置文件，App.vue为项目入口。main.js中路由配置如下importVuefrom'vue'//引入vueimportAppfrom'./App'//引入主模板importRouterfrom'vue-router'//引入router路由//引入项目的模块组件importlicaifrom'./components/licai'importhomefrom'./components/home'importwodefrom'./components/wode'importhome1from'./components/home/home... 继续阅读 >
2020
12-22

vue中如何添加百度统计代码

一、在百度统计网站中添加自己的网站1、官网地址：https://tongji.baidu.com/web/welcome/login。2、在'管理‘一栏中选择‘网站列表'，然后选择新增网站，添加成功后点击代码获取，可以获取统计代码。二、 在maim.js下百度统计代码添加var_hmt=_hmt||[];window._hmt=_hmt;//必须把_hmt挂载到window下，否则找不到(function(){varhm=document.createElement("script");hm.src="https://hm.baidu.com/hm.j... 继续阅读 >
2020
12-22

vue 导航守卫和axios拦截器有哪些区别

在Vue项目中，有两种用户登录状态判断并处理的情况，分别为：导航守卫和axios拦截器。一、什么是导航守卫？vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。（在路由跳转时触发）我们主要介绍的是可以验证用户登录状态的全局前置守卫，当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。constrouter=newVueRouter({... 继续阅读 >
2020
12-22

Vue——解决报错 Computed property "****" was assigned to but it has no setter.

在最近的项目中遇到了如下的警告信息：[Vuewarn]: Computedproperty"currentStep"wasassignedtobutithasnosetter.（意思是：计算属性currentStep被赋值了，但此它并未定义set方法。）要解决这个问题，首先要明确这个问题出现的原因。这个警告是由于Vue的计算属性内部没有set方法，即：计算属性不支持值得修改（只能针对data中的值进行计算）。data(){    return{ &nbs... 继续阅读 >
2020
12-22

Vue实现手机号、验证码登录（60s禁用倒计时）

 最近在做一个Vue项目，前端通过手机号、验证码登录，获取验证码按钮需要设置60s倒计时（点击一次后，一分钟内不得再次点击）。先看一下效果图：输入正确格式的手机号码后，“获取验证码”按钮方可点击；点击“获取验证码”后，按钮进入60s倒计时，效果图如下：效果图已经有了，接下来就上代码吧！html<el-button@click="getCode()":class="{'disabled-style':getCodeBtnDisable}":disabled="getCodeBtnDisable">{{cod... 继续阅读 >