- 博客(25)
- 收藏
- 关注
RSS订阅原创 商品放大镜小案例--bom的基本操作
当页面出现滚动条时，则表示有部分页面被上卷或者右卷给隐藏，通过上述元素，可以获取被隐藏页面的高度和宽度（注意：是被隐藏页面的高度和宽度，而不是整个页面的高度和宽度）。也可以通过scrollTop，scrollLeft获取隐藏的高度和宽度，在与clientX，clientY当前视口的鼠标位置相加，也可以得到鼠标的坐标位置。最后通过放大镜在box盒子中的可移动距离，与大图片在大盒子中的可移动距离的比率，将放大镜移动的距离通过比例转化为大图片移动的距离，即可完成。为当前元素距离上一个被定位的元素的宽度和高度。..
2022-08-30 16:43:43
213
原创 CSS关于:focus 伪类的几个冷知识
MDN的这个解释有点难以理解，查阅了资料发现，有些元素在鼠标点击以及键盘访问下会产生明显的焦点轮廓，例如input、button。但是我们需要在鼠标点击时不显示，但是键盘访问需要显示焦点轮廓，因此可以借助该伪类实现。今天在写项目时，遇到一个问题，我需要点击input框，显示input框，以及iconfont元素。我尝试了许多种方法，效果都不好，后面发现了一个有趣的伪类。，表示一个元素获得焦点，或，该元素的后代元素获得焦点。一个非常有趣，但之前未发现的伪类。此外还有几个特殊的伪类，有时间可以继续深入研究。
2022-08-25 10:05:18
755
原创 Vue-router路由基础内容讲解
Vue-router是Vue.js的官方路由。它与Vue.js核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。它是Vue.js 的一个插件库，专门用来实现SPA 应用。单页 Web 应用（single page web application，SPA），整个应用只有一个完整的页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要通过ajax请求获取。一个路由就是一组映射关系，路由分为前端路由和后端路由。路由的工作过程，当浏览器路径改变时，展示其对应的路由组件。yarn
2022-06-29 21:17:13
481
原创 新玩家Vue笔记19
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件通信方式，使用于任意组件之间。安装vuex库：npm i vuex@3创建文件：src/store/index.js 在main.js中创建vm时传入store配置项初始化数据state，配置actions、mutations，操作文件store.js 组件中读取vuex中的数据：$store.state.sum组件中修
2022-06-24 21:53:56
146
原创 新玩家Vue笔记19
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将元素作为承载分发内容的出口。 让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。默认插槽只提供一个slot 标签，父组件提供数据默认插入到slot插槽中。 具名插槽具名插槽与默认插槽相似，具名插槽提供不同署名的slot表示，可以在指定标签中插入html结构，slot提供name属性，标明不同署名标签。作用域插槽 目的是为了让插槽内容...
2022-06-21 20:22:33
147
原创 新玩家Vue笔记18
父组件传递消息给子组件，父组件通过标签传递数据，如：，子组件在props配置项中接收数据，如：props: ['name', 'age', 'sex']。子组件传递消息给父组件，首先父组件先定义一个方法，将该方法通过props配置项传递给子组件，子组件调用该方法，并随之将数据传递回去。 2. 组件间的通信通过自定义事件实现自定义事件主要用于子组件传递数据给父组件。使用场景为A是父组件，B...
2022-06-18 20:38:18
92
原创 HTML行内元素、块级元素和行内块元素
HTML (超文本标记语言) 元素大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。行内元素依靠自己的字体大小或者是图像大小来支撑结构， 一般不可以设置宽度，高度以及对齐等属性。默认的宽度就是他本身的宽度。..................
2022-06-15 21:53:40
909
1
原创 新玩家Vue笔记17
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。 主要功能是让组件接收外部传过来的数据 。备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告， 若业务需求需要修改，那么请复制props的内容到data中，然后去修改data中的数据。mixins 选项接收一个混入对象的数组。这些混入对象可以像正
2022-06-13 17:39:48
303
原创 新玩家Vue笔记16
.vue 文件是Vue提供的一种单文件组件，一个.vue文件就是一个单独的组件，在文件内封装了html、css、js。以下是单文件组件实例。 School.vueStudent.vue App.vue main.js
2022-06-12 19:15:47
48
原创 新玩家Vue笔记14
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。...
2022-06-08 19:31:48
50
原创 新玩家Vue笔记13
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。...
2022-06-08 19:14:20
67
原创 新玩家Vue笔记12
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。v- html更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。v-show根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果。v-if v-else v-else-if
2022-06-07 19:45:26
64
原创 新玩家Vue笔记11
若, 则v-model收集的是value值。用户输入的值就是value值。若，则v-model收集的是value值，要给标签配置value值若没有配置input的value属性，那么收集的就是checkbox(勾选 或者 未勾选 ，是布尔值)配置input的value值v-model的初始值是非数组，那么收集的是checkbox(勾选 或者 未勾选 ，是布尔值)v-mode...
2022-06-07 19:29:00
59
原创 新玩家Vue笔记10
总结 Vue会监测data中的所有数据。 通过setter实现数据监测，且要在new Vue时就传入要监测的数据。 对象中后追加的属性，Vue默认不做响应式处理 如需给后添加的属性做响应式 Vue.set(target, propertyName/index, value)vm.$set(target, propertyName/index, value)...
2022-06-06 19:50:07
80
原创 新玩家Vue笔记09
我们可以使用v-for 来渲染一个列表，v-for 需要以 item in items 形式的特殊语法。v-for 遍历对象 key 的基本原理1. 虚拟DOM中的key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成的【新的虚拟DOM】，随后Vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较2. 对比规则： (1)：旧虚拟DOM中找到了与新虚拟DOM相同的key： 若虚拟DOM中内容没有改变，直接使用之前的虚拟
2022-06-05 18:55:45
52
原创 新玩家Vue笔记08
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 v-if 适合切换频率比较低的场景，v-if 为真时，会将不展示的DOM元素直接移除。 也可以搭配v-else 使用在 元素上使用v-if 条件渲染分组因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 ...
2022-06-05 18:28:39
76
原创 新玩家Vue笔记07
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。二、深度监视deep: true 实现深度监视。Vue中的watch默认不监测对象内部值的改变，配置deep:ture可以监测对象内部值的改变。1. computed能完成的功能，watch都能完成2. watch能完成的功能，comouted不一定能完成，例如：watch能完成异步操作...
2022-06-04 19:35:27
53
原创 新玩家Vue笔记06
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。
2022-06-04 19:21:56
53
原创 新玩家Vue笔记05
可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。除了直接绑定一个方法，也可以传递参数，如event。二、事件修饰符总结(1) methods中的配置函数也不要用箭头函数。(2) 使用v-on:xxx 或 @xxx 绑定事件，xxx是事件名。(3) 1. pervent 阻止默认事件 2. stop 阻止事件冒泡 3. once 事件只触发一次 4.
2022-06-01 19:53:25
55
原创 新玩家Vue笔记04
el：用于指定Vue实例为哪个容器所服务。data：用于储存容器所调用的数据。 第一种写法，在创建Vue实例时，就创建指出所需要的容器对象。第二种写法，在创建完Vue实例后，使用v.$mount()，创建指出所需要的容器对象。2.函数式总结(1) 创建data函数式写法更优，组件必须使用函数式写法。(2) 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例对象。
2022-06-01 19:33:57
47
原创 新玩家Vue笔记03
提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。文章目录前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据.
2022-05-31 19:19:43
65
原创 新玩家Vue笔记02
提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。Vue语法Vue的两种模板语法Vue主要由两种模板语法，分别为插值语法和指令语法。一、插值语法前篇笔记所使用的就是插值语法。<div id="#root"> <h3>hello,{{name}}</h3></div><script> const vm = new Vue({ el: '#root', data: { name: '小爱同学' }.
2022-05-31 18:55:32
56
原创 新玩家Vue笔记01
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档01 初识VueVue.js是什么Vue官网对于做出了说明，Vue是一套用于构建用户界面的渐进式框架。与其他框架不同的是，Vue被设计为可以自底向上逐层应用。简单来说，Vue框架易于上手，且便于与第三方框架或者既有项目整合。Vue基础语法// 创建一个容器<div id="#root"> <h3>hello,{{name}}</h3></div><script&g.
2022-05-31 18:36:45
45
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人