chengzhangdewo-CSDN博客

转载 CSS——display:none与visibility:hidden的区别

隐藏元素的方法有很多，比如：让元素变透明：opcity:0,设置display:none，或设置visibility:hidden。1、display:none给元素设置了display：none后，那么该元素及其后代都会被隐藏，在页面中看不见点不到，但是它还存在于页面中，只是它不占据空间，对后面的元素布局没有任何影响。2、visibility:hiddenvisibility:hidden与display：none有同样的作用，不同的是设置了它之后，元素会占据原本的空间，会影响后面元素的布局

2021-10-18 20:28:38 1085

转载 CSS——display有哪些值？说明他们的作用？

常用的有：none：此元素不显示。block：将元素显示为块级元素，前后会带换行符。inline:默认值，元素会被显示为内联元素，前后没有换行符。inline-block:行内块级元素。版权声明：本文为CSDN博主「sjinsa」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/sjinsa/article/details/70820204...

2021-10-18 20:17:02 545

原创 Vuex——怎么使用辅助函数？

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.

2021-10-15 14:14:23 505 1

原创 Vuex——状态机的属性

{ //状态存储的位置 state:{ msg:'hello' }， getters:{ //获取可以获取到state中的数据进行处理再输出--派生自state msgUpper(state){ msgUpper(state){ return state.msg.UpperCase() } } },...

2021-10-15 14:12:16 243

原创 Vuex——基本使用（不使用辅助函数）

为什么要使用vuex？Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex是一个状态管理模式，状态机，将组件共享的数据放到状态机中统一管理，组件想拿数据可以从自己的数据模型中拿，也可以从仓库中拿，把vuex理解成一个仓库.存放组件之间的共享数据。假设A组件想要那B组件里面的数据，把A组件和B组件的数据放到Vuex中 A组件想要获取B组件数据从vuex中拿，B组件想要获取...

2021-10-15 14:04:04 265

原创 Vue———嵌套路由

慢慢

2021-10-14 20:11:38 102

原创 Vue—— 编程式导航——Router实例方法

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。在 Vue 实例内部，可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。1. router.push(参数) 向 history 栈添加一个新的记录、 router.push('home') router.push({ path: 'home' }) router.push({ nam...

2021-10-14 19:41:57 909

原创 Vue——组件内部守卫，全局守卫，路由独享守卫

组件内部守卫<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D

2021-10-14 19:27:44 1463

原创 Vue——动态路由

需要把某种模式匹配到的所有路由，全部映射到同一个组件。例如 : 有一个user组件，对于所有id不同的用户，都要使用这个组件来渲染，那么可以在vue-router的路由路径中使用动态路径参数来达到这个效果。复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch $route 对象，或者使用组件内部的导航守卫。注意：1.path: '/user/:id',这个代码使得id是的变量，像/user/1001,/user/9999这些都可以跳转到同一个组件。2.在created中可以.

2021-10-14 19:16:24 159

原创 Vue——路由的基础使用

1.注册组件2.定义路由3.路由注册4.路由的使用注意：1.<router-view></router-view>中加载的是组件template中的内容。 2.<router-link to="/a">组件一</router-link> 的作用类似于标签。<!DOCTYPE html><html lang="en"><head> <meta charset...

2021-10-14 18:33:58 210

原创 Vue——混入

混入是非常灵活的技术用来分发Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。混入规则当组件和混入对象有同名选项时，这些选项会以恰当的方式合并1. 数据 data数据对象在混入时，会进行合并，发生冲突是，保留组件的数据2.值为对象 methods computed等在混入时，同名的methods会合并成为一个对象，如果对象的键名发生冲突，则保留组件对象的键值对3.生命周期钩子函数...

2021-10-14 11:18:35 193

原创 Vue——router模式——hash模式与history模式的区别

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，可以用路由的 **history 模式**，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。不过这种模式要玩好，还需要后台配置支持。hash路由和history路由的区别： 1.hash路由在地址栏URL上有#，而history路由没有会好看一点2.进行回车刷新操作...

2021-10-14 10:59:43 489

原创 Vue——插槽

1.为什么要用插槽？为了在组件标签内些内容，如果不用插槽，组件内容就无法显示。2.为什么要用组件？组件可以同时编写，有利于团队开发。3.什么是插槽默认模板？位于子组件template中template:`<slot>插槽默认模板</slot>`4.什么是插槽自定义模板？位于body中的div中<my-com> <template #name> 插槽自定义模板 <...

2021-10-13 20:26:02 132

原创 Vue——组件传值（组件通信）

<my-atitle='我是父组件传递过来的值':msg='msg'attr-b='我是驼峰式命名属性'@my-event='handler'></my-a><!--1.把想要传递的属性写在子组件标签中...

2021-10-13 11:33:40 207

转载 es6——半深拷贝

ES6中半深拷贝的理解引用数据类型中的基本数据类型复制是深拷贝而在引用数据类型中的引用数据复制的是浅拷贝即对象中包含的对象/* * @Author: [jsh] * @Date: 2021-10-11 11:15:13 * @LastEditors: [jsh] * @LastEditTime: 2021-10-11 11:36:49 * @Description: *///ES6中半深拷贝的理解 //引用数据类型中的基本数据类型复制是深拷贝//而在引用数据类型中的引用数据复.

2021-10-12 19:41:28 109

原创 CSS——top和margin-top

1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。...

2021-10-12 11:43:38 565

原创 CSS——margin的参数

margin： 4 （1）一个参数值，将用于全部的四边。 5 （2）两个参数值，第一个用于上－下，第二个用于左－右。 6 （3）三个参数值，第一个用于上，第二个用于左－右，第三个用于下。 7 （4）四个参数值，将按上－右－下－左的顺序作用于四边。 8 再如：有人问CSS 居中如何实现。那可以这么写： 9 10 margin:0 auto ;11 margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right 12 因为0 auto，表示上下..

2021-10-12 11:25:50 1534

原创 CSS——CSS权重比较

通配符，顾名思义就是通用的匹配字符，它能够代替任意字符. 主要有：. 问号（?）代表任意单个字符. 星号（*）代表任意多个字符. 波形符（~）代表波浪符右侧的通配符转换为普通字符（即不是作为通配符使用）....

2021-10-12 09:46:53 119

原创 Vue——什么是W3C标准？

万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息

2021-10-11 20:03:02 362

原创 Vue——怎么用Vue设置按钮切换？

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按.

2021-10-11 19:52:08 812

原创 Vue——什么是setter、getter

对象有两种属性：数据属性: 就是我们经常使用的属性访问器属性: 也称存取器属性（存取器属性就是一组获取和设置值的函数）数据属性就是a和b；get和set就是关键字它们后面各自对应一个函数，这个函数就是上面红字部分所讲的，存储器属性。get对应的方法称为getter，负责获取值，它不带任何参数。set对应的方法为setter，负责设置值，在它的函数体中，一切的return都是无效的。...

2021-10-11 19:34:34 3210

原创 Vue——什么是Object.defineProperty?

1.1 语法：Object.defineProperty(obj, prop, descriptor)参数说明：obj：必需。目标对象 prop：必需。需定义或修改的属性的名字 descriptor：必需。目标属性所拥有的特性返回值：传入函数的对象。即第一个参数obj；针对属性，我们可以给这个属性设置一些特性，比如是否只读不可以写；是否可以被for…in或Object.keys()遍历。给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述。当修改或定义对象的某个属

2021-10-11 19:31:25 140

原创 Vue——Vue双向数据绑定原理

1. vue双向数据绑定是通过数据劫持，并结合发布-订阅模式的方法来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变2. 核心：关于vue实现双向数据绑定，其核心是Object.defineProperty()方法发布-订阅模式发布-订阅模式和观察者模式很像，但是不同的是，观察者模式只有两个角色，而且Obsever是知道Subject的，但是在发布-订阅模式中，他们两却彼此不了解，他们是在一种类似于中间件的帮助下进行通信的，换句话说，还有.

2021-10-11 19:20:11 192

原创 Vue——key的作用

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做可以使 Vue 变得非常快。但是有些时候，我们却不希望vue复用，这时候Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key。...

2021-10-09 14:15:56 79

原创 Vue——vue生命周期是什么？钩子函数呢？

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。vue生命周期可以分为八个阶段，分别是：beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）下面我们就来分别看看vue生

2021-10-09 11:45:01 225

原创 Vue——为什么在大型项目中data是一个函数而不是一个对象？

组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们

2021-10-09 09:37:59 155

原创 Vue——v-show 与 v-if 的区别

v-show 不支持 v-else1.v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。2. v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。3. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做；直到条件第一次变为真时，才会开始渲染条件块。4. v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果...

2021-10-09 09:31:16 81

原创 es6——对promise静态方法的封装

functiongetPromise(url,method='get',data=null){returnnewPromise((resolve,reject)=>{$.ajax({url:url,method:method,data:data,success(res){resolve(res)...

2021-09-29 20:18:48 120

原创 es6——异步编程的解决方案 Generator ，async

1.Generator 是ES6提供的一种异步编程解决方案，语法不同于普通函数；简单的把Generator理解为一个状态机，封装了多个内部状态。执行Generator函数会返回一个迭代器对象，可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。Generator函数有两个特征：1.function关键字与函数名之间有个星号；2.函数内部使用yield表达式function*helloWorldGenerator(){yield'1'...

2021-09-29 20:00:32 106

原创 es6——异步编程的解决方案 Promise

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避...

2021-09-29 19:26:47 172

空空如也

空空如也