分类：Vue

2021
07-04

vue element实现表格增加删除修改数据

vue element实现表格增加删除修改数据 本文实例为大家分享了vueelement实现表格增加删除修改数据的具体代码，供大家参考，具体内容如下这里用到是设置一个弹出框来实现此功能，还有一种方法是直接在原来的基础上面进行修改效果如下：表格的table：<el-table:data="tableData"style="width:100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-tabl... 继续阅读 >
2021
07-04

Vue中Class和Style实现v-bind绑定的几种用法

Vue中Class和Style实现v-bind绑定的几种用法 项目开发中给元素添加/删除class是非常常见的行为之一，例如网站导航都会给选中项添加一个active类用来区别选与未选中的样式，除了导航之外其他很多地方也都会用到这种方式处理选中与未选中。除了设置class我们在项目中也经常设置元素的内联样式style，在jquery时代我们大多数都是利用addClass与removeClass结合使用来处理class的添加/删除，利用css()方法设置/获取元素的内联样式。那么在vue中我们如何处理... 继续阅读 >
2021
07-04

详解React Angular Vue三大前端技术

目录一、【React】基本用法显著特点类组件虚拟DOM生命周期方法JSXJavaScript表达式超越HTML的架构ReactHooksHooks规则常用术语Flux架构的使用历史常用命令二、【Angular】Angular和AngularJS的区别历史组件化数据管理常用命令三、【Vue】概述历史组件化模板反应式系统变换效果路由生态系统官方工具官方程序库常用命令四、【小结】一、【React】React（也被称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Fac... 继续阅读 >
2021
07-02

vue中keep-alive组件的用法示例

问题描述（什么是keep-alive）keep-alive顾名思义，保持活跃。保持谁活跃呢？首先我们知道，因为vue就是组件化编程，一个.vue文件就是一个组件。就像万事万物一样，都有从出生到消亡的生命周期过程，vue的组件也是一样，也有自己的生命周期，比如create创建组件、mounted往组件上挂数据、update更新组件上挂的数据，destroy把组件实例销毁。所以使用keep-alive就是保持组件活跃，不会被destroy销毁掉，就一直还活着，... 继续阅读 >
2021
07-01

详解vue中v-for的key唯一性

目录1.DOMDiff2.为同一层的相同类型的元素添加key属性3.key不能是index下标值1.DOMDiff要想真正了解key属性的存在意义，还真得从DOMDiff说起，并不需要深入了解DOMDiff的原理，而是仅仅需要知道DOMDiff的工作过程即可。Vue和React都采用了运用虚拟DOM的方式减少浏览器不必要的渲染。由于Vue和React采用的都是v=render(m)的方式渲染视图的，当model数据发生变化时，视图更新的方式就是重新... 继续阅读 >
2021
07-01

解读Vue组件注册方式

目录概述1、全局注册2、局部注册3、模块系统中局部注册概述组件化的概念让前端页面开发有了更清晰的结构。Vue中的组件就是一个Vue的实例对象。因此，Vue组件的构造选项和newVue()方法构造Vue实例的构造选项是一样的，其可接收的构造选项都是一样的。除了el这样根实例特有的选项。但是，Vue组件必须得是可以复用的，因此，就必须要求构造选项中的data选项必须是一个函数，该函数返回一个对象。为什么data选项... 继续阅读 >
2021
07-01

如何理解Vue简单状态管理之store模式

目录概述1.定义store.js2.组件使用store.js3.实现效果概述store状态管理模式的实现思想很简单，就是定义一个store对象，对象里有state属性存储共享数据，对象里还存储操作这些共享数据的方法。在组件中将store.state共享数据作为data的一部分或全部，在对store.state对象里的共享数据进行改变时，必须调用store提供的接口进行共享数据的更改。以下以一个简单todo-listdemo来介绍store状态管理模式1.定义s... 继续阅读 >
2021
07-01

Vue如何实现组件间通信

目录1.父子间通信1.1父组件-->儿子组件1.2儿子组件-->父组件2.爷孙间通信3.任意组件间通信3.1EventBus3.2Vuex1.父子间通信最常见的就是父子之间的通信，通信是双向的数据传递。1.1父组件-->儿子组件父组件向儿子组件传递数据的方式就是通过Prop向子组件传递数据。//child.vue<template><div>我是儿子，我收到来自父亲的数据为{{value}}</div></template><script>exportdefault{props:{... 继续阅读 >
2021
07-01

详解Vue进阶构造属性

目录1、Directive自定义指令2、Mixin混入3、Extends继承4、provide和inject1、Directive自定义指令在Vue框架下的代码中，很少用到原生DOM操作，那是因为在Vue中将原生DOM操作都封装成了指令，例如我们前面见到的<divv-text="xxx"></div>指令，其实其内部操作就是：div.innerText=xxx;//当然这里的div是获取得来的DOM元素Vue将原生DOM操作封装成指令，那个元素想使用该指令，直接在HTML模板中的元素标... 继续阅读 >
2021
07-01

详解Vue的sync修饰符

目录1、指令2、修饰符3、.sync修饰符4、总结1、指令指令即Directive，从字面意思理解就是我告诉你要做什么，就是发送了一个指令，然后由接收指令的人去做就好了。在Vue中的指令有个统一好认的格式，就是以v-开头的就是指令，如：<divv-text="x"></div>//v-text指定标签文本指令<divv-on:click="add"><div>//v-on事件绑定指令但并不是所有的指令都以v-开头，对于一些简写，也是指令，如<img:src="x"></img>//... 继续阅读 >
2021
07-01

深入理解Vue的数据响应式

目录1.ES语法的getter和setter2.ES语法的defineProperty3.Vue对数据的代理和监听4.Vue的数据响应式1.ES语法的getter和setter在开始了解Vue的数据响应式原理前应该先搞清楚ES语法中的getter和setter方法的具体用法。getter和setter方法是以get和set关键字来为对象添加虚拟属性的一种方式。这种属性其实并不真实存在，而是以取值函数getter和存值函数setter来模拟的一种属性。目的是对某个属性设置存值函数和... 继续阅读 >
2021
07-01

详解Vue的options

目录1.options是什么2.包含哪些属性3.入门属性eldatamethodscomponentsprops生命周期钩子1.options是什么无论是jQuery.js还是Vue.js，都是在js的基础上再次封装的库，都需要创建对应的实例来封装对应的操作。如通过$('div')获得一个jQuery的div元素实例，也称为jQuery对象，jQuery对象包含了对选中的div元素的各种操作API，因此jQuery实例封装的是对选中元素的各种操作。而Vue.js在此基础上更近一步，封... 继续阅读 >
2021
07-01

vue实现无缝轮播效果（跑马灯）

本文实例为大家分享了vue实现无缝轮播效果的具体代码，供大家参考，具体内容如下1.首先创建两个vue组件Sweiper.vue和SweiperItem.vue;2.将两个组件引入页面，Sweiper.vue中用v-model传参（v-model其实是语法糖，默认属性value和默认事件input）；代码中我是通过v-model的selcted将值传给Sweiper（子组件），自动轮播时子组件再通过触发input事件将即将显示的值传回给父组件3.核心是要让selected的值传到SweiperItem中，与SweiperI... 继续阅读 >
2021
07-01

vue实现放大缩小拖拽功能

vue实现放大缩小拖拽功能 本文实例为大家分享了vue实现放大缩小拖拽功能的具体代码，供大家参考，具体内容如下点击放大至全屏再次点击缩小至原始 这个弹框是基于elementdialog的基础上写的1.再utils文件夹下面新建一个directives.js (封装好了直接拿去用）importVuefrom'vue';importbigPicfrom'../assets/images/bigChange.png';//v-dialogDrag:弹窗拖拽属性Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){... 继续阅读 >