Vue
文章平均质量分 60
Vue.js相关
hello,是翠花呀
地势坤,君子以厚德载物
展开
-
从日常应用例子defineProperty到vue.js computed实现
相信很多人知道 defineProperty ,或者在面试的时候被问过“vue(2)实现双向数据绑定的原理”呀“vue3 与 vue2 实现双向绑定的区别”呀等类似问题了。官方描述:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。大白话就是说可以通过这个方法在 a 对象上定义一些属性更改 a 对象的可读/写和值的操作。懒得写了,复制的官方示例 ????:往 object 上添加了个值为 42 不可赋值的 prope原创 2021-11-01 00:28:05 · 166 阅读 · 0 评论 -
在vue3项目中配置eslint
eslint 相关配置创建好 vue3 项目后,安装npm install --save-dev eslint eslint-plugin-vue ,执行命令初始化 eslint 配置:eslint --init接下来看命令行执行,根据自己习惯选择相应配置选项。执行完成后目录下会新增.eslintrc.js文件,同时新安装了几个插件,在package.json中可以看到。这时候可以开始配置 eslint 具体项了。比如我们不选用刚刚 init 时选择的规范包,那么可以修改 extends 为e原创 2021-08-22 00:43:34 · 3422 阅读 · 0 评论 -
vue3 + ant-design3(2.2.6+) + vite
上次体验了一下vue3+element-plus,总体感觉element-plus比element(vue2)好使且多一些功能。这次体验一下vue3+ant-design2(vue3)安装好之后按需引入 ant 组件ant.congig.js:import "ant-design-vue/dist/antd.css";import { Button, Menu, SubMenu, MenuItemGroup, Row, Col, Radio, RadioGro原创 2021-08-22 00:43:02 · 668 阅读 · 0 评论 -
写一个导航锚点-固钉Anchor
写一个锚点-固钉AnchorAnt Design 中有一个“固钉”组件,使用它能后做一个锚点滚动导航。当点击文字时页面滚动到相应位置,当滚动页面时导航高亮跟随,当复制链接在新窗口访问时能滚动到相应地方。<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" /><a-anchor-link href="#components-anchor-demo-static" title="Static dem原创 2021-03-29 09:32:31 · 1127 阅读 · 2 评论 -
vue3 + element-plus + vite 注意事项
vue3 + element-plus + vite 注意事项vue3发布以来很多ui库都做了跟进,比如vant、ant、element…各个项目还在探索阶段,所以如果使用的话得做好迎接各个库bug的准备~element-plus原element库很久很久没有人维护了,不知道这个element-plus会维护多久。安装啥的步骤element-plus网站都有。需要注意的是,按需引用时记得引入样式文件import 'element-plus/lib/theme-chalk/index.css';按原创 2021-03-08 00:25:32 · 4402 阅读 · 1 评论 -
vue3+vant3初步搭建项目(一)
vue3+vant3仿微信读书app准备vue3环境安装vue3使用npm install vue@next命令安装vue3版本可以安装vue-clinpm install -g @vue/cli,通过脚手架来选择构建vue3项目:选择:Default (Vue 3 Preview) ([Vue 3] babel, eslint)也可以使用vite快速构建一个vue3项目,具体步骤和其他内容官网上都有。npm init vite-app <project-name>cd &原创 2021-03-06 18:00:49 · 4136 阅读 · 1 评论 -
vue中forEach修改数组里的对象视图不刷新,但map却可以?
前景vue2.+工作中我们经常需要修改某个数组里的某个属性并且希望视图数据刷新,但是vue2中如果直接通过下标修改数组属性值或新增属性则不会响应,如:data() { return { arr: [ { a: 0 } ] }}此时如果直接这样arr[0] = {a: 999, b: 'bbb'}进行修改,视图不会改变。vue官方提供了set、set、set、forceU原创 2021-01-24 18:05:46 · 2577 阅读 · 0 评论 -
前端项目常用的一些规范
前端项目规范摸爬打滚这些年,总结一下前端合作开发中的一些规范,涵盖了js、css、HTML。不管是独立开发还是团队一起协作,都最好是有一套比较严格的代码规范,这样代码看起来更清晰可维护性也好。js缩进:4个空格2个空格都可以,看自己团队的喜好,如果确定了,则配置tab也为相应的空格数。字符串使用单引号:let a = '123456'运算符左右两边空格:建议有空格:let c = a + b行尾建议无空格分号:个人习惯无分号结尾变量声明:建议全部使用es6中l原创 2020-12-24 01:17:36 · 431 阅读 · 0 评论 -
vue源码讲解系列之四------在render中创建节点和使用组件发生了什么
上一篇我们了解了创建vue实例时调用了_update方法,_update又调用了实例上的__patch__方法,它接收DOM元素、vnode、hydrating和removeOnly这几个参数。createChildren递归调用createElm创建真实DOM,最后使用原生appendChild方法将节点插入到DOM树中。接下来我们来了解vue组件化的过程。通过组件化的思想,我们可以将界面拆分为多个独立的模块,可以复用和嵌套使用。上一篇我们了解到了在render函数中直接创建节点的方法:var .原创 2020-10-26 00:59:15 · 346 阅读 · 0 评论 -
vue3新特性实践——南征北战
Composition API实践上一篇我们『纸上谈兵』了一番,但是纸上得来终觉浅,我们还需要实践,实践过了才是真正的掌握。纸上谈兵地址:vue3新特性理论——纸上谈兵让我们来写一段为了用API而用API的辣鸡代码:HelloWorld每秒钟变换颜色,点击则停止变换颜色。在App.vue中,引入reactive, ref, toRefs, onMountedAPI,我们将需要响应的数据写在reactive里面或者用ref包裹,将方法写在自定义的methods对象里,在onMounted的时候每秒执行原创 2020-07-24 01:22:27 · 328 阅读 · 0 评论 -
vue3新特性理论——纸上谈兵
几天前you大大发布消息说vue3已经处在cr阶段了,也就是说,新加的功能已经确定,接下来就是查改bug了。前不久公司人员分享了一些关于vue3相关的知识,刚好我也对vue3很感兴趣并且之前就进行了了解,所以在这里记录一下。这篇文章主要以理论为主,代码实践请移步:首先来说说you大大最为自豪的改进:Composition APIyou大大说以前在2点几的版本中我们使用mixin来混入公用方法或者其它内容,这样做混入的对象来源不明,相同功能代码陈列杂乱,修改起来上翻下翻,对开发者造成困扰。而使用Co原创 2020-07-24 01:17:02 · 1696 阅读 · 0 评论 -
vue中使用svg-sprite-loader处理svg图片
网上已经有很多文章写了相似的例子,不过自己实践之后还是把过程记录下来,这样知识就是自己的了。版本:@vue/cli 4.4.1实现内容:1.vue载入svg 2.能够更改svg样式 3.svg无限旋转1.使用的loader:svg-sprite-loader、svgo-loader我们在vue.config.js文件里找到chainWebpack属性,添加如下代码:chainWebpack: config => { // ...... config.module原创 2020-07-20 22:21:17 · 8840 阅读 · 9 评论 -
在路由守卫之前拿到vuex中异步请求数据——vuex中watch方法
vuex中watch的使用问题:在全局路由守卫中想要通过store拿到异步请求的数据,无法拿到。我们常见使用vuex,一般是这样的:store模块文件写相关的数据信息,模块一test.js:export default { state: { obj: { count: 2 } }, mutations: { add(state){ return state.obj.count + 1 } }, actions: {原创 2020-07-12 11:47:58 · 2910 阅读 · 1 评论 -
vue中scoped的实现以及如何使用PostCSS转义css使其成为局部作用样式
scoped我们在vue中写css样式时,有时候会在style标签上添加scoped属性,这样这个vue组件里的样式就不会污染到其他组件中了。<style scoped></style>但是这时候如果引用了第三方库,比如element、ant-design啥的,这时候修改他们的样式就需要增加额外的符号或命令去更改:比如,我们可以使用deep,或者>>>符号:<style lang="less" scoped>.this-page {原创 2020-06-04 01:25:41 · 1114 阅读 · 0 评论 -
vue-cli3 新建的项目jest 运行报错
问题描述:npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] unit: `jest --config test/unit/jest.conf.js --coverage`npm ERR! Exit status 1npm ERR! npm ERR! Failed at the [email protected] unit scri...原创 2020-04-30 00:49:55 · 1041 阅读 · 0 评论 -
vue源码讲解系列之三------ 首次渲染/数据更新的时候_update方法将VNode渲染成真实DOM的过程
上一篇我们了解了render过程中调用的createElement方法和VNode虚拟节点。createElement对_createElement进行了封装,而_createElement则是真正处理render过程的函数,VNode类则定义了许多虚拟节点需要的字段,VNode构成节点树,再映射成真实DOM。那么接下来我们来了解VNode渲染成真实DOM的过程。当我们创建Vue实例,在da...原创 2019-12-13 00:29:25 · 807 阅读 · 0 评论 -
vue源码讲解系列之二------ render()函数、VNode虚拟节点的实现
上一篇我们大概了解了vuejs在创建vue实例(new Vue())时候所需经历的主要过程,其中包括data、method、render等初始化。(有讲错的地方或者觉得说得不好的地方还请广大麻油们指正)。接下来我们来了解一下render过程主要干了什么,首先找到render.js,render.js一开始是导出initRender方法,定义了一些变量往vm上添加了一些属性,还分别添加了私有的...原创 2019-11-18 19:13:10 · 1845 阅读 · 0 评论 -
vue源码讲解系列之一------声明式渲染new Vue()过程发生了什么
声明式渲染用模板语法声明式地将数据渲染至DOM<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})数据和DOM建立关联,数据是响应式的。new Vue 发生了什么new关键字将创建一个实...原创 2019-11-04 09:51:25 · 817 阅读 · 0 评论 -
vuejs源码讲解从flow.js开始——一个JavaScript 静态类型检测工具
从今天开始我要不间断地在分享 JavaScript 进阶系列、web 性能等系列的文章的同时分享一些 Vuejs 的阅读源码理解。希望和广大程序员们一起进步,一起学习,一起分享。1.从 flow.js 开始官网上介绍 flow 是 JavaScript 静态类型检测工具,能够更规范、高效地编写 JavaScript 代码。首先看个栗子:// @flowfunction square(...原创 2019-10-20 16:59:02 · 511 阅读 · 0 评论 -
Element.scrollIntoView()、window.scrollXX 和 vue router 路由滚动行为
scrollIntoViewElement.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。scrollIntoView 可以带有 alignToTop 参数和 scrollIntoViewOptions。scrollIntoView(alignToTop):这里 alignToTop 是一个布尔类型值,如果为true那么元素会在可视区域顶端显示,对应 s...原创 2019-09-21 17:32:15 · 1143 阅读 · 0 评论 -
Vue 路由守卫及其在实际开发中的应用
界面中可以通过三种方式植入路由:全局, 单个路由独享, 组件级。全局前置守卫:首先需要注册全局路由import router from "./router";router.beforeEach((to, from, next) => { // ...});new Vue({ el: "#app", store, router, components: { A...原创 2019-09-19 09:36:28 · 5713 阅读 · 0 评论 -
vue 返回/跳转界面刷新数据
vue 返回/跳转界面刷新数据方法一(网上大部分介绍的方法)使用 provide / inject在父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量a.vue<template> <div id="app"> <pageName v-if="isRouterAlive"></pageName&g...原创 2019-05-02 18:18:57 · 9735 阅读 · 0 评论 -
audio语音播放,在ios上失效
currentTime 属性设置失效当需要拖动滑块控制音频时,先设置音频只有在播放的状态下才能拖动重新设置currentTime。2.无法播放音频将动态渲染的audio ,只保留一个(界面中多个音频样式,但实际audio标签只有一个)。...原创 2019-04-30 16:03:18 · 3782 阅读 · 0 评论 -
使用 better-scroll 实现纵向横向双向滚动并设置吸顶
使用 better-scroll 实现纵向横向双向滚动需要达到的效果:右侧内容左右滚动时,左侧边栏不动,上下滑动时整体内容上下滚动如图:1.纵向滚动安装并引入import BScroll from 'better-scroll'因为滚动默认是纵向的,所以不需要多设置其他参数首先在 HTML 部分设置滚动外层容器(centent)和滚动内容(content-box),设置外层 di...原创 2019-04-19 16:03:06 · 5246 阅读 · 3 评论 -
ant-design-vue构建后台管理系统记录
1.使用v-slot指令代替废弃了的slot 和 slot-scope。原: <a-table bordered :data-source="data" ...> <template slot="name" slot-scope="value, row, index"> {{row.name}} {{row.other}} </temp...原创 2019-03-25 14:33:00 · 8576 阅读 · 0 评论 -
Vue 安装依赖的时候扩展符报错
扩展符报错,第一反应是babel没有配置好。可是所有的安装依赖都是在package.json文件里,都是直接复制过来的(一台电脑转移文件到另外一台电脑),按理说不会有错。于是网上找了一下,发现很多人都说是.labelrc文件的问题。顿时想起,在编辑器里除了.labelrc还有其他几个文件,因为电脑上没有设置隐藏文件可见,所以在项目的文件夹里就看不到,从而直接把文件夹里的东西复制到另外一个地方的...原创 2019-01-15 18:04:21 · 697 阅读 · 0 评论 -
设置cookie值,浏览器set-cookie显示有内容,但没写入cookie(刷新没有cookie)
技术栈:vue、axios、nodejs目的:服务端设置cookie,客户端在浏览器中可以查看/获取cookie内容。出现问题:服务端设置好了cookie信息,并且能在浏览器控制台中看到set-cookie内容。但是浏览器application中并没有写入cookie。查找问题:nodejs和vue启动的端口不同,所以使用了cors跨域,影响了cookie的设置。解决方法:nodejs中...原创 2019-01-10 23:36:45 · 17952 阅读 · 3 评论 -
Object.assign与vue $set
Object.assignObject.assign可以用于js对象浅复制。语法:Object.assign(target, source1, source2);第一个参数为目标对象,后面的为要合并的对象。例:let obj={a:2,b:4}Object.assign({}, obj, {c:6}); // 将{c:6}与obj合并 返回{a:2,b:4,c:6}当属性...原创 2018-12-21 14:38:19 · 3914 阅读 · 0 评论 -
vue-cli 项目在IE浏览器下无法打开
转自 https://blog.csdn.net/ywcsd/article/details/822556501.问题 :ie浏览器打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in thisbrowser;解决方法:安装babel-polyfillnpm install babel-polyfill --save-dev...转载 2018-09-19 10:58:36 · 5939 阅读 · 1 评论 -
vue中echarts 鼠标悬浮 图例文字颜色相应改变
1.首先设置鼠标悬停后 的背景颜色 series : [ { itemStyle: { emphasis: { color:'#ff9999' }, } } ]2.设置动态绑定样式(这里是自己写的图...原创 2018-09-09 16:48:18 · 9336 阅读 · 1 评论 -
学习vuejs过程中的一些错误总结
:大多数时候遇到问题还得靠自己去思考去实践去解决。Unknown custom element: - did you register the component correctiy? 在网上查了别人都是说没有用use()引进vue-router,或者没有将路由挂到Vue实例上。 但是这两者我都有做到,但还是报以上错误。正当百思不得其解的时候,思考,既然是router出错应该是和引用vue-原创 2017-10-19 10:40:46 · 1208 阅读 · 0 评论 -
基于vuejs的博客界面
vue2.0vuex2.0vue-cli脚手架一个简单的博客界面,主要是简单的路由跳转界面和其他一些vue的基本操作。 vue和其他插件及脚手架的安装方法很多大牛已经分享了很多,所以这里就不讲这些安装。 这里讲一下数据的获取,模拟从服务器获取动态数据的工具:mockjs 在生产环境中配置"mockjs": "^1.0.1-beta3",在main.js中引入import { mock }原创 2017-09-28 16:23:38 · 2731 阅读 · 0 评论