vue
进击的桐人
写些心得,不时回看
展开
-
仿写Vue七、响应式
七、响应式“ 自己动手实践,就会更加深刻的理解前面的几篇文章,大致解决了从模板与数据到虚拟节点,再到渲染至页面上这一过程,接下来的几篇,着手解决响应式,即数据发生修改,页面随即更新的功能。01、数据劫持我们都知道在 Vue 2.x 版本中,数据的双向绑定是靠 Object.defineProperty()来实现的。在 3 的版本中使用的 Proxy来代理。毫无疑问,proxy实现起来更简单。本着学习的目的,我们还是使用前者来学习实现吧。至于后者,以后有时间总会尝试的!公共函数:判断是否为原创 2020-05-16 17:13:19 · 380 阅读 · 0 评论 -
仿写六、缓存虚拟节点
六、缓存虚拟节点“ 自己动手实践,就会更加深刻的理解**”**上一篇中,我们使用了闭包来缓存某些数据,将多次的遍历转换为一次遍历。今天这篇,我们使用闭包来缓存 vnode,当数据发生改变时,无需重新生成 vnode,而是直接对 vnode 中的 {{data}} 进行替换。01、combine我们需要一个函数,来将带有模板 {{data}} 的 vnode与data结合,生成不带有模板的 vnode,此函数为 combine/** * 带{{}}的vnode + data -> vno原创 2020-05-12 17:26:40 · 373 阅读 · 0 评论 -
仿写Vue(五)、柯里化函数的应用
五、柯里化函数的应用“ 自己动手实践,就会更加深刻的理解**”**今天的内容主要是柯里化函数的应用。01、内置标签在Vue中,存在两种标签:html内置标签(例如 div, span, p 等)与自定义组件标签(例如 my-div, base-table )。const htmlTag = 'div,p,span,header,section,h1,h2';const htmlTagArr = htmlTag.split(',') 我们每次拿到一个节点时,需要去判断这个节点的标签原创 2020-05-12 15:36:13 · 476 阅读 · 0 评论 -
仿写Vue(四)、虚拟节点
四、虚拟节点自己动手实践,就会更加深刻的理解在前面,已经解决了属性的深层次渲染,接下来需要解决虚拟节点的问题——即将DOM转换为vnode。01、虚拟节点简单起见,简单起见,对于一个虚拟节点,有这么些属性:tag:表示节点的标签名data:表示节点的属性text:表示文本节点的文本(不为文本节点时,为undefined)type:节点的类型children:子节点/** * 虚拟节点 */class MyVNode { /** * 构造函数原创 2020-05-09 22:29:03 · 439 阅读 · 0 评论 -
仿写Vue(三)、深层遍历节点属性
三、深层遍历节点属性“ 自己动手实践,就会更加深刻的理解**”**前言中,在将Vue以及其一些方法整合之后,再来看看第二个问题:渲染深层次的对象属性,例如 name.firstName01、编译函数在上一节中,我们的编译函数如下: function compiler(template, data) { const childNodes = template.childNodes; for (const childNode of childNodes) {原创 2020-05-09 22:03:25 · 502 阅读 · 0 评论 -
仿写Vue(二):构造函数MyVue
二、构造函数MyVue自己动手实践,就会更加深刻的理解这次的主题:实现构造函数 MyVue。在上一篇文章中,遗留了以下一些问题:还没有整合成构造函数无法替换形如 name.firstName 的层级属性没有使用虚拟DOM今天,主要解决一件事,实现构造函数 MyVue,并在其原型上添加 **render, compiler, update **这三个方法。01、实现构造函数 ...原创 2020-05-06 21:16:07 · 231 阅读 · 0 评论 -
一步一步的实现Vue(一)
“ 这次想要自己学着实现简单版的vue,从而对vue有更加深入的理解。” 推荐一个好用的vscode插件,可以本地快速启动服务器,并运行html文件,且拥有热加载功能:“live server”。01、看看真正的Vue首先,我们都知道,当使用 new Vue 的时候,就可以将 html 中的模板{{}}用 data 里面的数据替换,如下:<!DOCTYPE html&g...原创 2020-05-06 13:01:58 · 401 阅读 · 0 评论 -
一步一步的实现Vue(环境准备)
1、vscodevscode界面简洁、生态环境丰富,不失为最好用的编辑器之一。2、目录首先使用 npm init 初始化 package.json ,然后 npm install vue 来安装添加vue的依赖,这样我们就可以在 node_modules 里看到vue的源码了。3、vscode插件我没有使用打包工具,因为每次尝试都是独立的html,推荐使用 Live Server ,在...原创 2020-05-06 12:28:30 · 188 阅读 · 0 评论 -
vue项目中导入excel文件(使用element-ui)
需要使用的包有 XLSXnpm安装:npm install --save xlsx在element-ui 中有一个组件叫 upload,可以直接拿来用<el-upload action="" :auto-upload="false" // 因为只是读取数据到表格,并不需要上传到服务器 :show-file-list="false" // 因为是直接读到表格,不用展示文件列...原创 2019-03-28 16:05:38 · 6424 阅读 · 0 评论 -
前端 vue 项目中导出 table 为 excel 表格
背景介绍:使用 vue 框架以及vue的其他生态系统,组件库使用的是 element-ui。首先要安装两个包:XLSX,file-savernpm install --save xlsx file-saver现在有一个按钮,和一个表格,点击按钮发生导出表格的事件。// template<el-botton @click="export">export</el-but...原创 2019-03-26 15:10:16 · 5398 阅读 · 3 评论 -
Ant Design Vue 中的table与pagination联合使用
表格table使用链接:ant design vue : Table分页pagination使用链接:ant design vue: Pagination表格单独使用时,自带简单分页,只包含 上一页, 页面码, 下一页,例如:但如果想要更加复杂的分页,例如显示总数,改变每页个数等等功能,则需要传入pagination参数来自定义,看代码:<a-table :datasource="...原创 2019-03-21 11:35:26 · 19330 阅读 · 10 评论 -
vue项目中关于锚点的(带变量)使用方法(全局使用)
问题在普通html中,锚点的使用方法是:<a href="#123">点击就定位到123的锚点</a>...<div id="123">这里是锚点的位置</div>但在vue项目中,各个页面被划分成了很多组件,经常是在 A 组件中循环渲染多个 a标签,点击跳转到 B 组件的锚点位置解决在 A 组件中,<a v-for=&quo原创 2018-12-06 14:09:43 · 621 阅读 · 0 评论 -
vue项目中使用ElementUI与第三方图标库Iconfont(亲测有效)
本次需求是要使用elementUI中的<el-input>,并在输入框头部添加图标,无奈element-ui的图标太少,没有用户、密码等这些图标,因此不得不使用第三方的图标,这里选择使用阿里的Iconfont,很全,也很简单使用。如果只是使用一两个数量较少的图标,完全可以将图标下载下来,然后自行引用,不过不适用于动态变更的项目(不然每次都要下载,很麻烦)。iconfont使用就...原创 2018-08-31 10:35:57 · 3966 阅读 · 2 评论 -
vue项目中使用cookie
安装vue-cookies包:npm install vue-cookies --save在main.js中引入:使用require:var Vue = require('vue')Vue.use(require('vue-cookies'))若支持es6,则:import Vue from 'Vue'import VueCookies from 'vue-cookie...转载 2018-08-29 09:58:36 · 3700 阅读 · 0 评论 -
vue中使用axios
安装npm install axios执行GET请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); ...转载 2018-08-29 11:35:20 · 197 阅读 · 0 评论 -
vue中父组件获取子组件的方法
关键词:ref在子组件child.vue中,有两个数据:data() { return { a:1, b:2, }}在父组件father.vue中,使用子组件:<child ref="child" .../><script>...let child_a = this.$refs.child.al...原创 2018-09-26 10:33:54 · 544 阅读 · 0 评论 -
@vue/cli 3.x 试用
1、先卸载之前的vue-cli 2.x : npm uninstall -g vue-cli2、全局安装新版本,新版本已经改名叫 @vue/clinpm install -g @vue/cli2.1、可以查看当前版本> vue --version3.0.5 ...原创 2018-10-20 16:57:24 · 205 阅读 · 0 评论 -
vuex中mutaions注意事项
mutaion 遵循 vue 的响应式规则当store的内容有所变化,监视状态的vue组件会自动更新,例如:// store.js...state: { username: '',}// userInfo.vue<template> <div> hello, {{username}} </div></template>&...原创 2018-10-25 10:41:00 · 430 阅读 · 0 评论 -
vue 项目中使用echarts起步
在组件<mychart.vue>中:<template><div> <div ref="mychart"></div></div></template><script>export default { data() { return {}原创 2018-11-23 10:12:58 · 234 阅读 · 0 评论 -
vue项目中mockjs初尝
首先要安装npm install mockjs --save-dev在src中新建文件夹mock,在此文件夹中新建mock.js在 main.js 中引用mock.js在 mock.js 文件中拦截请求这样写:// mock.jsimport Mock from 'mockjs'Mock.mock('/myurl', { "string|1-10": "*"})// 返回...原创 2018-11-23 11:30:25 · 225 阅读 · 0 评论 -
vue中父组件改变子组件中的data
父组件:father.vue<template> ... <button @click="changeChild">Change</button> <children ref="child"></children> ...</template><script>impor...原创 2018-08-22 17:26:47 · 11427 阅读 · 6 评论