![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
qq_27449993
天理难容
展开
-
new vue 主要干了啥?
Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等。初始化的最后,检测到如果有 el 属性,则调用 vm.$mount 方法挂载 vm ,挂载的目标 就是把模板渲染成最终的 DOM,那么接下来我们来分析 Vue 的挂载过程Vue 不能挂载在 body 、 html 这样的根节点上。接下来的是很关键的 逻辑 —— 如果没有定义 render 方法,则会把 el 或者 tem.原创 2023-02-03 09:44:10 · 2127 阅读 · 0 评论 -
vue兼容ie9-11
vue项目兼容ie,采用core-js的方式,安装core-js:3.0以上版本采用vue-cli脚手架,vue-cli3.0开始默认会安装core-js3.0的版本原创 2022-12-07 11:20:05 · 1800 阅读 · 2 评论 -
vite配置 vue3中怎么使用svg图标
vite vue3中怎么使用svg图标svg图片在项目中使用的非常广泛,如何在vue3 + vite 中使用svg图标。vite-plugin-svg-icons预加载在项目运行时就生成所有图标,只需操作一次 dom高性能内置缓存,仅当文件被修改时才会重新生成原创 2022-10-09 10:15:45 · 1230 阅读 · 0 评论 -
vite为vue3配置@路径,vite路径配置
vite为vue3配置@路径,vite路径配置原创 2022-10-09 09:44:02 · 2931 阅读 · 0 评论 -
vue mixin混入,生命周期执行阶段简易实现
vue源码实现,vue.mixin原创 2022-09-28 10:04:49 · 1119 阅读 · 1 评论 -
自己实现一个vue插件第一步
通过rollup打包vue.js插件,上一篇文章讲解了怎么通过rollup打包一个js库vue是mvvm结构,M (model):模型对象:指的是构成界面内容的相关数据 V(view): view: 视图对象:指的是给用户或者开发者展示数据的界面 VM(viewmodel): 视图模型对象:是view与model之间的桥梁Vue.js的核心ViewModelViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body原创 2022-05-18 15:40:40 · 556 阅读 · 1 评论 -
为什么this.key可以访问data,prop,methed里的值
在vue源码中,对this.key做了代理,比如data(){retrun {message:'mess'}},我们访问this.message,其实是访问this._data.message是在instate的时候,对data进行了proxyvar sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop}function proxy(ta.原创 2022-03-08 15:21:19 · 359 阅读 · 0 评论 -
js new的时候干了些啥?
创建一个空的简单JavaScript对象(即{}) 链接该对象(即设置该对象的构造函数)到另一个对象 将步骤1新创建的对象作为this的上下文 如果该函数没有返回对象,则返回this模仿newlet that = this function CutOb () { this.date = that.getNowDate() } let cutOb = new CutOb() function createObject (fn) { let原创 2022-02-18 14:39:50 · 349 阅读 · 0 评论 -
vue 自定义指令防抖
directives: { throttle: { bind: (el, value) => { var falg = null el.addEventListener('click', function (event) { if (falg) { event.stopImmediatePropagation() } else { falg = setTimeo.原创 2022-02-16 15:35:19 · 657 阅读 · 0 评论 -
vue-router源码第一步阅读
为什么必须定义一个install方法,并且把他赋予VueRouter呢?其实这跟Vue.use方法有关,大家还记得Vue是怎么使用VueRouter的吗?import VueRouter from 'vue-router'Vue.use(VueRouter) // 第一步export default new VueRouter({ // 传入的options routes // 第二步})import router from './router'new Vue({ ...原创 2021-11-03 14:56:23 · 122 阅读 · 0 评论 -
vue源码为什么vue是一个方法而不是一个calss类
// 引入模块import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'// 什么时候需要把代码放到u.原创 2021-07-02 16:11:00 · 286 阅读 · 0 评论 -
elementUI-表单验证踩坑记录
简单表单验证::model必须是对象,否则报错。 <el-form-item prop="shareTitle">中的prop必须和<el-input>这个的v-model一致否则不能验证。 <el-form :model="jcData" ref="activeInfo" :rules="rules"> <el-form-item prop="shareTitle"> <el-input原创 2020-12-12 17:10:42 · 404 阅读 · 0 评论 -
vue 静默修改url地址防止刷新页面的时候页面还是创建页面的状态
在创建一个活动的时候,在保存了即创建成功了之后,页面应该属于编辑的状态,不然用户手动刷新页面,页面依然处于创建状态,qs是一个库,将地址栏参数序列化var query=that.$router.history.current.query query.isEdit=true query=JSON.parse(JSON.stringify(query)) var newUrl=qs.stringify(query) that.$mess.原创 2020-12-04 15:44:29 · 2137 阅读 · 0 评论 -
如何实现Vue已经弃用的$dispatch和$broadcast方法?
对于父子(含跨级)传递数据的通信方式,Vue.js 并没有提供原生的 API 来支持,而是推荐使用大型数据状态管理工具 Vuex,但 Vuex 对于小型项目来说用起来真的很麻烦。并且在大型项目中如果仅仅只是极少的两个组件需要通行,用vuex也不友好虽然vue2.0弃用了这两个方法,在很多基于 Vue 的 UI 框架中都有对其的封装,包括 element-ui、iview 。那么 $dispatch 和 $broadcast 到底是怎么工作,其底层又是怎么实现的呢?接下来,我们就详细的说一说!01原创 2020-10-27 14:03:27 · 495 阅读 · 1 评论 -
ElementUI对话框(dialog)提取为子组件报错
这里涉及到弹窗el-dialog的一个属性show-close:show-close="false"是设置不显示关闭按钮,因为弹窗显示状态值(:visible.sync)是从父组件传递的参数,如果使用自带的关闭按钮,会报出一个错误:vue.esm.js?efeb:628 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re...原创 2020-10-26 17:47:38 · 1497 阅读 · 0 评论 -
Vue CLI搭建vue3.0项目
查看vue版本全局安装过旧版本的vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步:1 npm uninstall vue-cli -g //或者 yarn global remove vue-cli然后在重新安装vue-cli再查看vue的版本创建项目vue create <Project Name>//文件名 不支持驼峰(含大写字母)vue create appvue3? Check the features needed for ...原创 2020-10-10 15:16:26 · 1163 阅读 · 0 评论 -
vite 创建vue3的项目
npm init vite-app sail-vue3原创 2020-10-10 14:19:09 · 1284 阅读 · 0 评论 -
vue检测路由变化
watch:{ $route:{ handler(val,oldVal){ debugger this.activIndex=this.funList.findIndex((item) =>{ return ~(val.fullPath).indexOf(item.type) }) ...原创 2019-11-18 14:25:45 · 1068 阅读 · 0 评论