- 博客(85)
- 收藏
- 关注
RSS订阅原创 Vue中Vuex的环境搭建和原理分析及使用
Vuex是Vue实现集中式数据管理的Vue的一个插件，集中式可以理解为一个老师给多个学生讲课。使用Vuex需要在store中的index.js引入Vuex和main.js中引入store,目的是让vm和vc都能看到$store。实现多个组件对数据集中式的管理（读/写）。main.js文件操作Vuex要用到$store，故创建store文件和包含在store文件的index.js文件。
2024-01-08 04:54:04
871
原创 Vue中插槽的简单使用
默认插槽：让父组件可以向子组件指定位置插入html结构，也是一种组件通信的方式，适用于父组件（App）===>子组件(MyFooter)具名插槽的给MyFooter的slot标上名字name="xxx"，在App组件中使用那个插槽则slot="xxx"。1、和上面两种插槽不同，作用域插槽数据（games) 在组件（MyFooter）但数据的结构需要组件的使用者（App）来决定。分类：默认插槽、具名插槽、作用域插槽。作用域插槽的MyFooter组件。默认插槽的MyFooter组件。默认插槽的App组件。
2024-01-07 22:26:25
938
原创 Vue中信息订阅与发布和配置代理服务器的使用和原理
全局事件总线和信息订阅与发布一样都是实现任意组件的通信。常用的是全局事件总线信息订阅与发布借用第三方库pubsub实现任意组件的通信安装pubsub下列代码为MyHeader组件订阅了一份信息,MyFooter负责传递信息给MyHeader触发点击事件发布信息给MyHeader。
2024-01-03 22:28:16
529
原创 Vue中全局事件总线的配置和原理
例如VueComponent->VueComponent的原型对象->Vue的原型对象。VC在VC原型对象找不到的方法或属性,可以在Vue的原型对象中查找。是Vue让组件实例对象VueComponent可以访问到Vue原型上的属性、方法（$mount......)3、傀儡位置放在Vue的原型对象上,一个个VueComponent可以通过黄线访问到Vue的原型对象。1、实现兄弟组件之间的通信,需要一个傀儡。Student组件向傀儡发送信息,等待其他组件事件的触发和返回的数据。
2024-01-01 15:29:29
1504
原创 数组的基本算法
1、prev：函数传进来的初始值或上一次回调的返回值 2、current：数组中当前处理的元素值 3、currentIndex：当前元素索引 4、initialValue：传给函数的初始值。现在想把数2，3，4插入数组里，放到之前删除元素的位置上，可以再次使用splice方法。和every方法相反，用于迭代数组中每一个元素，直到返回true。迭代整个数组，可以用forEach方法，他和for的循环结果相同。filter方法返回的新数组中,都是为true的元素。map将数组的结果进行收集，返回新的数组。
2023-12-30 21:06:34
526
原创 Vue中设置组件的自定义事件和解绑组件的自定义事件
设置School组件实现props，子给父传数据。School组件用于和Student组件做对比。App向School组件传getSchoolName,School组件通过props接收存入School的VueConponent。随后通过调用getSchoolName实现子给父传递数据想让组件标签识别原生Vue提供的事件。需要加入native
2023-12-30 13:43:53
1037
原创 WebStorage本地存储
WebStorage包含sessionStorage和localStorage。其存储内存一把在5MB左右(不同浏览器不同)sessionStorage和localStorage的代码书写一致，当浏览器关闭在开启存储的数据会被清除。localStorage存储,当浏览器关闭在开启存储的数据不会被清除。清除浏览记录或操作localStorage可清除存储的数据。
2023-12-29 15:18:37
840
原创 Vue中mixin的使用和插件的使用
当多个组件的方法、数据相同时。可以统一调用mixin。mixin用于保存组件们共同拥有的方法和数据。第一个组件和第二个组件有相同的method。用mixin.js进行封装当第二个组件和mixin.js文件都设置了x,y属性。先调用组件的x,y。如果组件没有设置x，y属性，则调用mixin.js文件中的x,ymounted()生命周期钩子，如果组件和mixin.js文件都设置mounted。两个的mounted都调用。不存在谁先谁后将mixin.js文件进行暴露全局配置mixin。
2023-12-27 08:37:51
354
原创 Vue中Render函数、_ref属性、_props配置的使用
由于导入的vue为vue.runtime.xxx.js是运行版的vue.只包含：核心功能：没有模板解析器完整版的Vue为vue.js包含：核心功能+模板解析器vue.runtime.esm.js中的esm为ES6的模块化因为vue.runtime.xxx.js没有模板解析器，所有不能使用template配置项，故须使用render函数接收的createElement函数来指定具体内容下面的代码为演变为脚手架中的render。
2023-12-25 13:18:35
1199
原创 vue中的生命周期和VueComponent实例对象
生命周期又叫生命周期钩子，生命周期函数生命周期是，Vue在关键的时刻帮我们调用的一些特殊名字的函数生命周期的this指向vm或者组件实例对象mounted会将初始化的Dom挂载到页面上。
2023-12-23 12:44:24
177
原创 vue中的内置指令和自定义指令
Vue识别自定义指令的流程为：Vue一开始元素和指令成功绑定(也就是v-big可以用了)，页面未解析。当发生对应数据的改变，页面重新解析自定义的元素，调用自定义的指令。vue提供了三种自定义指令在任意时刻被调用1、bing()指令与元素成功绑定时调用该函数2、inserted()指令所在的函数被插入页面时3、update()指令所在的模板被重新解析时-- 利用自定义的v-big实现数值扩大10倍 -->当前的n值{{ number }}
2023-12-20 22:16:14
149
原创 Vue中表单数据和过滤器的简单使用
v-model的三个修饰符:lazy:失去焦点在收集数据number: 输入字符串转为有效数字trim:输入首尾空格过滤< input type="text" v-model="person.account">则v-model收集的是value值，用户输入的就是value值1.没有配置value属性时，收集的是checked（布尔值）2.配置value属性时v-model初始值为非数组，收集的是checked(布尔值)v-model初始值为数组，收集的是value值组成的数组。
2023-12-18 22:10:48
185
原创 Vue中检测数据原理和Vue_set()方法
vue监听数据的流程为：数据修改时vm.data = data.然后调用data里边的set方法。set方法重新进行DOM(页面)重新遍历。新的虚拟DOM和旧的虚拟DOM进行对比，数据才被修改。（下面写这么多，只有这句话最有用）以下是模拟vue监视数据vue可以进行多层监视对象，生成get和set方法。
2023-11-30 09:27:38
251
原创 vue中的列表过滤和列表排序
运行一下,因为过滤的缘故，越是搜索数据越少。预期不符.解决方案:1、加入空的数组 flashPersons，作用是保留persons数组的数据2、用完整的watch加入 immediate: true进行尝试3、用index方法将flashPersons显示出来数据，
2023-11-23 16:53:09
152
原创 vue中列表渲染
也就是新的虚拟DOM与虚拟DOM的对象，在索引位置为0的位置属性值不一致，就会实现，新的虚拟DOM与虚拟DOM的对象属性相同的部分，直接用虚拟DOM的对象属性。缺点一：产生新的DOM更新，效率低。遍历列表时，vue将初始数据转成虚拟DOM（页面），vue会给虚拟DOM添加key值，之后虚拟DOM转成真实DOM放入页面。如果用户修改了页面信息，vue根据新的数据生成新的虚拟DOM，新的虚拟DOM与虚拟DOM的数据对比。如果新的虚拟DOM与虚拟DOM的对象索引号匹配不上，则创建新的真实DOM，渲染到页面上。
2023-11-22 15:13:05
177
原创 vue中绑定class样式和条件渲染
字符串写法： 适用于： 样式的类名不确定，需要动态指定数组写法： 适用于： 要绑定的样式个数不确定，名字也不确定绑定对象：适用于：要绑定的样式个数确定、名字确定、但动态决定决定用不用绑定style第一种style绑定方法。
2023-11-19 14:38:37
225
原创 vue中watch监听事件与计算属性的区别
vue管理的函数写成普通函数，不是vue管理的函数写成箭头函数，目的是都可以让this的指向都指向vm或组件的实例对象。不被vue所管理的函数有（定时器的回调函数，ajax的回调函数,promise的回调函数）watch能完成的功能,computed不一定能完成，如： watch的异步操作。3.vue自身可以监视对象内部值的改变，但vue提供的watch默认的不可以。1.当监视的属性变化时,回调函数自动调用,进行相关的操作。1.vue中watch默认不检测对象内部值的改变(一层)在里面编写检测对象,
2023-11-17 14:46:26
238
原创 vue中键盘事件和计算属性
vue中常用的按键别名回车=>enter删除=>delete(捕获的删除键和退格键)退出=> esc空格 => space换行 => tab（tab键要和keydown使用，不能与keyup使用，tab键有自身的功能故特殊)上 =>up下 => down左 => left右 => right另外的特殊的修饰键（ctrl、alt、shift、meta)keyup：按下修饰键的同时，按下其他键，释放其他键，事件才被触发keydown使用:正常触发事件。
2023-11-11 21:42:12
576
原创 vue中数据代理和事件处理
直接在对象下可直接修改属性的值，而Object提供defineProperty()对属性进行控制当修改age属性时，get函数也就是getter就会被调用，返回值为age的值当修改age属性时，set函数也会被调用，且会受到修改的具体值get函数只用于获取获取number,set函数用于number修改时age值也被修改。
2023-11-10 19:04:35
487
原创 Vue中模板语法与el 和 data 的两种写法
标签语法指令语法标签语法和指令语法的简单区分，就是指令语法用v-on,v-bind,v-model指令进行动态绑定。
2023-11-07 15:09:35
150
原创 Vue-cli脚手架的下载
vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板预先定义好的目录结构及其基础代码，好比创建Maven项目时可以选择创建一个骨架项目，主要的功能： 统一的目录结构、本地调试、热部署、单元测试、集成打包上线Node.js ：CTRL + window 输入cmd输入node -v查看Node.js的版本CTRL + window 输入npm-v 查看能否正确打印出版本号npm，是一个软件管理工具，和linux下的apt软件软件差不多安装Node.js用淘宝镜像加速器，下载更快。
2023-10-31 00:22:12
546
原创 HTML简单实现v-if与v-for与v-model
首先VIewModel将View和Model连接一起，Model的数据改变View的数据也变使用Visual Studio Code启动Vue需要vue.js插件和导入CDN(包)vue.js插件：CTRL + shift + x 在搜索栏搜索vue.js安装即可CDN：VS创建一个.html的文件< div>< /div>块为view层（模板）< script>< /script>块为Model层（数据）ViewModel的体现：在浏览器的控制面板（Console),输入。
2023-10-28 17:12:59
1637
原创 前端的简单介绍
CSS语法不够强大，比如无法嵌套书写，倒是模块化开发中需要书写很多重复的选择器没有变量和合理的样式复用机制，使逻辑上相关的属性值必须字面量的心事重复的输出，导致难以维护,减少代码的笨重，提高样式代码的可维护性，大大提高了前端在样式上的开发效率简单来说：CSS预处理器用一种，进行Web页面样式设计，在通过编译器转划为，以供项目使用CSS预处理器，LESS： 基于Node.js,通过客户端处理，使用简单，功能 比SASS简单，解析效率也低于SASS，但实际开发中，我们后台人员需要的话，可以使用LESS。
2023-10-27 18:18:07
1409
原创 JavaScript中的模板直面量
constructor是JS的构造器和java的构造器性质一致，有函数名与构造名一致的功能，故赋值为如[1]所示。arguments对象它是一个数组，包含函数被调用时传入的参数，即使不知道函数的，名称也可以动态获取这些参数。get 和 set 是JS的关键字，在函数名前面加上get 或set 关键字。展开式运算符（...)也可以替代arguments，当作剩余的参数使用。如果不接任何的值，可以用一对空的圆括号，在ES5中经常使用。调用sum方法可以将传入的参数用（....）来表示。更简洁的声明类的方式。
2023-10-25 21:32:26
138
原创 JavaScript中用jquery获取鼠标的定位和对节点文本操作
先引用jquery的工具包。原始数据类型：null 、undefined 、字符串、数、布尔值和Symble派生数据类型/对象： javaScript对象。包括函数、数组和正则表达式true和false在javaScript中如何进行转换
2023-10-24 23:30:48
316
原创 JavaScript中Bom节点和表单的获取值
代表浏览器对象模型（Browser Object Model），它是浏览器提供的 JavaScript API，用于与浏览器窗口和浏览器本身进行交互。
2023-10-23 19:15:03
103
原创 JavaScript中BOM对象的扩展
我们获取某个Dom节点，如果这个dom是空的，我们可以通过innerHTML就可以增加一个元素，但是这个DOM节点已经存在元素了，我们就不能这么干了。注意： 删除多个节点时，children是时刻都在变化的，不可跨越下标进行删除。document代表当前的页面，HTML DOM文档树。location(重要)代表当前页面的URL信息。要操作一个Dom节点，就必须要获得这个Dom节点。删除：删除一个Dom节点。添加: 添加一下新的节点。获取具体的文档树节点。更新：跟新Dom节点。删除节点remove。
2023-10-22 14:59:15
96
原创 JavaScript中JSON和Bom对象模型
JSON是一种轻量级的数据交换格式简洁和清晰的层次结构使得JSON成为理想的数据交换语言易于人们解析和生成，并有效的提升网络传输效率javaScript一切皆为对象，任何js支持的对象都可以使用JSON来表示格式： 对象都用[]数组都用{}所有的键值对都用key:valueJSON和JS的对象转化。
2023-10-20 15:58:47
179
原创 JavaScript作用域的用法
javascript实际上只有一个全局的作用域，任何的变量(函数也可以视为变量)，如果没有函数的作用范围内找到，就会在全局作用域没有找到，报错。this是无法指向的，是默认指向调用它的那个对象，而apply可以控制this的指向。内部函数和外部函数的变量重名时，内部函数的变量会覆盖外部函数的变量。如果外部函数存在这个同名的函数变量，则内部函数会屏蔽外部函数的。两个函数包含关系，访问被包含的函数，在其该函数的外边可访问。为更好的定义常变量，统一将常变量封装到方法中，规范：先声明之后在应用。
2023-10-18 20:31:28
114
原创 JavaScript的forEach循环
rest可以将选择的参数不输出，输出后边的参数。argument无法将第一个以后的参数输出。argument可以手动传递参数进去。通过get方法获取字符串相应的数字。无需不重复的集合,set可以去重。
2023-10-17 21:38:14
179
原创 javaScript匿名函数和数组的变换
第一种写法第二种写法。使用一个不存在的对象属性，不会报错！ undefined动态的删减属性，通过delete删除对象的属性
2023-10-16 16:27:51
137
原创 javaScript的简单应用
是一种运行在客户端（浏览器）的编程语言，实现人机交互的效果2.作用-网页特效（监听一些行为让网页做出对应的反馈）表单验证（针对表单的数据合法的进行判断-）数据交互（获取后台的数据，熏染到前端服务器变成（node.js)js是一种运行在客户端的编程语言js组成是？ECMAScript（基础语法）.web APLS (DOM BOM)
2023-10-15 12:42:05
105
原创 CSS结构选择器的使用
要使用图例的图案，需要给其方框添加声明，在style.css文件中，然后还要在放font文件放到，该根目录中。既想修改宽也想修改高，则在其后边添加逗号接上值即可，切勿另起transition。如果想将盒子加入padding和border不改变盒子的大小。这里的前面后面是相对body里面的内容的左边和右边。将黑屏幕设置仿元素后，用content设置隐藏层,选择某个父元素的一个或多个特定的子元素。清除浮动是插入的元素是块元素。直接写n则全选所有的孩子。接上边土豆的盒子的做法，用公式将宽度进行删减。
2023-10-14 14:36:35
387
2
原创 CSS网页标题图案和LOGO SEO优化
将网页的头名字旁边放入一个图案想将想要的图案切成png图片然后把png图片转换成ico进行访问将语法引用到head里面SEO译为搜索引擎优化。是一种利用搜索引擎的规则提高网站有关搜索引擎的自然排名的方式SEO的目的是对网站进行深度的优化，网站TDK三大标签SEO优化description网站说明。
2023-10-12 20:00:48
617
1
原创 vue项目的学习周报03
2.学习了通过index.js导入新的组件，从而使新组件绑定路由。旧组件通过this.$router.push("新组件的path")在通过路由进行跳转。2.无法调用已经封装好的cookie代码和对cookie的安全校验。1.在v-for的遍历中，对遍历的原理无法理解。1.本周的学习让我对vue.js底层原理有了进一步的认识，我能够将项目中各部分的功能和模块进行连接。4.学习了v-for列表渲染，将data方法的对象进行遍历。学习目标：本周的学习目标是学习vue的基础知识。2.实现与后端接口对接。
2023-10-11 22:07:18
402
原创 CSS设置鼠标样式和添加视频样式
CSS用户界面样式轮廓线outline使图片和文字对齐baseline 默认元素设置在父元素的基线上top把元素的顶端与行中最高元素的顶端对齐middle把元素放置父元素的中部bottom把元素的顶端与行中最低的元素的顶端对齐这个用法限于行内和行内块。
2023-10-11 10:18:59
498
原创 京东代码规范与解决图片底部空白缝隙问题
当两个盒子靠近时边框会重叠为2px想让其变成1px就需要，浮动后加margin-left: -1px；注意： 这些主要对于搜索引擎，标签可以多次使用， 在IE9需要转成块级元素。给图片加边框，因为图片和文字底线对齐故会留出空白的部分。解决2：给图片转换成块级元素，防止其机械的对齐。方框中的文字如果显示不开用省略号代替。< aside > : 侧边栏的标签。< article> : 内容标签。方框中的文字如果显示不开自动换行。方框中的文字如果显示不开直接显示。< header>: 头部标签。
2023-10-10 16:35:12
185
原创 CSS盒子定位的扩张
background: url(图片地址) no-repeat -493px -378px;//这里的是向右和向下移动背景图到所要的方框中。浮动元素不会压住下面标准流的文字，而绝对定位或固定位会压住下面标准流的所有内容。除了转换为块级元素外，开可以有显示元素的意思。精灵技术为了有效的减少服务器接受和发送请求次数，提高页面的加载速度。1、将下载的图标文件夹中的fonts文件放到制作网页的同一目录中。4、将声明的字体样式给body的容器。元素隐藏后，继续占有原来的位置。隐藏后不继续保留原有的位置。
2023-10-09 23:47:50
1533
原创 盒子的定位
absolute 绝对定位。定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，可以压住其他盒子。2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是自身内容的大小。因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。定位模式用于定位一个元素在文档中的定位方式，边偏移决定了元素的最终位置。当父类没有定位而父类的父类有定位，则以父类的父类为准的定位。是元素移动位置的时候，相对它原来的位置来说的（自恋型）粘性定位是相对定位和固定定位的混合，Sticky粘性。
2023-10-08 17:25:17
117
原创 CSS清除浮动的方法
父级的盒子不能把height定死这样，浮动子类就没有了（行内块元素的特点），父类高度为零。当要插入10个li的方框时，加入浮动时就可能会因为边框宽不够，导致装不下5个，则需在ul里面设置宽。方框内的文字的竖直居中是line-height：height值;属性值 left 不允许左侧有浮动元素（清除左侧浮动的影响）属性值 right不允许右侧有浮动元素（清除右侧浮动的影响）浮动的盒子不会有外边距的问题。表单是行内块元素，两者有间隙，需要设置浮动，浮动没有缝隙。3、影响下面的布局了，我们就应该清除浮动了。
2023-10-06 15:55:24
62
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人