Vue
文章平均质量分 96
roamingcode
学而时习之
展开
-
前端组件设计
如何设计前端组件转载 2023-04-20 17:54:31 · 303 阅读 · 0 评论 -
玩转Vue组件通信--终极版
引言简要总结于 掘金小册->Vue组件精讲作者:Aresn iView作者组件通信不管是在业务组件开发还是UI组件开发基本都是不可避免的,实际项目开发中一般会选择引入vuex,这里关于vuex不做过多介绍,不了解的可直接去 vuex官网 查看。这里主要使用vue自身的一些东西来达到组件通信的目的。provide / injectprovide / inject 是 Vue.js...转载 2019-01-08 11:38:41 · 460 阅读 · 0 评论 -
portal-vue 在Vue中的使用
引文使用过React的同学可能知道,在目前React的版本中可以找到一个叫Portals的相关API.那么这potrol是用来干什么的? 下面看一下它的使用说明Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或碎片。第二个参数(container)则是一个 DOM 元素。Rea...原创 2018-10-30 11:38:34 · 11010 阅读 · 2 评论 -
iview UI Table 使用总结
表格是展示数据的一种常用的方式,下面简要说一下在一些特定场景下对Iview 中 Table组件的使用场景一场景简述表头中的某一个列的名字需要根据Table组件外部的变量进行关联,外部变量选取不同的值,则表头中某一列显示不同的名字实现使用column中的renderHeaderAPIrenderHeader自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是...原创 2018-10-22 14:58:13 · 4671 阅读 · 0 评论 -
iview Table组件中Input数据双向绑定
使用场景Table表格组件中的每一行都有文本输入框或者日期选择框,那么该如何对其中的输入框或日期选择框进行数据绑定呢?render自定义渲染iview Table组件中提供了render自定义渲染列函数,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引.实例<Tabl...原创 2018-10-18 17:56:10 · 9417 阅读 · 0 评论 -
Vue中Props(不可变状态)
单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出...原创 2018-09-28 18:10:14 · 2056 阅读 · 0 评论 -
Vue+Typescript踩坑记录
简述近日项目技术选型为Vue+Typescript,终于也得体验一把typescript的强大,其相关依赖库版本如下,截止今日皆为最新版本号: "flyio": "^0.6.1", "iview": "^3.1.2", "vue": "^2.5.17",原创 2018-09-26 20:05:36 · 11877 阅读 · 1 评论 -
Vue axios 中提交表单数据(含上传文件)
我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? html 代码<!DOCTYPE html><html lang="en"> <head> <title></title&g...原创 2018-08-20 10:24:02 · 11942 阅读 · 0 评论 -
vue-router使用总结
首先抛出这样一个问题,vue-router是用来做什么的?这里不着急回答,也不准备在这篇文章里回答。这篇文章仅总结一些使用心得,其实总结完所有关于vue-router的内容后,整篇文章也许就刚好能回答这个问题了。一 使用步骤单纯使用Vue.js,我们可以通过组合组件来组成应用,不同的页面有不同的地址,路由依靠链接跳转。这显然不是单页应用,因为会有页面刷新。当要把vue-rout...转载 2018-08-20 10:17:59 · 197 阅读 · 0 评论 -
Vue中keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化’,此时 便可以派上用场了。 可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中。在下一次显示时,也不会重现渲染。PS: 与 相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-...转载 2018-08-19 18:09:12 · 14008 阅读 · 0 评论 -
Vue2中使用图表
一.使用echarts使用 cnpm 安装 Echarts javascript 代码cnpm install echarts -S和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 javascript 代码import echarts from 'echarts'也可以...原创 2018-08-19 18:09:48 · 1699 阅读 · 0 评论 -
iView 循环表单验证Demo
如果项目使用的是vue+iview组合,那么对于表单验证便无需借助第三方插件,iview自己带有封装好的表单验证,iview表单验证依赖于 async-validator,这个库可以好好看一下,可扩展性比较强. javascript 代码<template> <div style="width: 700px; margin: 0 auto;"> ...原创 2018-08-17 10:40:50 · 5160 阅读 · 4 评论 -
Vuex常用模块化使用方案
Vue中进行数据的统一状态管理,无疑Vuex是最好的选择。那么我又不想把所有的state全扔到一个文件里面进行管理,而是要进行友好的拆分,模块化管理。 Vuex的官网上当然介绍了module(模块化分割)的使用,下面简要概述项目中使用vuex的常见模块管理。目录结构:--store --moduleA --types.js ...原创 2018-08-17 10:36:20 · 1604 阅读 · 0 评论 -
vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在vue中引用jQuery的话,只得另寻他法. 目前也有一些基于vue表单验证的插件,一开始试用了几款效果不太理想,最后找到了一个比较的适合的 [color=#ff0000]vuerify[/colo...原创 2018-08-19 18:17:47 · 5245 阅读 · 0 评论 -
前端三大主流框架中文文档
AngularAngular 官方同步中文文档: https://angular.cn/docsRxjs官方文档翻译: https://buctwbzs.gitbooks.io/rxjs/content/rookie-primer.htmlTypescript 中文网: https://www.tslang.cn/docs/home.htmlAnt Design of Angula...原创 2018-08-19 18:16:29 · 2108 阅读 · 0 评论 -
hotcss-移动端布局终极解决方案
介绍 官网hotcss不是一个库,也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。无序列表使用动态的HTML根字体大小和动态的viewport scale。遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下,让你的页面看起来是一样的。不仅便捷了你的布局,同时它使用起来异常简单。可能你会说 talk is cheap,show me t...转载 2018-08-16 10:47:10 · 2026 阅读 · 0 评论