- 博客(45)
- 收藏
- 关注
RSS订阅原创 vue2和vue3的区别
vue2和vue3的区别vue2与vue3的开发组件有什么区别vue2和vue3双向数据绑定的区别总结：vue2和vue3双向数据 绑定原理发生了变化vue2的 双向数据绑定是利用ES5的一个API Object.difineProperty只能监听某个属性，不能对全对象监听可以省去数组，不用再去单独的对数组做特异性操作vue3.x，可以检测到数组内部数组的变化默认进行懒观察在2.x版本里，不管数据多大，都会在一开始就为其创建观察者，当数据很大时候，这可能会在页面加载入时造成明显的
2022-02-20 20:17:59
386
原创 vue中的slot以及vue的prop
slot的基本使用1.什么是 插槽(有三种)插槽就是父组件往子组件中插入一些内容默认插槽默认插槽就是把父组件中的数据，显示到子组件中，子组件通过一个slot插槽标签显示父组件中的数据具名插槽就是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置作用域插槽：他是带有数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽来进行不同的展现和填充内容，在标签中通过slot-scope来接收数据插槽的总结v-slot的出现是为了代替原
2022-02-16 20:03:48
927
原创 配置跨域请求
什么是跨域协议，域名、端口都相同才同域，否则都是跨域，配置的思路创建vue.congif.js文件，里面的devServer是进行开发环境的服务器配置的，里面有proxy是用来进行代理的转发，在proxy里的target设置转发的网址跨域的转发因为跨域的问题，axios是无法请求网址数据的，但是浏览器可以，所以应用代理转发请求数据到我们设置的网址中，而axios请求网址，相当于一个中间商进行了一次代理代码展示module.exports = { devServer: { //开发
2022-02-15 16:43:58
824
原创 上传，头像的使用
手写input的方法1.书写上传的input的按钮<input type='file' accept="image/*" @change='change'>上传本地文件type类型，表示的是一个上传文件的inputaccep上传的类型，代表的是图片@change在选中 文件之后触发2.对应的change事件 change(e) { // 手写的input需要一个对象将本地图片转换为对应的格式来上传 let formData = new FormD
2022-02-15 13:58:34
171
原创 vue-router以及vue-router的原理
vue-router路由原理：路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给服务器，最终返回给客户端路由模式：路由分为hash模式与history模式hash模式：在浏览器中符号的“#”，以及“#"后面的字符称之为hash,不会重新加载页面，即使没有做到对路由的全覆盖，也不会返回404报错路由传参:query,params,动态路由传参params只能使用name,query可以使用name和path使用params传参刷新后丢失，而query传参刷新后不会丢
2022-02-14 19:06:04
625
原创 vue自定义组件
一般都是用vue的项目，都是组件组件化的思想开发的，一般在搭建项目的时候，会先创建一个views目录和一个commen目录，和一个feature目录，views目录中放页面级的组件，commen中放公共的组件，比如head（头部），foot(公共底部组件)首先，组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目的开发，效率低，难维护，服用性低使用组件的好处组件是可以复用性的易于维护有封装性，易于使用大型项目中降低组件之间的重复性全局组件引用全局组件my-h
2022-02-11 20:01:24
615
原创 事件修饰符
.stop:阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为v-model的修饰符.lazy：，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步.number:自动将用户的输入值转化为数值类型.t.
2022-02-11 18:51:04
345
原创 mvvm和mvc
mvvm和mvcmvvm view-model-viewmodel的缩写，分别对应着数据，视图，视图模型,model是我们应用中的视图模型，View是我们的UI视图层，通过ViewModel，他可以把我们Model中的数据映射到View视图上，同时，他还修改了一些数据，也会反应更新我们的Model,简单理解就是双向数据绑定，当数据发生改变的时候，然后数据也会跟着同步的变化三者的关系view他可以通过事件绑定或v-model指令的方式影响modell,model他可以通过数据绑定的形式影响到view
2022-02-11 16:36:38
400
原创 Vue 中 methods,computed, watch 的区别
Vue 中 methods,computed, watch 的区别1)methods 中都是封装好的函数，无论是否有变化只要触发就会执行适用场景：组件中功能的封装，逻辑处理2)computed:是 vue 独有的特性计算属性，可以对 data 中的依赖项再重新计算得到一个新值，应用到视图中，和 methods 本质区别是 computed 是可缓存的， 也就是说 computed 中的依赖项没有变化，则 computed 中的值就不会重新计算， 而 methods 中的函数是没有缓存的。适用场景：假设
2022-02-10 16:26:59
156
原创 Watch的深度监听
Watch的深度监听watch可以让我们监控一个值得变化，并且还可以做出相应的反应watch属性他可以监听data属性中name值得变化，定义监控的时候， name这个值对应的应该是一个监控处理函数的name将name属性和对画框绑定并在对应的页面绑定name值，然后在浏览器中测试，页面上数据会随着对话框输入的值变化而变化监控处理函数name有两个参数 <div id="app"> 用户名：<input type="text" v-model='p
2022-02-10 16:23:35
916
原创 什么是vuex
1.什么是vuexVuex是一个专门为Vue.js应用程序开发的状态管理模式，它由五部分组成分别是：state,actions,mutations,getters,modules2.vuex由五部分组成
2022-02-09 19:13:17
1826
原创 Vue组件通信(父传子、子传父、兄弟通信)
一,父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）1.父组件parent.vue代码如下 <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--&g
2022-02-09 18:47:00
161
原创 vue中的虚拟dom以及diff算法
Vue中的虚拟dom1.什么是虚拟DOM通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。什么是diff算法1.diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单地说：diff的过程就是调用名为patc
2022-02-08 18:59:39
682
原创 组件data必须是一个函数
实例和组件定义data的区别1.vue实例中的data属性既可以是一个对象，也可以是一个函数组件中定义data属性，只能是一个函数2.vue组件可能会有很多个实例，采用函数返回一个全新data形式，使每个实例对象的数据不会受到其他实例对象数据的污染总结* 根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况* 组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全
2022-02-03 21:21:04
438
原创 for in和for of
1.for in 和for of 简单一句话总结：fon in 取key,for of取value,，都是遍历属性的let arr = [1,2,3,4,5]for(let key in arr) { console.log(key); // 输出下标}for(let value of arr) { console.log(value); // 输出每个元素}let obj = { name:'zbt', age:18}for(let key in
2022-02-03 21:10:25
335
原创 mvvm和mvc的区别
简述mvvm和mvc1)methods 中都是封装好的函数，无论是否有变化只要触发就会执行适用场景：组件中功能的封装，逻辑处理2)computed:是 vue 独有的特性计算属性，可以对 data 中的依赖项再重新计算得到一个新值，应用到视图中，和 methods 本质区别是 computed 是可缓存的， 也就是说 computed 中的依赖项没有变化，则 computed 中的值就不会重新计算， 而 methods 中的函数是没有缓存的。适用场景：假设我们有一个性能开销比较大的计算属性 A，它需要
2022-02-01 15:42:11
92
原创 vuex中的computed，methods,Watch的区别，
1)methods 中都是封装好的函数，无论是否有变化只要触发就会执行适用场景：组件中功能的封装，逻辑处理2)computed:是 vue 独有的特性计算属性，可以对 data 中的依赖项再重新计算得到一个新值，应用到视图中，和 methods 本质区别是 computed 是可缓存的， 也就是说 computed 中的依赖项没有变化，则 computed 中的值就不会重新计算， 而 methods 中的函数是没有缓存的。适用场景：假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并
2022-02-01 15:37:22
277
原创 diff算法
diff算法就是进行虚拟节点对比，并返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom而Vue3只比较发生变化的节点 当节点一旦发生改变 会给一个变量 效率大大提高...
2022-02-01 15:16:49
379
原创 vue的常用指令
v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动态绑定 作用
2022-02-01 15:05:02
92
原创 vue的组件通讯
1.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）父组件parent.vue代码如下 <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
2022-01-31 20:02:45
517
原创 vue的双向数据绑定原理
vue的双向数据绑定原理vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板
2022-01-30 21:00:39
74
原创 为何组件的data是一个函数
一、实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数 el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }...
2022-01-29 20:09:25
856
原创 for...in 和for...of的区别以及null和undefined的区别
for···in和for···of的区别1.首先一句话：(for···in取key，for··of取value)2.从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)；3.从遍历字符串的角度来说，同数组一样。4.从遍历对象的角度来说，for···in会遍历出来的为对象的key，但for···of会直接报错5.如果要使用for…of遍历普通对象，需要配合Object.keys()一起使用。var arr = [99,88,66
2022-01-24 16:57:40
94
原创 js的数组去重以及数组排序
1.Es6-set 使用Es6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}]; function arr_unique1(arr){return [...new Set(arr)];//或者//return Array.from(new Set(arr
2022-01-24 16:48:02
625
原创 js数据类型判断
四种方法typeofinstanceofconstructorjquery.type()object.propotype.toString.call()1.typeof:检测数据类型，分别返回对应的数据类型小写字符，用typeof检测构造函数创建的Number,String,Boolean都返回object2.instanceof:除了使用typeof还可以使用intanceof他的运算符要指定一个构造函数，或指定一个特定的类型，他可以用来判断这个构造函数原型是否在给定对象的原型链上3.
2022-01-21 17:18:18
530
原创 js数组的方法
1.整理一下数组方法joinpushshift 和unshiftsortreverseconcatslicespliceindexforEachmapfiltereverysome1.joinjoin,就是把数组转换成字符串，然后给他规定个连续的字符串，默认的是逗号（，）2.push和poppush:把里面的内容添加到数组末尾，并返回修改后的长度pop:移除数组最后一项，返回移除的那个值，减少数组的length3.shift和unshiftshift:删除
2022-01-20 20:12:11
399
原创 闭包，this指向，修改this指向，垃圾回收机制
1.闭包函数中套了一个函数，内层函数也可以访问外层函数的变量闭包的分类1.函数作为参数被传递2.函数作为返回的值被返出闭包的使用场景封装对象的私有属性和方法，用于隐藏数据，做一个简单的缓存工具作为回调函数使用利用闭包实现函数的防抖，节流防抖：例如一个倒计时，被连续点击时，关闭上一个倒计时，重新开启一个新的倒计时节流：例如一个倒计时，被连续点击时，规定时间内，无论点击多少次，只触发一次优点：闭包因为长期驻扎在内存中...
2022-01-15 18:27:11
251
原创 js原型链，作用域，变量提升
1.proptotype每个函数都有一个proptotype属性，然后被称为显示原型2.propto每个实例的对象都会有一个propto属性，然后被称为隐士原型每个实例对象的隐士原型propto属性都指向自身的构造函数的显示原型proptotype3.constructor每个proptotype都有一个constructor属性，指向的是他关联的构造函数4.原型链获取对象属性的时候，如果对象上没有这个属性，那就会他的原型propto上去找，如果还查不到那就去他地原型的原型上去找，一
2022-01-14 16:10:12
502
原创 浏览器的兼容问题
1.兼容的前言不同的浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异浏览器的内核主要分为两种，第一个是渲染引擎，另一个是引擎所以浏览器兼容性问题一般是指：css兼容，js兼容浏览器内核Chrome谷歌之前Webkit，已改Blink内核之前Webkit，已改Blink内核GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核2.css3新属性，加浏览器的前缀兼
2022-01-12 14:36:53
104
原创 vue的路由守卫
1.路由守卫导航全局的单个路由独享的组件级的2.全局守卫全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach3.全局前置守卫你可以使用router.beforeEach注册一个全局前置守卫const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})每个守卫方法接
2022-01-11 16:04:50
94
原创 link与@import 的区别，以及HTML和css新特性
1.link属于html标签，link属于html标签，而@import在css中使用表示导入外部样式表页面被加载的时，link会同时被加载，而@import引用的css会等到页面被加载完再加载2.区别link属性于html标签，@import 在css中使用表示导入外部样式表页面被加载的时，link会同时被加载，而@import引用的css会等到页面加载import只在IE5以上才能识别，而link是HTML标签，无兼容问题link方式的样式的权重，高于@impor的权重那种link
2022-01-11 13:32:36
541
1
原创 css Hack的理解，以及src与herf的区别
1.什么是css Hack一般来说他是针对不同浏览器写不同的css样式的cssHack他有三种形式分别有，属性Hack，条件注释Hack,hack主要是针对ie浏览器的2.条件Hack条件注释只有在ie浏览器才能执行，3.属性Hack就比如IE6能识别下划线和星号IE7能识别星号，但不能识别下划线，background-color:red:所有的浏览器都能识别ie9background-color:yellow：是留给ie8的4.选择符Hack就比如IE6能识别*html
2022-01-11 11:06:12
454
原创 上传，修改头像的使用
手写一个input的方法1.书写上传的input按钮<input type='file' accept="image/*" @change='change'>上传本地文件type 类型，表示是一个上传文件的inputaccept 上传的类型，代表是图片@change 在选中文件之后触发2.对应的change事件 change(e) { // 手写的input需要一个对象将本地图片转换为对应的格式来上传 let formData = new For
2022-01-10 21:00:26
472
原创 vuex的模块化与辅助函数以及定位
怎么分模块化1.在vuex的store的文件夹里添加一个js文件，内容如下export default { // 代表这是一个命名独立的空间，不会与index.js里的命名冲突与污染namespaced:true, state:{}, mutations:{}, getters:{}, actions:{}, }2.vuex的index.js引入并定义// 引入import son from './son.js' // 在modules里注册export d
2022-01-07 18:41:27
500
原创 vuex的高级用法辅助函数和模块化
1辅助函数（又称语法糖）分为四个mapStatemapMutationsmapGettersmapActions2.当一个组件需要多个状态的时候，这些状态都声明成计算属性过于偏长于是就有了辅助函数import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'computed:{ ...mapState({ a:"a", // "a" 指的是state中的a b:"b"
2022-01-07 10:50:13
672
原创 vuex的介绍
1.什么是vuex1.vuex是vue的状态管理模式，就是管理公共数据的，这个数据在任何组件都能使用2.vuex的持久化数据 1.安装插件cnpm i vuex-persist --save3.在store/index.js中引入import vuexPersist from "vuex-persist"4.vuex的五大核心1.state:状态存放数据，相当于data2.mutations:修改state的地方，而且只有他有权利修改state，Vuex给我们提供修改仓库
2022-01-06 23:11:46
377
原创 【无标题】回到顶部组件
1.事先为window开启滚动事件，获取当前滚动的高度mounted(){ window.onscroll = () => { this.add(); };},method(){ add(){ let body = document.body; let html = document.documentElement; let ht = body || html; this.top = ht.scrollTop; }}2.监听高度变化，判断按钮的显示隐藏wat
2022-01-04 22:37:00
227
1
原创 移动端的vm vh是什么
2##### 1.什么是vm vh1.他属于一种新兴 的移动端布局配置，功能与rem2.vm视口的最大宽度是1vw等于视口宽度的百分之一3.vh视口最大的宽度是1vh等于视口高度的百分之一2.如何自动适配vm,vh1.安装依赖1.npm install postcss-px-to-viewport -D2.修改.postcssrc.js// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = {
2022-01-03 21:09:36
1439
原创 什么是svn以及简单的操作
1.什么是svn开源的版本控制系统，管理着随着时间改变的数据，数据放置在一个中央资料库中，会记住每一次文件的变动，这样你就可以把档案复制到旧的版本中，或是浏览器文件的变动历史，用于多人开发共同的项目，达到合作开发的目的2.svn的安装下载地址：https://sourceforge.net/projects/win32svn/具体安装过程：https://www.runoob.com/svn/svn-install.html3.svn的一些概念1.repository：源代码统一存放放到的地方
2022-01-03 20:56:26
846
原创 【无标题】vue中的rem适配
1.rem的概念1.rem是移动端适配单位，是用来写移动端布局的2.1rem的大小就是1个html设置的font-size的大小2.手写一个rem适配// 封装一个根据屏幕尺寸自动改变html的font-size大小的函数function rem() { // 获取html的宽度 let htmlW = document.documentElement.clientWidth; // 获取body的宽度 let bodyW = document.body.clientWidth;
2021-12-31 16:57:55
418
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人