分类：Vue

2020
10-08

详解Vue之计算属性

模板内的表达式通常用于简单的运算，当其过长或逻辑复复杂时，会变得难以维护什么是计算属性在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，比如<div>{{text.split(',').reverse().join(',')}}</div>.这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性，上例可以用计算属性进行改写：<divid="CalculationProperties"... 继续阅读 >

2020
10-08

详解Vue之计算属性

模板内的表达式通常用于简单的运算，当其过长或逻辑复复杂时，会变得难以维护什么是计算属性在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，比如<div>{{text.split(',').reverse().join(',')}}</div>.这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性，上例可以用计算属性进行改写：<divid="CalculationProperties"... 继续阅读 >

2020
10-08

深入解读VUE中的异步渲染的实现

接下来在本文里一起看看当数据变化时，从源码层面逐步分析一下触发页面的响应动作之后，如何做渲染到页面上，展示到用户层面的。同时也会了解在Vue中的异步方法NextTick的源码实现，看一看NextTick方法与浏览器的异步API有何联系。注意，本文涉及的Vue源码版本为2.6.11。什么是异步渲染？这个问题应该先要做一个前提补充，当数据在同步变化的时候，页面订阅的响应操作为什么不会与数据变化完全对应，而是在所有的数据变化操作做完... 继续阅读 >

2020
10-08

在VUE style中使用data中的变量的方法

最近项目中的公共组件，在复用的时候，针对不同的场景，需要不断变更CSS里样式的值，而且已经有了全局的公共组件样式了如果用vue传统的动态绑定class和style的方式去修改样式（文末会提到），需要额外写很多变量和模块class，那如果我的样式的值，可以从父组件，传到子组件，子组件根据传入值去渲染对应样式的值，其实就是要再style中使用data和props中的变量，这要怎么做呢？其实很简单，只需要三步，大家来看：1、HTML结构<Uploa... 继续阅读 >

2020
10-08

vue+element-ui表格封装tag标签使用插槽

我们知道有很多系统都要求表格中添加各种各样的tag，来标记一些属性。在element-ui中添加tag很简单，最重要的就是用到了vue的插槽slot这个特性。首先了解什么是插槽。插槽省去官方的复杂讲解和代码，插槽的意思简单来说，就是在子组件的某个地方留一个占位符，当父组件使用这个子组件的时候，可以自定义这个占位符所占地方呈现的样子，可能是一个标题，一个按钮，甚至一个表格，一个表单。为什么要插槽呢？我们抽离组件的原因就是... 继续阅读 >

2020
10-08

vue实现购物车结算功能

用vue做的购物车结算的功能，供大家参考，具体内容如下代码：<!--占位--><template><div><divclass="product_table"><divclass="product_info">商品信息</div><divclass="product_info">商品金额</div><divclass="product_info">商品数量</div><divclass="product_info">总金额</div><divclass="product_info">编辑</div></div><divclass="product_table"v-for="(item,index)ingetProductList":key="index"... 继续阅读 >

2020
10-08

vue-iview动态新增和删除的方法

本文实例为大家分享了vue-iview动态新增和删除的具体代码，供大家参考，具体内容如下参考链接：vueiview动态新增和删除我根据上面的博客进行了test和小修改，效果如下：源码如下：html代码<template><Formref="capsuleAttr":model="capsuleAttr":label-width="100"style="width:80%"><ul><liv-for="(item,index)incapsuleAttr.attrList"v-if="item.status":key="index"><FormItemstyle="width:80%;"label... 继续阅读 >

2020
10-08

vue iview实现动态新增和删除

本文实例为大家分享了vueiview动态新增和删除的具体代码，供大家参考，具体内容如下<Formref="capsuleAttr":model="capsuleAttr":label-width="100"style="width:80%"><ul><liv-for="(item,index)incapsuleAttr.attrList"v-if="item.status":key="index"><FormItemstyle="width:50%;"label="属性名称：":prop="'attrList.'+index+'.AttrName'":rules="{required:true,message:'属性名称不能... 继续阅读 >

2020
10-08

vue实现前端分页完整代码

本文实例为大家分享了vue实现前端分页的具体代码，供大家参考，具体内容如下首先，做出来的效果如图所示，具体的Ajax请求数据可以写在点击函数中分页效果算是比较费脑子的，里面计算有些麻烦，本文上完整代码，一起学习进步“上一页”写两个li元素，如果已经是第一页，那么就禁止鼠标点击，如果不是就curr减减，并且可以点击同理“下一页”也一样中间部分是通过indexs循环，indexs通过computed计算得出<divclass="page-ba... 继续阅读 >

2020
10-08

Vue结合路由配置递归实现菜单栏功能

前言在日常开发中，项目中的菜单栏都是已经实现好了的。如果需要添加新的菜单，只需要在路由配置中新增一条路由，就可以实现菜单的添加。相信大家和我一样，有时候会跃跃欲试自己去实现一个菜单栏。那今天我就将自己实现的菜单栏的整个思路和代码分享给大家。本篇文章重在总结和分享菜单栏的一个递归实现方式，代码的优化、菜单权限等不在本篇文章范围之内，在文中的相关部分也会做一些提示，有个别不推荐的写法希望大家不要参考哦... 继续阅读 >

2020
10-08

vue 实现在同一界面实现组件的动态添加和删除功能

 1.插入静态组件，将自己想要循环的组件显示在页面上，利用v-for进行循环操作，操作包括增删。//所有要显示的子组件，写在一个li标签，有v-for循环。  <li v-for="(item, index) in questionList" v-bind:key="index">          <el-row :gutter="20">            ... 继续阅读 >

2020
10-08

浅谈Vue 函数式组件的使用技巧

什么是函数式组件没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法，它只是一个接受一些prop的函数。简单来说是一个无状态和无实例的组件基本写法：Vue.component('my-component',{functional:true,//Props是可选的props:{//...},//为了弥补缺少的实例//提供第二个参数作为上下文render:function(createElement,context){//...}}).vue单文件组件写法<templatefunctional>...</t... 继续阅读 >

2020
10-08

vue实现公告栏文字上下滚动效果的示例代码

本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码，分享给大家，具体入如下：代码实现：在项目结构的components中新建text-scroll.vue文件<template><divclass="text-container"><transitionclass=""name="slide"mode="out-in"><pclass="text":key="text.id">{{text.val}}</p></transition></div></template><script>exportdefault{name:'TextScroll',props:{dataList:{type:Array,default()... 继续阅读 >

2020
10-08

vue proxy 的优势与使用场景实现

1.前言随着vue3.x的消息越来越多，proxy的讨论也。相对于Object.defineProperty，proxy有什么区别，有什么优势，以及可以应用在什么地方。该文章就简单的介绍下2.Object.defineProperty讲proxy之前，先回顾下Object.defineProperty。大家都知道，vue2.x以及之前的版本是使用Object.defineProperty实现数据的双向绑定的，至于是怎样绑定的呢？下面简单实现一下functionobserver(obj){if(typeofobj==='object... 继续阅读 >

2020
10-08

Vue使用Three.js加载glTF模型的方法详解

前言Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形，基于WebGL实现，对WebGL进行了进一步的封装，简化了多数复杂的接口。Three.js支持包括.obj、.gltf等类型的模型结构。glTF（GL传输格式）是Khronos的一个开放项目，它为3D资产提供了一种通用的、可扩展的格式，这种格式既高效又与现代web技术高度互操作。obj格式的模型只支持顶点、法线、纹理坐标和基本材质，而glTF... 继续阅读 >

2020
10-08

浅谈Vue 自动化部署打包上线

应用场景项目打包后发布到正式环境，需要后端配合或者前端自己上传到服务器上，操作不便且容易产生问题，比如后台不在的情况而前台没有服务器的信息，这时发布就被延；或者前端自己上传容易导致误操作，如果上传错地方没正确上传都可能导致线上直接崩掉，而这对于已发布的产品而言是致命的。因此，有必要实现自动化部署代码到线上，解放双手的同时也减轻后端兄弟的压力。项目使用1、在项目根目录下,创建deploy/products.js文件/... 继续阅读 >