随笔分类 - vue系列
摘要:最近在看这本书,以下是做的笔记 第1章 命令式编程与声明式编程 关注结果(声明式)和关注过程(命令式) 运行时和编译时(vue、react、svelte) 坐火车时,进站检票(编译时)和上车检票(运行时) 框架性能与可维护性 第2章 框架设计的考虑因素 上手体验:足够的提示和引导 代码体积与tree
阅读全文
摘要:原文地址:How Reactivity works in Vue.js 在前端开发人员的世界中,“响应式”是每个人都使用的东西,但很少有人能理解。 确实,这不是谁的错,因为每个人在编程中对响应式的定义不同。 因此,在开始之前,我只给您一个有关前端框架的定义。 “ JavaScript框架之间的响应式
阅读全文
摘要:原文地址:Vite⚡ - Vue no-bundler dev setup 众所周知,Evan You(Vue.js创建者)某天晚上都毫无睡意,因此创建了Vite。 Vite允许你使用单页组件开发Vue应用,而不需要任何的打包步骤。浏览被要求使用Imports就像使用原生ES那样导入模块。dev s
阅读全文
摘要:原文地址:What do we need to know about Vue.js? 不同于其他广泛使用的JavaScript框架,vue.js既简单又轻量。然而它附带的许多功能特性使得用户能够快速构建现代化的交互式web界面。它进一步使开发者能够使用简单的HTML,CSS和Javascript构建
阅读全文
摘要:源码链接:树形菜单组件 <template> <div> <div v-for="item in menus" :key="item.id" :index="item.menuUrl"> <!-- 有子菜单 --> <el-submenu :index="item.menuUrl" v-if="it
阅读全文
摘要:源码:编辑表单组件 组件源码(待优化)editForm.vue: <!-- 搜索表单 --> <template> <el-form ref='editForm' :size="size" inline :label-width="labelWidth" :model="editData" :rul
阅读全文
摘要:源码链接:弹窗组件 组件源码: <template> <transition name="el-fade-in"> <div v-if="modalCfg.visible" style="width:100%;height:100%;position:fixed;top:0px;left:0px;z
阅读全文
摘要:源码链接:查询表单组件 组件源码:searchForm.vue <!-- 搜索表单 --> <template> <div class="ces-search"> <el-form :size="size" inline :label-width="labelWidth"> <el-form-ite
阅读全文
摘要:element-ui表格封装的非常好,由于最近工作负责基础组件封装,封装更适合公司业务的复用组件,从表格开始: 源码链接:表格组件 组件源码:Table.vue <!--表格组件 --> <template> <section class="ces-table-page"> <!-- 表格操作按钮
阅读全文
摘要:最近在项目上遇到了图片拖动的需求,自己做了好久效果都不怎么好,最后参考了 vue自定义指令实现div拖动,找到了思路,解决了困惑。不过项目业务上的问题是复杂的,不仅仅能拖动那么简单,我在工作上遇到的需求如下几点: 1.实现一个电子地图,包括底图和图标,底图能拖动,图标也能拖,图标拖动时底图不动 2.
阅读全文
摘要:对前面树添加一个简单操作,点击可伸缩,对前面的代码改动了下 测试效果分别为(点击前面的+,即可伸展) vue核心组件代码: <template> <div > <div v-for="node in treeData"> <span v-if="node.children" @click="hand
阅读全文
摘要:写代码要思路清晰,一步一步来,首先从最简单的来,慢慢加入新东西,逐渐优化。本文只是简单渲染出一颗树,通过传树形结构数组。 vue通过组件递归将数据渲染出一颗树,react则通过函数递归, 数据结构: 渲染结果: 代码也简单 Vue(至少要两个组件才能看到效果) tree组件(被调用): home(调
阅读全文