Denyiii-优快云博客

原创 vue(七)路由

一、前端路由的概念与原理 1.什么是前端路由前端路由就是：Hash 地址与组件之间的对应关系。2.SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。3.前端路由的工作方式 ① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 Hash 值发生了变化 ③ 前端路由监听了到 Hash 地址的变化 ④ 前端路由把当前 Hash 地.

2021-10-20 00:42:48 244

原创 vue(六)插槽

1. 什么是插槽插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。2. 插槽的使用在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符。示例代码如下：<template> <p>这是MyCom1组件的p标签</p>  <slot>.

2021-10-14 13:59:07 882

原创 vue(五)组件、自定义属性props

一、组件化开发组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。 App.vue 文件本质上就是一个 vue 的组件。二、vue 组件的三个组成部分每个 .vue 组件都由 3 部分构成，分别是：template -----组件的模板结构...

2021-10-08 00:02:42 4432 1

原创 vue(四)过滤器

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。但考虑以后会用到还是记录一下吧。1.过滤器过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。2.定义过滤器在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：const vm = new Vue({ el: ...

2021-10-07 02:57:47 223

原创 vue(三)watch 侦听器

1. 什么是 watch 侦听器watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。语法格式如下： const vm = new Vue({ el: '#app', data: { username: '' }, watch: { //监听username值的变化 //newVal是"变化后的新值"，oldVal是"变化之前的旧值" username

2021-10-06 00:20:22 255

原创 vue(二)指令

一、内容渲染指令 v-text用于将数据填充到标签中。指令的缺点：会覆盖元素内部原有的内容！ {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！ v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！二、属性绑定指令在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；简写是英文的 : 在使.

2021-10-05 07:15:00 94

原创 vue(一)特性、MVVM

一、vue 的特性 vue 框架的特性，主要体现在如下两方面： ① 数据驱动视图 ② 双向数据绑定1、数据驱动视图在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：当页面数据发生变化时，页面会自动重新渲染！注意：数据驱动视图是单向的数据绑定2、双向数据绑定在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内...

2021-10-05 00:22:43 456

原创 Generator 和 async

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

2021-09-29 19:45:13 233

原创 Web存储

1.Cookiecookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生于服务器端，保存于客户端，但是我们也可以通过js来产生cookie；通常通过js-cookie这个库来操作cookie。Cookie //创建一个cookie,7天后过期Cookies.set("name","this is a test cookie",{ expires: 7 }) //获取cookieconsole.log(Cookie.get('name'));

2021-09-26 21:33:36 201

原创 ES6模块化和CommonJS模块化区别

一、ES61.ES6模块中的导入导出值属于【动态只读引用】。2.对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。3.对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。4.编译时输出接口。二、CommonJS1.对于基本数据类型，属于复制。即会被模块缓存。同时.

2021-09-25 23:33:09 137

原创 Promise介绍

一、promise基本概念1.1 回调问题在平常敲代码中经常会遇到多层回调函数的相互嵌套问题。如下：这会使得代码耦合性太强，牵一发而动全身，难以维护。大量冗余的代码相互嵌套，代码的可读性变差。1.2 如何解决回调问题为了解决回调过深的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。1.3Promise 的基本概念Promise 是一个构造函数我们可以创建 Promise 的实例 const p = new ...

2021-09-22 00:02:28 199

原创 canvas画布

一、canvas介绍canvas 是 HTML5 提供的一种新标签。<canvas></canvas>canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。可以设置 width 和 height 属性，不要用 CSS 控制它的宽和高,会走出图片拉伸。直接在标签设置进行了。.

2021-09-15 21:05:41 311

原创 Ajax基础+模拟百度搜索

一、原生ajax最近在学习ajax，就弄了一个好玩的东西模拟导读搜索。虽说也不难，就是用来消化一下学到的知识。先简单地介绍一下ajax中的get和post方法吧get方法1.创建一个XMLHttpRequest类型对象 var xhr = new XMLHttpRequest();兼容写法：（虽然现在通常不会用到） if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();} else { xhr = n

2021-09-11 00:31:48 551

原创 JS闭包的作用与优缺点

一、什么是闭包闭包是指一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。简单来说就是指有权访问另一个函数作用域中变量的函数。举个例子：function fn() { var num = 10; function fun() { console.log(num); } fun();}fn();这就是一个闭...

2021-09-07 19:49:27 3331

原创数组迭代（遍历）方法

迭代(遍历)方法：forEach()、map()、filter()、some()、every()；1.forEach()对数组中的每一运行给定的函数,没有返回值，常用来遍历元素。array.forEach(function(value, index, arr){});value：数组当前项的值 index：数组当前项的索引arr：数组对象本身（下同）eg:var arr = [1, 2, 3]var sum = 0;arr.forEach(function

2021-09-02 18:16:59 988

原创构造函数和原型

目录1.概述2. 构造函数3.构造函数原型 prototype4.对象原型 __proto__5.constructor 构造函数6.原型链1.概述在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。ES6，全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现...

2021-09-02 00:34:21 337

原创 JS函数function

一.函数介绍函数：函数就是封装了一段可以被重复执行调用的代码块目的：就是让大量代码重复使用。二.函数使用函数使用分为两步：声明函数和调用函数// 1. 声明函数 // function 函数名() { // // 函数体 // }function sayHi() { console.log('hi~~'); }(1)function声明函数的关键字全部小写(2)函数是做某件事...

2021-08-28 16:54:24 167

原创 JS复杂数据类型Object

ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合。创建Object实例：使用构造函数创建，new Object()： var obj = new Object(); obj.name = 'zs'; obj.age = '20'; obj.sex = '男';使用对象字面量表示法:不同的属性之间用','分割，属性名和属性值之间用':'分割var person = { name : "ls",

2021-08-25 18:50:04 180

原创 JS基本数据类型

五种基本数据类型一、undefined未定义类型该类型只有一个值undefined。对未声明和未初始化的变量执行typeof操作符都返回undefined。实际上 undefined 派生自null值。undefined == null 结果为 true，null与undefined用途不同，null可以用来表示一个空对象，但是没有必要把一个变量的值显式设置为undefined。二、Null空引用数据类型该类型的取值只有一个，即null。null可以表示一个空对象的指针如果

2021-08-23 16:16:27 72

原创 linux介绍和常用操作

1.Linux系统简介 Linux是一套免费使用和自由传播的操作系统内核，是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统内核。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统内核。特点：开放性：特别是遵循开放系统互连(OSI)国际标准。多用户：操作系统资源可以被不同用户使用，每个用户对自己的资源(例如：文件、设备)有特定的权限，互不...

2021-08-22 22:14:17 127

原创阿里云部署

我就说说我用的方法吧。一、购买服务器首先是去买个服务器，购买成功后可以在控制台查看我们的云服务器公⽹IP地址。（我买的是最便宜的了，学生党消费不起。）二、远程登录⾸次登录我们要按要求重置密码，重置密码后，我们就可以利⽤远程登录⼯具进⾏登录即可使⽤该服务器，如果你使⽤的是windows操作系统，建议安装openssh⼯具或者使putty⼯具，使⽤ssh协议进⾏远程登录。如果你是mac环境，直接在终端中使⽤ ssh ⽤户名@ip 进⾏登录。我用的是Xshell，然后Xshe...

2021-08-18 21:49:52 63

原创重构百度页面

经过这几天的不懈努力，终于完成了百度的重构。虽然我只写了两个页面还有一个后台管理页面，不过后台管理是我瞎编的，找不到百度的后台管理是啥样子的，只能自己瞎写了，在网上看到一个觉得还不错的就模仿了一下。当然，添加了几个内容。其实页面早就写完啦，就是想分享上来不知道咋整，这几天才想到了阿里云，这个太难弄了，耗费了我一晚上的时间，这个晚点再说。分享下吧！http://106.15.39.195/hhh/。我写的是aboutbaidu.html，jiazhigu...

2021-08-18 00:06:07 88

原创 transform，过渡transition，animations动画

日常复习！transform先讲2D的吧2D转换位移 transform:translateX(100px)；x轴位移100pxtransform:translateY(100px)；y轴位移100pxtransform:translate(x,y);连写 x，y中间要用逗号隔开。xy都是要带单位的。可以和定位搭配实现盒子水平居中对齐。div{div{ position: absolute; t...

2021-08-16 18:29:13 312

原创浮动，定位，flex布局

最近在弄一个网站页面和后台页面，有好多知识点都生疏了，现在来复习一下吧。一、浮动浮动其实也没啥好讲的，就是左右浮动。但是在开发中老师忘记清除浮动导致元素失去对父元素的支撑，兄弟元素会顶上来。讲讲解决办法。Clear:both;1.书写位置：可以是下一个非浮动的兄弟节点2.在下一个位置新增一个兄弟<divclass=”clearboth”></div>Class.clearbothstyle.css 通常都是凡在公共样式里的，实现代码的共享...

2021-08-14 17:48:59 1394

原创 axure创建网页

最近发现一个好玩的东西。就是axure了。学习操作了下。弄出了一个简单的搜狗页面还有登录界面，该有的交互也弄了些。感觉挺好玩的，也扒拉下生成了html，好好看看。代码可能有点长，你忍一下qwq.<!DOCTYPE html><html> <head> <title>首页</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>.

2021-08-09 18:53:28 1935 3

原创前端笔记2表单

一表单form主要用于用户于web服务器进行交互action: URL 用来处理表单信息的服务器地址method: 浏览器用来提交表单的http方式，常用的get/postget ：通过这种方式提交的表单数据会被附加在链接上，通过"?"分割发送敏感内容不建议使用这种方式post：表单数据会存放在请求体，传递给服务器，name: 设置表单的名称target: _blank _self当method为post时，表单内容提交给服务器时的内容类型 enctype默认：ap...

2021-08-04 18:35:54 58

原创前端笔记1

老师讲了好多概念。把常见的几个标签说了下。好多啊，不想敲了。直接cv把qwqHTML&CSSHTML基本概念、语法、常见的标签、属性HTML5 ？新增的一些内容基础知识什么是HTML？超文本标记语言 1. 超文本：页面内包含的内容不仅仅是文本还可以包含图片、链接、音乐、视频等非文字元素。 2. 标记语言：不是编程语言 <div>div</div> <...

2021-08-02 19:59:23 70

m0_51371862的博客