vue
文章平均质量分 60
wl_
这个作者很懒,什么都没留下…
展开
-
响应式编程-数据劫持
响应式编程的核心思想是观察者模式,被观察的对象我们可以称之为数据源,所以,数据是响应式编程所关注的核心。原创 2024-07-13 22:38:01 · 362 阅读 · 0 评论 -
vue源码中,将一个字符串重复n次的算法解析
在浏览vue2.x的源码过程中,无意中在codeframe.js文件中看到一个repeat函数,其作用就是能够将一个字符串重复指定的次数并返回,以往看到类似的代码大多都是瞄一眼写法,然后就直接略过,然而这次我不打算轻易放过,尝试对其写法做出了逆向解释和扩展,因而有了此文。 原始代码如下: functionrepeat(str,n){ letresult='' if(n>0){ while(true){ if(n&1){ ...原创 2021-06-25 00:07:31 · 904 阅读 · 1 评论 -
node命令行工具-创建默认格式的vue单文件
地球上的一切工具和机器,不过是人肢体知觉的发展而已。——爱迪生 背景:平常在编写vue单文件时总是拷贝一个单文件,然后修改成自己想要的格式,次数做多了未免有点繁琐。于是觉得不如写个node命令行工具,自动生成默认格式的单文件。 一、准备工作 node环境 npm账号:用于将命令行工具存放在npm库 熟悉commander.js核心工具 二、实现思路 基于commander.js实现一个file-create主命令,vue子命令,最终实现通过file-create vue <MyVueNam.原创 2020-05-23 10:28:53 · 287 阅读 · 1 评论 -
webpack构建自定义vue组件库
本文描述jsplumb.js库的vue组件化过程 一、步骤 创建vue项目,vue create w-vue-jsplumb 引入jsplumb,编写组件 测试 npm发布(编写自动发布脚本) 二、错误 1.执行 vue create w-vue-jsplumb 产生的错误:MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。...原创 2020-03-17 22:19:39 · 981 阅读 · 0 评论 -
可视化布局实现方案
背景:大屏展示网页,管理端实现拖拽布局配置 一、功能点 拖拽实现布局配置 根据配置渲染出页面 二、开源工具 vue-grid-layout:基于vue的可视化拖拽布局工具,可拖动改变容器大小 muuri:功能和vue-grid-layout差不多,不支持拖动改变容器大小 三、本文采用vue-grid-layout实现,使用详情参见Github 四、实现demo效果 五、改进功能点 ...原创 2019-06-13 16:01:26 · 7947 阅读 · 3 评论 -
vue笔记-provide & inject(二)
一、用法: provide:用在祖先组件中;值为一个对象或返回一个对象的函数; inject:用在子孙组件中;值为provide对象中的key数组或一个对象,该对象的key值为本地绑定名称,值为provide对象中的key或一个对象:{from:’provide对象中的key’,default:’默认值,用于降级处理’} 二、代码: &lt;template&gt; &lt;di...原创 2018-07-31 18:38:17 · 2143 阅读 · 0 评论 -
vue组件实践-可搜索下拉框
实践加深对vue的理解和运用有效途径,本文是基于vue的可搜索下拉框定制组件实现,在此记录。在本文中没有对组件添加样式。 一、效果 二、组件代码 dropdown.vue &amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp;amp;quot;vue-dropdown&amp;amp;quot;&原创 2018-06-01 14:38:56 · 18043 阅读 · 15 评论 -
vue-设置元素初始高度指令
在web开发中,可能会接收到UI要求的页面元素的高度需要沾满满屏的需求,本文就在此需求的驱动下产生 一、自定义指令代码: class InitScreenH { /** * 构造函数 */ constructor() { this.clasName = 'InitScreenH'; } get getClass...原创 2018-06-14 16:44:55 · 6294 阅读 · 0 评论 -
vue组件实践-可搜索下拉框扩展
一、效果 二、代码 dropdown-ext.vue &amp;amp;amp;amp;lt;template&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;vue-dropdown-ext&amp;amp;amp;quot; :class=&amp;amp;amp;quot;themestyle&am原创 2018-06-05 12:28:17 · 4195 阅读 · 0 评论 -
vue组件实践-进度条
一、效果图 二、代码 progress-bar.vue <template> <div class="vue-progress-bar default-theme"> <div class="vue-progress-bar__tip"> <span class="vue-progress-bar_...原创 2018-06-03 16:56:52 · 1655 阅读 · 0 评论 -
vue笔记-inheritAttrs及$attr表示含义(一)
一、引用官方解释: inheritAttrs:默认值true,在这种情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上 $attr:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外) 二、代码释义 自定义子组件: Vue....原创 2018-05-07 17:06:59 · 11920 阅读 · 0 评论