vue
文章平均质量分 53
星河·
记录成长之路
展开
-
Vue3.0的新特性(11)v-for和key,v-bind,v-for中ref,v-for和v-if优先级,全局API
v-for和key在Vue2.x中,我们都知道v-for每次循环都需要给每个子节点一个唯一的key,还不能绑定在template标签上<template v-for="item in list"> <div :key="item.id">...</div> <span :key="item.id">...</span></template> ... ...而在Vue3中,key值应该被放置在template原创 2022-03-23 16:28:53 · 3416 阅读 · 4 评论 -
浅聊vue双向绑定原理Object.defineProperty-/-Proxy
什么是双向绑定呢?vue又是怎么做的我们接下来就聊一聊什么是双向绑定?当数据模型data变化时,页面视图会得到响应更新vue又是怎么做的?vue其实现原理是对data的getter/setter方法进行拦截(Object.defineProperty或者Proxy),利用发布订阅的设计模式,在getter方法中进行订阅,在setter方法中发布通知,让所有订阅者完成响应。说这些的时候我们在刚使用vue2.x的就会遇到过数据更新了啊,为何页面不更新呢。这其实就是Object.defineP.原创 2022-03-16 21:53:14 · 1414 阅读 · 4 评论 -
Vue3.0的新特性(10)v-model
在Vue2.x中,v-model相当于绑定value属性和input事件,它本质也是一个语法糖:<child-component v-model="msg"></child-component><!-- 相当于 --><child-component :value="msg" @input="msg=$event"></child-component>在某些情况下,我们需要对多个值进行双向绑定,其他的值就需要显示的使用回调函数来改变了:原创 2022-03-11 10:00:23 · 338 阅读 · 0 评论 -
Vue3.0的新特性 (9) data、mixin和filter
在Vue2.x中,我们可以定义data为object或者function,但是我们知道在组件中如果data是object的话会出现数据互相影响,因为object是引用数据类型;在Vue3中,data只接受function类型,通过function返回对象;同时Mixin的合并行为也发生了改变,当mixin和基类中data合并时,会执行浅拷贝合并:const Mixin = { data() { return { user: { name: 'Jack',原创 2022-03-11 09:55:31 · 2161 阅读 · 0 评论 -
Vue3.0的新特性(8)Suspense
Suspense是Vue3推出的一个内置组件,它允许我们的程序在等待异步组件时渲染一些后备的内容,可以让我们创建一个平滑的用户体验;Vue中加载异步组件其实在Vue2.x中已经有了,我们用的vue-router中加载的路由组件其实也是一个异步组件:export default { name: "Home", components: { AsyncButton: () => import("../components/AsyncButton"), },}在Vue3中重新定义,原创 2022-03-09 20:37:47 · 5145 阅读 · 0 评论 -
Vue3.0的新特性(7)Teleport
Teleport翻译过来就是传送、远距离传送的意思;顾名思义,它可以将插槽中的元素或者组件传送到页面的其他位置:在React中可以通过createPortal函数来创建需要传送的节点;本来尤大大想起名叫Portal,但是H5原生的Portal标签也在计划中,虽然有一些安全问题,但是为了避免重名,因此改成Teleport。Teleport一个常见的使用场景,就是在一些嵌套比较深的组件来转移模态框的位置。虽然在逻辑上模态框是属于该组件的,但是在样式和DOM结构上,嵌套层级后较深后不利于进行维护(z-inde原创 2022-03-09 20:30:41 · 1364 阅读 · 0 评论 -
Vue3.0的新特性(6)Fragment
所谓的Fragment,就是片段;在vue2.x中,要求每个模板必须有一个根节点,所以我们代码要这样写:<template> <div> <span></span> <span></span> </div></template>或者在Vue2.x中还可以引入vue-fragments库,用一个虚拟的fragment代替div;在React中,解决方法是通过的一个React.Frag原创 2022-03-03 16:02:14 · 1112 阅读 · 0 评论 -
Vue3.0的新特性(5)组合API
Composition API(组合API)也是Vue3中最重要的一个功能了,之前的2.x版本采用的是Options API(选项API),即官方定义好了写法:data、computed、methods,需要在哪里写就在哪里写,这样带来的问题就是随着功能增加,代码也越来复杂,我们看代码需要上下反复横跳:Composition API对比❝ 上图中,一种颜色代表一个功能,我们可以看到Options API的功能代码比较分散; Composition API则可以将同一个功能的逻辑,组织在原创 2022-03-03 14:58:30 · 437 阅读 · 0 评论 -
Vue3.0的新特性(4)响应式侦听
和computed相对应的就是watch,computed是多对一的关系,而watch则是一对多的关系;vue3也提供了两个函数来侦听数据源的变化:watch和watchEffect。我们先来看下watch,它的用法和组件的watch选项用法完全相同,它需要监听某个数据源,然后执行具体的回调函数,我们首先看下它监听单个数据源的用法:import { reactive, ref, watch } from "vue";const state = reactive({ count: 0,});原创 2022-03-03 14:42:55 · 1440 阅读 · 0 评论 -
Vue3.0的新特性(3)响应式API
我们在深入学习Object.defineProperty和Proxy讲解过Proxy优点以及Vue3为什么改用Proxy实现响应式,同时Vue3也将一些响应式的API进行抽离,以便代码更好的复用原创 2022-02-28 10:41:52 · 496 阅读 · 0 评论 -
Vue3.0的新特性(2)生命周期函数
vue3新增了生命周期钩子,我们可以通过在生命周期函数前加`on`来访问组件的生命周期,我们可以使用以下生命周期钩子原创 2022-02-28 10:29:10 · 684 阅读 · 0 评论 -
Vue3.0的新特性(1)Tree-shaking
Vue3.0从20年九月发布第一个One Piece版本,到现在一直在更新优化;除了服务端渲染的工作,其他工作已经大部分完成了,中文版的官方文档也已经放出;那么作为终端用户的我们来看下Vue3新增了哪些功能和特性。尤大大在B站直播时分享了Vue3.0的几个亮点:○ Performance:性能优化○ Tree-shaking support:支持摇树优化○ Composition API:组合API○ Fragment,Teleport,Suspense:新增的组件○ Better TypeSc原创 2022-02-09 11:04:22 · 2399 阅读 · 0 评论 -
vue如何下载文件
文件下载方法1.iframe下载 var elemIF = document.createElement('iframe'); elemIF.src = this.API+'/category_type/position/export'; elemIF.style.display = 'none' document.body.appendChild(elemIF)2.请求下载 返回直接是blob格式的 this.$request({ ur原创 2021-11-19 16:29:39 · 369 阅读 · 0 评论 -
vue 单个页面设置rem
加载element-resize-detector组件let elementResizeDetectorMaker = require(“element-resize-detector”) 调用mounted() {//实例被挂载后调用 let that = this; let erd = elementResizeDetectorMaker() erd.listenTo(docu...原创 2021-11-19 16:29:09 · 1415 阅读 · 0 评论 -
element 自定义上传
#正常自定义上传 <el-upload class="upload-asbuiltDrawingFileIds" :action="uploadurl" :headers="importHeaders" :on-remove="handleRemove2" :on-success="getasbuiltDrawingFileIds" :be原创 2021-11-19 16:27:28 · 504 阅读 · 0 评论 -
vue npm 常用指令大全
普通安装模块,包名不会注册到package.json里面,但会把包安装到项目node_modulesnpm install module_nameinstall 可以简写npm i module_name安装指定版本npm i xxx@1.2.0更新指定的模块npm update xxx删除指定模块npm uninstall xxx 全局安装模块,也就是安装到磁盘中,不会在项目 node_modules 目录中保存模块包,但是打包的时候也会把相关的包打包进去npm i mod原创 2021-09-10 15:52:28 · 678 阅读 · 0 评论 -
computed监听vux值变化请求methods 中的方法
创建vuex监听器 computed: { pipeGalleryCode() { return this.$store.state.settings.pipeGalleryCode } },因为 pipeGalleryCode() 中无法调用方法我们可以在页面中创建watch来监听pipeGalleryCode值的变化 watch:{ pipeGalleryCode(curval,oldval){ this.getStatistics()原创 2020-08-10 11:40:10 · 1071 阅读 · 0 评论 -
vue 实现pc端自适应 vue cli3 实现
实现vuepc端自适应方案lib-flexible + px2remLoaderlib-flexible 阿里伸缩布局方案px2rem-loader:px转rem1、安装 lib-flexible和 postcss-px2rem(命令行安装)npm install lib-flexible --save-devnpm i postcss-px2rem --save2, 引入lib-flexible在项目入口文件main.js 中引入lib-flexibleimport 'lib-fl原创 2020-06-12 09:59:31 · 9124 阅读 · 4 评论 -
解决 node-sass 报错安装失败的bug
解决 node-sass 报错安装失败的bug1.先删除node_modules文件夹2.单独执行npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/3.上一句失败 将 已下载东西 重新编译 npm rebuild node-sass执行完毕后 在加载其他环境建议不要用 cnpm 安装 ...原创 2020-03-29 18:06:00 · 714 阅读 · 0 评论 -
echarts 图标使用rem解决刷新的问题
我们一般是在mounted中监听页面刷新人后在渲染完毕后在调用echarts mounted() { this.$nextTick(() => { this.initChart() }) }, methods: { initChart() { this.chart = echarts.init(this.$el, ...原创 2020-03-27 13:42:16 · 1526 阅读 · 0 评论 -
cdn方式使用vue-cropper及直接使用
cdn方式使用vue-cropper首先要引入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="{{asset('js/cos-js-sdk-v5.min.js')}}"></script> // 腾讯云的sdk <...原创 2020-01-15 13:56:51 · 1973 阅读 · 1 评论 -
vue 中v-if 与v-show 的区别
v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐原创 2020-01-10 09:51:53 · 103 阅读 · 0 评论 -
解决vue 不支持ie浏览器 qq浏览器的解决办法
1.引入 npm install babel-polyfill可以在入口文件(main.js) 引入import ‘babel-polyfill’ //解决IE浏览器ES6的问题 和qq浏览器的问题原创 2020-01-07 09:35:47 · 2727 阅读 · 0 评论 -
如何在微信直接下载APP(iOS/Android)的解决方案
下面则要说的是如何直接跳到app store或是应用宝里下截var u = navigator.userAgent;var isAndroid = u.indexOf(‘Android’) > -1 || u.indexOf(‘Adr’) > -1; //android终端var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);...原创 2019-12-13 19:30:19 · 4525 阅读 · 0 评论 -
px2rem-loader和lib-flexible,lib-flexible和postcss-pxtorem和第三方框架搭配使用
VUE 做移动端自适应,使用px2rem-loader和lib-flexible,转换px为rem配置build/utils.js中的px2remLoader 方法为75配置这个值是为了适配自己的设计图75代表设计图为750px设计的const px2remLoader = { loader:'px2rem-loader', options:{ remUnit:75 }...原创 2019-12-13 15:27:54 · 3289 阅读 · 3 评论 -
解决vue和vue-template-compiler版本不一样的快捷办法
vue项目,package.json中Vue和vue-template-compiler版本不一致时,执行npm run dev有时会报错提示如下内容 in ./src/views/login/index.vueModule build failed: Error:Vue packages version mismatch:- vue@2.5.10 (E:\美好家\beauty_w...原创 2019-12-13 11:48:19 · 9266 阅读 · 0 评论 -
简单的 vue页面跳转拦截器的实现方法
首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ rou...原创 2019-12-10 14:47:34 · 596 阅读 · 0 评论 -
vue项目打包部署elementUI的字体图标丢失问题
引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你记录一下解决办法:webpack module配置:(build目录下webpack.base.conf.js文件){ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: {...原创 2019-11-26 15:24:47 · 729 阅读 · 0 评论