Bulut0907-CSDN博客

原创 Vue的slot插槽(默认插槽、具名插槽、作用域插槽)

App.vue：直接在使用子组件的标签中，插入html结构，同时可以传递数据到html。如果子组件不定义slot插槽，则插入的html结构保存在子组件的$slots上。理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件向子组件传递数据。App.vue：slot的使用者接收数据，然后将数据以不同的html结构插入到slot插槽。Category.vue：给slot定义name属性，区分不同的插槽。

2024-09-09 09:21:31 1622

原创 Vue跨域问题、Vue配置开发环境代理服务、集成Axios发送Ajax请求、集成vue-resource发送Ajax请求

偏向底层JQuery: 对xhr进行了封装。提供$get、$post等API。封装了太多DOM操作，不适合Vueaxios: 基于promise的网络请求库，支持请求拦截器和响应拦截器，体积小，只有JQuery的1/4fetch:上直接有这个方法，也是基于promise的。但是会将返回的请求包两层promise，需要两次.then才能拿到请求，IE浏览器兼容性差Vue使用Axios请求不同端口的服务，会出现类似下面的错误。即CORS跨域问题。

2024-09-06 09:19:12 1073

原创 Vue封装的过度与动画(transition-group、animate.css)

Test3.vue：直接在transition-group指定属性就可以了。指定的属性可以去https://animate.style/官网去查看。想要更多可以去https://www.npmjs.com/进行搜索。还要另外两种方式引入animate.css文件。作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

2024-09-05 08:51:26 673

原创 Vue组件自定义事件、全局事件总线、消息订阅与发布(pubsub)、$nextTick

一种组件间通信的方式，适用于子组件给父组件传递数据。在父组件中给子组件绑定自定义事件，事件的触发在子组件，事件的回调函数在父组件中绑定自定义事件：(只能被触发一次)或第二种方式，在父组件中：先用给子组件注册引用信息，这样就能获取到Student的组件实例对象vc。然后再在父组件中通过生命周期函数mounted进行绑定自定义事件// this.$refs.student.$once(......) // 只能被触发一次。

2024-09-04 08:49:07 1172

原创 Vue相关的scoped样式、less-loader安装、使用nanoid生成UUID、浏览器localStorage和sessionStorage

School.vue组件：style demo能生效，且style demo只在School.vue有效。style title不生效。基本原理就是给每个HTML标签随机生成一个属性，然后通过属性进行样式的绑定。如果在.vue文件的style中使用less语法。需要安装less-loader。App.vue组件：style title能生效。点击按钮，弹窗显示UUID。

2024-09-03 08:38:01 907

原创 Vue的ref属性、props属性、mixin混合、定义plugin插件

name:'App'

2024-09-02 08:35:49 966 2

原创 vue的HelloWorld项目结构分析、实现自己的一个简单Vue应用、render函数的理解、修改main.js名称为app.js

导入的这个是vue的runtime build，由vue/package.json的module属性值dist/vue.runtime.esm.js决定，不包含template解析器。Vue的项目底层还是用webpack进行打包的，webpack的配置文件是webpack.config.js，这个配置文件我们访问不到。在Vue中我们可以通过vue.config.js对webpack的一些配置进行配置。public/index.html和src/main.js我们使用前面创建的项目的。

2024-08-30 09:07:58 1274

原创 Vue组件的好处和理解、基本使用、注意事项、组件嵌套、VueComponent理解和原型链

在Vue中，Vue和VueComponent的原型链关系，如下图所示。组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。这样可以让组件实例对象(vc)可以访问到Vue原型上的属性、方法。可以使用name配置项指定组件在开发者工具中呈现的名字。我们先通过一个简单的js示例，来理解js的原型链。VueComponent的原型链使用示例如下。关于school组件。

2024-08-29 09:28:03 1044

原创 Vue的生命周期流程、生命周期回调函数及其应用

点我n+1后，此时n的值是: 2，控制台全部输出如下。会先监视到n的变化，再进入到update流程。点我销毁vm，控制台全部输出如下。此时再点我n+1没有反应了。下面我们通过一个示例，来对生命周期回调函数进行应用。我们可以通过如下的程序，来看下具体的执行过程。

2024-08-28 09:20:04 620

原创 cookie-editor插件、Vue的内置指令(v-text、v-html、v-cloak、v-once、v-pre)、自定义指令

我们通过一个需求，来实现一个简单的自定义指令需求：定义一个v-big-number指令，和v-text功能类似，但会把绑定的数值放大10倍big-number函数何时会被调用？指令与元素成功绑定时指令所在的模板被重新解析时放大10倍后的n值是： // 定义全局指令// })new Vue({data:{n:1},// 局部指令。

2024-08-27 10:11:50 2283

原创 Vue使用v-model收集各种表单数据、过滤器

不是必须要用的，用计算属性、method方法也可以实现。不传时间戳，默认就是当前时间。

2024-08-26 08:59:48 1235

原创 Vue自己实现监视数据、Vue.set创建属性、Vue监视数据的原理

可以看到observer对象，就是实现了getter和setter方法，实现了对data属性的数据代理。注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性，即不能。当对vm._data的数据进行访问和修改，实际是对data的数据进行访问和修改。点击按钮，添加性别属性并显示到页面。

2024-08-22 09:34:51 519

原创 Vue的遍历(列表、对象、字符串、数字)、key的原理

key可以使用数据的唯一字段(最好)，也可以使用index(默认)旧虚拟DOM中未找到与新虚拟DOM相同的key。这里代码还是和上面的一样，只是修改为。再点击添加一个老刘。再点击添加一个老刘。开发中如何选择key?

2024-08-21 08:58:39 2311

原创 Vue的class样式绑定、style样式绑定、条件渲染v-show和v-if

也分为数组写法和对象写法。

2024-08-19 09:26:36 559

原创 Vue的监视属性watch、computed和watch之间的区别

当监测的属性，只有handler时，可以简写。

2024-08-14 08:34:50 452

原创 Vue使用函数实现计算属性、计算属性的实现和简写

当修改姓或名，vue会去重新加载模板，然后函数也会被调用。但如果模板中存在多个fullName()，则会被调用多次而不是一次。可以设置setter方法。当fullName被修改时setter被调用。当计算属性只要getter，没有setter，可以进行简写。通过computed来定义计算属性。可以设置getter方法。

2024-08-12 09:18:12 478

原创 Vue的事件处理、事件修饰符、键盘事件

但不推荐使用keyCode，因为不同浏览器的一个按键keyCode不一样，以后keyCode这种方式会被废弃。Vue未提供别名的按键，可以使用按键原始的key值去绑定，但多个单词的注意要转为短横线命名。如Enter，caps-lock。@keydown当键盘按下触发函数，@keyup当键盘按下再抬起触发函数。并不是所有的按钮都能捕获到。系统修饰键（用法特殊）：ctrl、alt、shift、meta(windows图标)注意: 多个事件修饰符可以连写，如。

2024-08-07 09:03:59 1439

原创 Vue的Object.defineProperty、数据代理、vue中的数据代理

基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在vm实例中，访问vm.name和vm._data.name是一样的。可以通过这两对data中的name属性进行读写。可以通过Object.defineProperty动态定义属性和设置属性的值。通过一个对象代理对另一个对象中属性的读写操作。如下通过obj2代理obj1的x属性。通过vm对象来代理data对象中属性的读写操作。

2024-08-05 09:07:37 396

原创 Vue的指令语法、双向绑定、el和data的另一种写法、MVVM模型

用于解析标签（包括：标签属性、标签体内容、绑定事件…Vue中有很多的指令，且形式都是：v-xxxx，此处我们只是拿v-bind举个例子。运行，输入框都显示hello，在下面的输入框输入12345，上面的输入框也同步显示12345。vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。Vue的设计参考了MVVM模型。Vue的MVVM模型如下。点击就可以跳转到baidu。

2024-07-29 09:05:38 382

原创 IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)

因为这个yarn和Hadoop的yarn命令会冲突，所以修改E:\install_software\Node.js\node-v20.4.0-win-x64路径下的yarn.cmd名称为yarnJs.cmd。使用IDEA打开项目, 然后在File–Settings–Plugins–Makerplace搜索vue.js, 安装并重启IDEA。再将E:\install_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量。进入项目目录，安装项目所需依赖。

2024-07-22 09:01:12 11060 3

原创 Vue的介绍和简单使用

一套用于构建用户界面的渐进式JavaScript框架。渐进式就是可以自底向上逐层的应用，简单应用只需一个轻量小巧的核心库，复杂应用可以引入各式各样的vue插件采用组件化模式，提高代码复用率，且让代码更好维护------一个页面模块就是一个vue文件，里面集成了html、css、js声明式编码，让编码人员无需直接操作DOM，提高开发效率。

2024-07-15 08:30:28 498

原创 JavaScript深拷贝实现、异常捕获、防抖和节流

深拷贝：拷贝的是对象，不是地址。

2024-07-09 09:11:45 502

原创 JavaScript原型对象和对象原型、原型继承、原型链

可以声明原型对象prototype为一个对象，同时声明多个共享的属性和方法。但需要通过constructor重新指向构造函数Star，否则指向Object就找不到构造函数Star了。原型链的查找规则如下。可以使用instanceof运算符，检测构造函数或实例化对象是否出现在某个实例化对象的原型链上。可以定义一个父类，然后通过原型继承来继承父类，最后实现子类自有的属性和方法。

2024-07-01 09:06:31 1118

原创 JavaScript作用域、垃圾回收机制、闭包、变量提升

应用：使用闭包函数，创建隔离作用域，避免全局变量污染。如下所示，使用num来对函数的调用次数进行计数(全局作用域能够访问，所以可能会引起内存泄漏)，但不能在全局作用域对num进行修改。作用域链的变量查找机制: 优先在当前作用域查找变量，如果查不到，则。查找父级作用域直到全局作用域。

2024-06-28 13:54:40 560

原创 JavaScript Window对象之(BOM、JS 执行机制、location对象、navigator对象、histroy对象、本地存储)

JavaScript是单线程的，就会出现如果某个JS任务执行的时间过长，这样就会造成页面的渲染不连贯。数据存储在用户浏览器中，页面刷新但数据不丢失。主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等。如果是android或iphone移动端请求页面，直接跳转到指定的页面(移动端页面)先访问百度，再访问当前页面，然后点击后退按钮，就能退回到百度的页面。navigator是一个对象，记录了浏览器自身的相关信息。同localStorage，就是浏览器一关闭，数据就会丢失。

2024-06-18 10:39:18 1134

原创 JavaScript日期对象、DOM节点操作(查找、增加、克隆、删除)

指1970年01月01日00时00分00秒起至指定时间的毫秒数。cloneNode会克隆出一个跟原标签一样的元素。，布尔值默认为false。

2024-06-18 10:37:10 944

原创 JavaScript事件监听之其它事件(页面加载事件、元素滚动事件、页面尺寸事件、M端事件)

javascript在head中，直接获取btn，添加监听事件是无效的，因为btn为null。所以给window添加load事件，等window的资源加载完毕，再去执行回调函数就可以点击按钮了。改变div的内容长度或改变padding值，clientWidth都会变化，但改变border值，clientWidth不会变化。移动端有自己独特事件，比如最常见的touch(触屏事件/触摸事件)，Android和IOS都有，touch对象代表一个触摸点。当页面的宽度不断变化，控制台不停的打印页面的宽度数值。

2024-06-03 08:50:12 2573 2

原创 JavaScript事件监听之事件流(捕获阶段实现 + 阻止事件流传播 + 阻止元素默认行为、mouse鼠标事件、事件委托)

如果addEventListener的第三个参数都是false(默认)，则点击紫色的小盒子，先弹出我是儿子，再弹出我是爸爸，最后弹出我是爷爷。可以选择不在冒泡阶段触发事件，而在捕获阶段触发事件。，是否在捕获阶段触发事件默认为false。点击紫色的小盒子，先弹出我是爷爷，再弹出我是爸爸，最后弹出我是儿子。所以将所有的事件监听，都委托给元素的父亲进行监听，就是事件委托。ul绑定点击事件，当点击其中一个li的时候，默认会。获取到点击的这个li，对这个li的样式进行改变。触发ul的点击事件。来阻止元素的默认行为。

2024-05-27 08:28:52 1303

cwRsyncServer_4.1.0.zip

空空如也