Vue
文章平均质量分 90
wendZzz
若有需要请联系微信号:coolbigflower
微信公众号:前端一起学
展开
-
Vue2源码 - 响应式原理实现
手写vue源码系列 - 响应式原理安装一下webpack以及相关依赖,npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin安装过程中,新建一个webpack.config.js文件,const path = require("path");const HtmlWebpackPlugin = require("html-webpack-pl原创 2022-03-24 16:11:40 · 1408 阅读 · 0 评论 -
父子节点数据格式不一致的树状列表实现
背景后端返回的数据格式已经是树状结构了,但是其中父节点的数据格式和子节点的不一样,例如下图:很清晰看出,在ts中抽象出interface,则分别是:// 父export interface ICatalogModel { catalogCode: string; catalogName: string; projectMarker: string; catalogLogin: boolean; catalogOne ? : string; catal原创 2021-03-23 10:13:45 · 2681 阅读 · 1 评论 -
vue 项目引用 typescript 改造
这篇教程适用于手动构建的 vue 项目和 vue-cli 2x 版本的脚手架自动构建的项目。vue/cli 3x 版本以上的脚手架可以在自动构建时自选集成的 typescript 环境,这并不有利于学习。新建 vue 项目我这里采用 2x 的脚手架自动构建个 vue 项目。vue init webpack platform-test按照如下截图依次选择即可:构建完项目之后进入,查看项目的目录结构如下:改造项目安装依赖项需要新增些依赖项。ts 和 tsl原创 2021-01-20 17:12:33 · 1088 阅读 · 0 评论 -
Vue.js这些知识掌握,入门没问题
1、模版语法数据绑定的形式有3种。最常见的是使用双大括号的文本插值;v-text;v-html。其中双大括号有刷新问题,v-text解决了刷新问题可覆盖文本内容,但无法解析带html结构的字符,而v-html就可以解析的。<p>{{msg}}</p><pv-text="msg"></p><pv-html="msg"></p>2、条件渲染v-if和v-show的false时候的区别。v-if是直接注释..原创 2020-11-10 13:30:36 · 786 阅读 · 0 评论 -
vue目录树组件(树状结构列表)
一般数据类展示内容,大多采用树状结构展示内容。类似效果如下:关注微信公众号,查看效果左侧是导航分类,可以进行新建,对单项导航分享和删除。单击导航,在右侧查询出当前导航下所有目录结构,可以新建目录。新增类型分为三种,目录可以无限嵌套,当然也可以设置层级。页面整体布局页面分为左右两个部分。左侧列表,通过路由跳转显示右侧内容。左侧列表分为上下两块,顶部是添加按钮,下面是导航列表。less样式。import "../../theme/variables.less";.main {原创 2020-09-14 09:56:39 · 6094 阅读 · 1 评论 -
vue动态表头生成
业务需求导入excel表单,导入成功后预览表单数据。根据表单首行字段,动态生成预览表单的表头。excel表单格式:技术栈vue,ts,elementUI实现页面布局,调用接口获取到excel表格中数据,存入fields中。<el-table :data="tableList"> <el-table-column label="行号" width="100"> <template slot-scope="scope"...原创 2020-09-07 09:15:41 · 2289 阅读 · 0 评论 -
多路由复用一个组件
现在有两个路由,它们共用一个组件,如何实现组件的复用?route代码:export const catalogRouter: MenuConfig = { path: "/catalog", component: VisCatalog, title: "目录管理", key: "catalog", name: "catalog", chil...原创 2019-05-10 14:19:41 · 1418 阅读 · 0 评论 -
vue 父子组件通信
父 -> 子的数据传递使用Props传递数据父组件<template> <div class="parent"> <son :number="num"></son> </div></template><script>import son from './child...转载 2019-05-08 15:37:05 · 158 阅读 · 0 评论 -
vue两组件间值传递 $router.push实现
两组件间传值,可能包含多种情况,有父子组件和非父子组件,对于父子组件网上有很详细的方法讲解,但非父子组件传值有用bus总线,还有一些其他方法,其中的使用路由跳转的方法讲解太过简洁,难以理解。因为是公司项目,采用的是公司封装的UI框架,但基本上还是采用vue框架,ts编写。所以一些样式结构可能没有参考价值,但我会讲解清楚每一部分作用,主要是路由跳转部分的代码实现。首先,需求如下图,树状列表每一项...原创 2019-05-08 10:24:32 · 705 阅读 · 0 评论