![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 80
程序员Syoyu
这个作者很懒,什么都没留下…
展开
-
一文带你构建自己的脚手架
何为脚手架?在日常开发中,我们创建vue项目所使用的vue-cli,创建react项目的create-react-app…都是非常优秀的脚手架。那为什么要使用脚手架来创建项目呢?因为在实际开发中,使用脚手架我们可以快速的初始化一个项目,无需自己一步一步配置,可以有效的提升开发效率。既然已经有这么多优秀的脚手架工具了,为什么还要自己开发一个脚手架呢?其实在实际开发中,有可能这些脚手架不符合我们的实际应用,这时候就需要我们自己根据实际的需求自己去“造轮子”。原创 2022-11-14 09:45:52 · 1210 阅读 · 1 评论 -
【Vue3】如何理解ref toRef和toRefs
Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是ref toRef和toRefs?三者在使用方式上有什么不同?最佳的使用方式是什么?原创 2021-08-25 11:20:02 · 1511 阅读 · 0 评论 -
vue模板编译
提示:本博客用于分享本人学习心得,如有错误之处欢迎大家指出。文章目录前言编译模板是什么?编译模板的过程?1. vue-template-compiler2. vue组件可用render代替template编译模板的结果?前言我们在用vue进行开发的时候,虽然模板是vue开发中最常用的部分,但是大多数人对他可能不是很了解,今天我们就一起来探讨以下,模板是什么?模板是如何编译的?编译模板是什么?模板不是html,模板有表达式、插值、能实现判断、循环html是标签语言,只有js代码才能实现判断原创 2021-08-10 21:47:44 · 479 阅读 · 0 评论 -
vue3响应式之Proxy
提示:本博客用于分享本人学习心得,如有错误之处欢迎大家指出。文章目录前言什么是proxy?vue3中的proxy前言在上一篇文章vue2 响应式之Object.defineProperty中,我们知道了vue2是通过Object.defineProperty这个API来实现响应式的。那么, 为什么vue3要使用proxy来替代Object.defineProperty?就像上一篇中讲到的,vue2.x基于Object.defineProperty的实现,存在很多缺点:一次性递归计算量大、无法新原创 2021-08-09 23:17:26 · 982 阅读 · 0 评论 -
vue2 响应式之Object.defineProperty
这里写自定义目录标题1.前言2.Object.defineProperty(1)Object.defineProperty监听简单对象,例子如下(2)Object.defineProperty深度监听data变化(3)Object.defineProperty监听新增、删除属性(4)监听数组变化3.Object.defineProperty的缺点以下内容是自己在学习过程中所记录,如有1.前言 在日常的开发中,在data中定义的数据,可以在template中用*{{}}*在视图中显示,如下图所示原创 2021-07-30 10:29:38 · 572 阅读 · 0 评论 -
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
最近在vue中用echarts的时候报如下错误:报错原因:Echarts的图形容器还未生成就对其进行了初始化。 于是在网上搜索了解决该问题的方法。但大多解决办法都是使用ref来代替document.getElementById()获取该图形容器对象。 但是用了之后还是会报错,于是我们转换思路,可以先用ref来判断该容器是否存在,如果存在,之后我们再用document.getElementById()来获取dom对象。代码如下:<template> <div> &原创 2021-03-23 10:13:24 · 567 阅读 · 0 评论 -
vue开发去哪儿网App的知识点和错误点整理
简介:vue开发去哪儿网App项目是跟着慕课网上面的教程进行学习、编码完成的。这篇文章主要记录的是-我在编码过程中运用的主要知识点和遇到的bug以及对bug的修复,目的是加深对vue基础知识的记忆和理解。项目文件地址为https://gitee.com/zjinxiaoliang/Travel_GoWhere一、主要知识点1.字体图标的使用(1)下载相应图标文件,并且将文件放在src/asset文件夹中(具体文件夹可以根据自己需要自己创建),我是在阿里巴巴图标矢量库下载的图标文件,地址如下:htt原创 2020-08-05 22:15:23 · 423 阅读 · 0 评论 -
Vue定义全局时间过滤器
vue获取后台的时间数据时,服务器端返回的时间大多时候都是毫秒类型,这样是非常不美观的,如下图所示。因此我们可以设定一个全局的时间过滤器来美化时间的显示形式。1.首先,我们现在main.js中定义一个全局的过滤器// originVal 后台返回的毫秒Vue.filter('dataFormat', originVal => { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getM原创 2020-07-16 16:14:32 · 568 阅读 · 0 评论 -
Element UI中的Tag组件中的$nextTick函数的作用
当我们在使用Element UI中的Tag组件时,我们能看到这样的代码this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus();})上述三行的代的作用是自动获取input输入框的焦点。this.$ refs.saveTagInput.$ refs.input.focus() 是通过$ refs获取input DOM对象,然后调用focus()方法自动获取焦点。$ nextTick 的作用是 当页面上元素被重新渲染原创 2020-07-15 17:34:10 · 873 阅读 · 3 评论