分类：VUE

2021
05-23

vue父子组件的互相传值和调用

1、父传值给子组件父组件：<template><div><pclass="father">父组件</p><child:sid="id"></child></div></template><script>importchildfrom'./child'exportdefault{components:{child},data(){return{id:'1234'//父组件向子组件传的值}}}</script>子组件：<template><div><pclass="child">子组件</p><pclass="child">接收父组件的值是：{{sid}}</p></div></te... 继续阅读 >
2021
05-20

Vue实现下拉滚动加载数据的示例

Web项目经常会用到下拉滚动加载数据的功能，今天就来种草Vue-infinite-loading这个插件，讲解一下使用方法！第一步：安装npminstallvue-infinite-loading--save第二步：引用importInfiniteLoadingfrom'vue-infinite-loading';exportdefault{components:{InfiniteLoading}}第三步：使用1.基本用法<template><div><pv-for="iteminlist"><spanv-text="item"></span></p>... 继续阅读 >
2021
05-20

Vue实现下拉滚动加载数据的示例

Web项目经常会用到下拉滚动加载数据的功能，今天就来种草Vue-infinite-loading这个插件，讲解一下使用方法！第一步：安装npminstallvue-infinite-loading--save第二步：引用importInfiniteLoadingfrom'vue-infinite-loading';exportdefault{components:{InfiniteLoading}}第三步：使用1.基本用法<template><div><pv-for="iteminlist"><spanv-text="item"></span></p>... 继续阅读 >
2021
05-20

vue实现商品详情页功能之商品选项卡

vue实现商品详情页功能之商品选项卡 本文实例为大家分享了vue实现商品详情页功能之商品选项卡的具体代码，供大家参考，具体内容如下用户点击商品进入商品详情页，默认显示第一个小图对应的大图，然后鼠标滑到小图上，大图也会发生改变，实现效果如下：实现代码：shopitem.vue的template（HTML）,上面是大图，下面是小图，鼠标滑动到小图上，触发getUrl事件（参数是小图的show属性，索引）：item.json文件（我的数据文件，默认第一个小图的show为true，默认大图显示第... 继续阅读 >
2021
05-20

vue后台管理添加多语言功能的实现示例

在这家公司一个项目，需要添加英文版本，就是中英文化了，直接上代码1.首先是main.js页面做配置importVueI18nfrom'vue-i18n'Vue.use(VueI18n)//通过插件的形式挂载consti18n=newVueI18n({//locale:'zh-CN',//语言标识locale:'Chinese',//语言标识//this.$i18n.locale//通过切换locale的值来实现语言切换messages:{'Chinese':require('./common/lang/zh'),//中文语言包'... 继续阅读 >
2021
05-20

如何在vue项目中使用百度地图API

1、在百度地图开放平台注册账号并登录网址：http://lbsyun.baidu.com/index.php?title=jspopularGL2、选择自己所需的地图版本：我个人使用2.0足够了，其实就是懒，一直用的2.0没看3.0。但是3.0应该也差不多的使用。3、在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈)<scripttype="text/javascript"src="/uploads/202105/20/16214761171.0&ak=你的ak"></script>4、之... 继续阅读 >
2021
05-20

如何使用vue自定义指令构建拖放插件

我们都知道html5的拖放特性，利用它可以很方便的实现拖拽和放置功能，比如一些选择类操作的使用场景，让用户去拖拽比鼠标点击更容易接受和理解。今天我们就利用这一特性，结合vue的自定义指令，来实现一个简单但是实用的拖放插件。为什么叫它插件？因为我们的目标不是开发一个vue组件，而是两个vue的自定义指令，并且最终会把这两个自定义指令封装到一个es6的class里，在实际项目中引入就可以很方便的使用了。大部分的拖放使用场景... 继续阅读 >
2021
05-19

vue 虚拟DOM快速入门

虚拟DOM什么是虚拟domdom是文档对象模型，以节点树的形式来表现文档。虚拟dom不是真正意义上的dom。而是一个javascript对象。正常的dom节点在html中是这样表示：<divclass='testId'><p>你好</p><p>欢迎光临</p></div>而在虚拟dom中大概是这样：{tag:'div',attributes:{class:['testId']},children:[//p元素//p元素]}我们可以将虚拟dom拆分成两部分进... 继续阅读 >
2021
05-15

浅谈vue首次渲染全过程

浅谈vue首次渲染全过程 昨天有朋友问我vue在页面第一次加载时到底做了些什么，看来这个问题在很多朋友心中可能还比较模糊，今天我们一起来详细的看看vue的首次渲染过程了解vue首次渲染全过程，我们应该从哪说起呢，很明显，是不是应该从入口文件说起啊，即main.js1、vue初始化首先，我们看main.js中，第一个最关键的肯定是引入vue吧importvuefrom'vue'其实，vue被打包后，dist文件夹中存在多个版本，分别是通用版本（UMD）：中的完整版vue.js和运行... 继续阅读 >
2021
05-15

Vue封装一个TodoList的案例与浏览器本地缓存的应用实现

Vue封装一个TodoList的案例与浏览器本地缓存的应用实现 本文主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现，分享给大家，具体如下：使用Vue封装一个简易的Todolist的小案例.同时加入了浏览器本地缓存的技术手段.浏览器本地缓冲:前提：一般我们定义的变量，或者用Vuex保存的数据，当浏览器进行了一个刷新那么这个数据就会丢失,这样就做不出历史记录的效果了，但是，使用浏览器缓存就可以帮助我们解决这个问题…浏览器缓存分为二种sessionStorage和lo... 继续阅读 >
2021
05-15

Vue.js之VNode的使用

什么是VNode在vue.js中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的DOM元素。例如，DOM元素有元素节点，文本节点，注释节点等，vnode实例也会对应着有元素节点和文本节点和注释节点。VNode类代码如下：exportdefaultclassVNode{constructor(tag,data,children,text,elm,context,componentOptions,asyncFactory){this.tag=tagthis.data=da... 继续阅读 >
2021
05-09

VUE+Express+MongoDB前后端分离实现一个便签墙

VUE+Express+MongoDB前后端分离实现一个便签墙 计划来实现一个便签墙系列，这个东西做简单也简单，往复杂了做功能也很多，记录一下从零到有的开发过程吧，希望最后能把这个项目做得很完善。首先是前后端分离架构，前端用vue，后台我们就用express，数据库用mongodb吧。在脑袋里过一下，最最开始，要完成一个怎样的雏形呢？先把用户登录管理放在一边，当然是便签的增删改查+显示啊！那么，我们就来实现“初号机”，一张张便签的显示，增加，修改，删除。1、怎么说也得先把样式画... 继续阅读 >
2021
05-09

Vue中slot-scope的深入理解（适合初学者）

百度上已经有很多的关于slot-scope的文章，但我感觉都是那些以前没学好，又回头学的人，他们都使用了.Vue文件，我觉得有点不适合初学者，所以我就写一篇适合初学者的。先抛例程：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>组件之通过插槽(slot)分发内容</title><scriptsrc="你的vue地址，请下载最新版的"></script><script>Vue.component("test-slot",{//插槽允许... 继续阅读 >
2021
05-09

Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件 带下拉选项的输入框（TextboxwithDropdown）是既允许用户从下拉列表中选择输入又允许用户自由键入输入值。这算是比较常见的一种UI元素，可以为用户提供候选项节省操作时间，也可以给可能存在的少数情况提供适配的可能。本来想着这个组件比较常见应该已经有比较多现成的例子可以直接应用，但是搜索了一圈发现很多类似的组件都具备了太多的功能，例如搜索，多选等等（简单说：太复杂了！）。于是就想着还是自己动手写一个简单... 继续阅读 >
2021
05-02

vue 单元测试初探

前言单元测试（unittesting），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义，如C语言中单元指一个函数，Java里单元指一个类，图形化的软件中可以指一个窗口或一个菜单，在vue、react、angular等前端框架中，最重要的是针对组件的单元测试为什么要引进单元测试？现今时代，各种编程语言，开发框架，集成工具蓬勃发展，然而软件工程师们却仍然挣扎在第一线，... 继续阅读 >
2021
05-02

vue中多附件上传的实现示例

前言本篇主要记录在Vue项目中实现附件上传功能，可实现单/多附件上传，识别文件格式并用不同图标展示功能，及控制是否可编辑功能。内容简洁易懂，如有需要可自取。完整代码点击这里click核心代码<divclass="upload-flie-btn"><divclass="btn-tips"@click="openFileSelect"v-show="editFlag">上传附件</div><inputstyle="display:none"type="file"ref="fileInput"multiple="multiple"@change="uplo... 继续阅读 >