![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
qq_32021429
这个作者很懒,什么都没留下…
展开
-
Vue3+vite4使用mockjs进行模拟开发遇到的坑
Vue3+Vite+tsp配置mockjs原创 2023-02-14 16:10:33 · 2485 阅读 · 1 评论 -
element的table组件二次封装,实现动态表头
对element-ui的table组件进行二次封装,实现动态表头原创 2022-07-18 11:12:44 · 1950 阅读 · 0 评论 -
关于Vue3的一个奇怪的警告:Failed to resolve component: dir If this is a native custom element
vue3报警告:Failed to resolve component: dir If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.今天运行项目的时候发现项目一直在报一个警告,这个警告网上都找不到你敢信报错截图后来还是有人提醒我,全局搜一下这个 ”dir“,结果真让我找到了,搞半天是我在组件中误将div写原创 2022-04-07 11:24:23 · 12149 阅读 · 11 评论 -
Vuex原理理解及实现
Vuex是什么?官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。个人理解:Vuex就是用来进行组件之间进行数据交换的第三方 “仓库”,组件可以把想要共享的数据存放在这里面,别的组件想要的之后直接调取即可。Vuex原理个人理解它就是通过 全局混入 一个对象,在该对象的 beforeCreate 声明周期函数中,对每一个组件添加了一个属性 $store,值就是使用Vuex时所创建的原创 2020-12-03 16:18:58 · 409 阅读 · 0 评论 -
浅谈Object.defineProperty与Proxy的区别
Object.definePropertyObject.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象,即返回的还是目标对象本身。let obj = { name: '测试', age: 89 }; // 这个API没办法兼容 IE8 // Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 let p = Object.d原创 2020-11-19 15:44:32 · 355 阅读 · 0 评论 -
vue中常用的指令
vue中常用的指令/* v-model='xx':一般是用在表单元素上,input框内容发生改变,所有用到这个变量的地方都会自动更新 v-text='xx':相当于 innerText,不能识别结构 v-html='xx':相当于 innerHTML,能识别结构 v-cloak:专门用来提供解决小胡子的显示问题,需要搭配css使用 当vue编译完成之后,会把这个属性删掉,这是css样式就不起作用了 v-once:有这个指令的原创 2020-11-20 10:31:30 · 263 阅读 · 0 评论 -
vue学习之自定义指令
自定义指令vue中凡是 v- 开头的行内属性,都被认为是指令,不同的指令可以完成或实现不同的功效。vue自带的指令有时候无法满足实际需求,这时就需要我们自己“创建”指令,也就是自定义指令。自定义指令分为全局自定义指令和局部自定义指令。全局自定义指令全局自定义指令:Vue.directive(指令名, function(el,obj){…})适用范围:整个项目中都可以使用// 例如Vue.directive('color', function(el, obj){ // 用了几次v-原创 2020-11-20 14:50:53 · 103 阅读 · 0 评论 -
Vue自定义指令实现权限校验
利用自定义指令实现权限校验// directive.js// 控制元素显示不显示Vue.directive('premission1', function(el, obj){ // 控制 display的值即可 el.style.display = obj.value > 3? 'none': 'block'; });// 控制元素加载不加载,需要用到钩子函数 insteredVue.directive('premission2',{ inserted(el, obj) {原创 2020-11-20 15:46:13 · 519 阅读 · 0 评论 -
vue之更改数据触发视图更新小坑
更改对象数据触发视图更新Vue 是双向数据绑定(数据更新则视图更新;试图更新后数据自动更新)。但是某些操作发现,更改了数据,视图却没有更新<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1 st原创 2020-11-21 11:33:10 · 674 阅读 · 0 评论 -
js实现mvvm_1
手写mvvm_1<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{ name }}</h1> <!-- 这是一个注释 --> <h2>{原创 2020-11-23 13:28:32 · 212 阅读 · 0 评论 -
js实现mvvm_2
js实现mvvm_2<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{ name }}</h1> <!-- 这是一个注释 --> <h2>原创 2020-11-23 14:06:56 · 312 阅读 · 0 评论 -
vue学习之过滤器_filter
过滤器过滤器分全局过滤器和局部过滤器。和自定义指令一样,过滤器对应的函数中的this是window(无论是全局的还是局部的),而不是当前vue的实例。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <原创 2020-11-24 13:18:47 · 98 阅读 · 0 评论 -
vue学习之computed(计算属性)
计算属性_computed<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{name}}</h1> <input type="text" v-model="name原创 2020-11-24 13:46:28 · 124 阅读 · 0 评论 -
vue学习之生命周期钩子函数
生命周期钩子函数new Vue 要经历一系列的过程,在这个过程当中,vue制定了在某些节点要执行的函数,这些函数就叫是生命周期钩子函数。 let vm = new Vue({ el: '#app', data: { name: '测试' }, beforeCreate(){ // 在这个生命周期函数中,是获取不到当前实例的变量的 console.log(this.name); // undefine原创 2020-11-24 15:42:03 · 100 阅读 · 0 评论 -
vue的DOM更新
vue的DOM更新vue的DOM更新是一个异步操作:可以提高编译效率,避免性能浪费。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{name}}</h1> <原创 2020-11-24 16:35:42 · 910 阅读 · 0 评论 -
vue学习之组件的使用
组件组件可以扩展 HTML 元素,封装可重用的代码。vue中的组件分为全局组件和局部组件全局组件全局组件:Vue.component(组件名(不能是已经存在的html标签),{配置项})在配置项中,除了没有 el项 和要有 template项 外,其他的跟vm一样 // 全局组件 Vue.component('my-h1', { data() { // 组件中的data必须是一个函数(函数返回一个对象):是为了保证数据的独立 return {原创 2020-11-25 10:36:10 · 90 阅读 · 0 评论