随笔分类 - vue
摘要：# 3. 手写组合API ## 1) shallowReactive 与 reactive ```js const reactiveHandler = { get (target, key) { if (key '_is_reactive') return true return Reflect.g
阅读全文
摘要：1. Alert.vue <template> <div v-if="isShow"> <div class="ui dialog-overlay" /> <div class="dialog_pop"> <div v-if="isTitleText" class="pop_tit"> <h3 v-
阅读全文
摘要：vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建 vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 pa
阅读全文
摘要：前言：开发过程、测试过程、生产过程使用的接口地址不能，还有执行的操作可能也不一样，也就需要实现配置好开发环境、测试环境、生产环境，需要什么环境下的配置直接使用即可。 1、根目录下新建文件：.env.development（开发环境）、.env.test（测试环境）、env.gray (灰度环境)、.
阅读全文
摘要：1.require.context() 1.场景:如页面需要导入多个组件,原始写法: import titleCom from '@/components/home/titleCom' import bannerCom from '@/components/home/bannerCom' impor
阅读全文
摘要：Vue 中使用 JSX 1.开始 在 Vue 中使用 JSX，需要使用 Babel 插件，它可以让我们回到更接近于模板的语法上 // 安装依赖： npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props // 配置
阅读全文
摘要：1 vue 虚拟dom 虚拟dom简单来说就是一个普通的JavaScript对象，包含tag，props，children三个属性。。。 <div id="app"> <p className="text">lxc</p> </div> // 上边的HTML代码转为虚拟DOM如下： { tag:"d
阅读全文
摘要：1. Loading组件 <template> <div> <van-loading :color="loadingList.color" vertical>{{ loadingList.title }}</van-loading> <div class="mask" v-bind:class="{
阅读全文
摘要：1. vue instance声明方式 const vm = new Vue({ el:"#app", //挂载的节点，一般都是通过id template:`<div>{{text}}</div>`, //模板 data:{ //数据 text:0 } }) 2. vue instance 上的属性
阅读全文
摘要：前言 vue2.x中，可以使用 Vue.extends 来封装一个弹框，在vue 3.0中，该api已经被废除。 实现后使用方式： Message.info(‘提示’)； Message.error(‘错误’)； 1.修改index.html 注： 添加 < div id=“message”></
阅读全文
摘要：组件是有name属性的，匹配的就是组件的name。和vue-router中配置的name是不同的含义。 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤 配置<keep-alive>标签的exclude或者include属性做组件筛选 实例： <div id="app"> <ke
阅读全文
摘要：##一.全局守卫 ###1. router.beforeEach((to,from,next)=>) ###2. 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。 ###3. 如下例：main.js中设置全局守卫 在main.js中
阅读全文
摘要：进入/离开 & 列表过渡 https://cn.vuejs.org/v2/guide/transitions.html 状态过渡参考文档 https://cn.vuejs.org/v2/guide/transitioning-state.html Vue 在插入、更新或者移除 DOM 时，提供多种不
阅读全文
摘要：1 vue2 Vue2.0中使用ES5中的Object.defineProperty方法实现响应式数据 缺点 无法监测到对象属性的动态添加和删除 无法监测到数组的下标和length属性的变更 解决方案 Vue2.0提供Vue.set方法用于动态给对象添加属性 Vue2.0提供Vue.delete方法
阅读全文
摘要：##1,composition api的使用.vue Setup函数是一个新的组件选项,作为组件中composition API的起点 从生命周期钩子的角度来看，setup会在beforeCreate钩子函数之前执行 Setup中不能使用this，this指向undefined <template>
阅读全文
摘要：###1.父组件向子组件传值 //- 父组件发送的形式是以属性的形式绑定值到子组件身上。 //- 然后子组件用属性props接收 <div id="app"> <menu-item title='来自父组件的值'></menu-item> //给子组件传入一个静态的值 //2.需要动态的数据的时候
阅读全文
摘要：本文能帮你做什么？ 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅
阅读全文
摘要：###Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对
阅读全文
摘要：promise 1,Promise是ES6中的新的异步语法，解决了回调嵌套的问题： new Promise((resolve)=>{ setTimeout(()=>{ resolve(1) },1000) }).then(val =>{ console.log(val); //1s后打印1，由res
阅读全文
摘要：vue单页面应用刷新网页后vuex的state数据丢失的解决方案 分类专栏： vue 文章标签： vuex vue sessionStorage 版权 最近在用vue写pc端项目，用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。 产生原因 解决思路 解决
阅读全文
