凉风有信、-优快云博客

原创 Vue中Non-props属性是什么

先看一个通过props接收父组件参数的栗子： const app = Vue.createApp({ template: ` <div> <counter msg="hello" /> </div> ` }); app.component('counter', { props:['msg'], template: ` <div>Counter</div&gt

2021-06-04 19:51:04 423 1

原创 Leetcode69：x的平方根

本人太菜了，哎！算法真的拉跨，无奈只能刷一些简单题目，望有一日成为算法大佬…/** * @param {number} x * @return {number} */var mySqrt = function(x) { var i = 1; var result; while(true){ if(i * i == x){ return i; } if(i*i > x){

2021-06-03 21:20:35 237

原创 Vue中单项数据流的理解

补充一下之前的知识：params：先看一个栗子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 16</title> <script src="http

2021-06-03 20:55:15 498

原创 Vue中组件间传值及传值校验

见案例： const app = Vue.createApp({ template: ` <div><test content="hello world" /></div> ` }); app.component('test', { props:['content'], // 接收父组件传来的值 template: `<div>{{content}}</div>` }); cons

2021-06-03 16:22:10 721 1

组件的理念：将许多复杂的东西拆分为小的东西，然后再组装在一起，从而降低项目维护的成本<!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,

2021-06-03 15:26:22 480

原创 Vue中表单双向绑定指令的使用

v-model：input框中的双向绑定： const app = Vue.createApp({ data(){ return { message:'hello' } }, template: ` <div> {{message}} <input v-model="message" /> </div>

2021-06-02 18:14:07 583

原创 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"> &lt

2021-06-02 17:13:19 279

原创 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&gt

2021-06-02 15:54:08 1624 2

原创 Vue中条件渲染

一个案例说清除条件渲染：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 10</title> <script src="https://unpkg.com/

2021-06-01 17:54:40 125

原创 Vue中样式绑定语法

class方式书写样式：数据中通过对象的方式存储样式：<!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=

2021-06-01 17:35:10 265

原创 Vue中数据，方法，计算属性和侦听器

数据：Vue中数据就是data(){}里面的东西方法：Vue中方法就是methods注意：methods里面的this指向的就是vue的实例（仅限于methods里面普通函数的this） const app = Vue.createApp({ data(){ return { message:1 } }, me

2021-06-01 16:44:50 249 2

原创 Vue中常用模板语法讲解

插值表达式：插值表达式就是 {{}}举例：见代码： const app = Vue.createApp({ data() { return { message:'hello wrold' } }, template: '<div>{{message}}</div>' });

2021-06-01 15:36:47 301

原创 Vue中生命周期函数

见图片： // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { message: 'hello world' } }, // 在实例生成之前会自动执行的函数 beforeCreate() { console.log('beforeCreate') }, // 在实例生成之后会自动执行的函数 created(

2021-06-01 14:30:51 166

原创 Vue中的应用和组件的基本概念

// createApp 表示创建一个 Vue 应用, 存储到 app 变量中 // 传入的参数表示，这个应用最外层的组件，应该如何展示 // MVVM 设计模式，M -> Model 数据， V -> View 视图， VM -> ViewModel 视图数据连接层 const app = Vue.createApp({ data() { return { message: 'hello world' } }, ..

2021-06-01 13:57:42 262

原创 Leetcode66：加一

含泪错4次！！！/** * @param {number[]} digits * @return {number[]} */var plusOne = function(digits) {//化为数字写法：行不通 // 定义数组的和 s // let s = 0; // // 利用循环将数组中的单个项化为数字加在一起 ------ 这种写法会失真 // for(var i = 0; i < digits.length; i++){ //

2021-05-31 22:20:40 96 2

原创 Leetcode1859：将句子排序

/** * @param {string} s * @return {string} */var sortSentence = function(s) { // 字符串化为数组 s = s.split(' '); // 进行排序 s.sort((a,b) => Number(a.slice(-1)) - Number(b.slice(-1))); // 再换成字符串用正则表达式删除数字 return s.join(' ').replace(/.

2021-05-30 11:08:01 210 1

原创 Leetcode53：最大子序和

/** * @param {number[]} nums * @return {number} */var maxSubArray = function(nums) { let ans = nums[0]; let sum = 0; for(const num of nums) { if(sum > 0) { sum += num; } else { sum = num; .

2021-05-27 22:29:08 103

原创 Leetcode14：最长公共前缀

/** * @param {string[]} strs * @return {string} */var longestCommonPrefix = function(strs) { // 数组为空直接返回 if(strs.length == 0) return ""; // 选出数组的第一个元素 --- 默认它就是要找的公共前缀 let ans = strs[0];// 用循环 --- 使默认的公共前缀跟数组的每一个元素进行比较 for(let .

2021-05-26 21:01:11 97

原创 Ajax基础：

Ajax是什么：1、Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的简写2、 Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据3、XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式，XML 现在已经不怎么用了，现在比较常用的是 JSON4、Ajax 其实就是浏览器与服务器之间的一种异步通信方式5、使用 Ajax

2021-05-25 18:36:03 1698

原创 Leetcode21：合并链表

/** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } *//** * @param {ListNode} l1 * @param {ListNode} l2 * @return {ListNod..

2021-05-25 17:13:10 133

原创 leetCode28：实现strStr()

代码演示： var strStr = function(haystack, needle) { if(needle == '') return 0; // 如果输入needle是空的情况，直接结束运行返回0 var arr = needle.split(''); // 将needle拆分为一个数组 var array = haystack.split(''); // 将haystack拆分为数组 var result=-1; ..

2021-05-24 20:19:12 81

原创 LeetCode27：移除元素

var removeElement = (nums, val) => { for (let i = 0; i < nums.length; i++) { if (nums[i]===val) { nums.splice(i, 1) i-- // i 要在这里减 1,因为i不减1会自动跳过删除元素的下一个元素，从下下个元素开始，所以要减1 } } return nums.length}...

2021-05-23 16:18:55 78

原创牛客JS8：删除第一个元素

function prepend(arr, item) { var array; // console.log(array); [...array] = arr; // console.log(array); array.unshift(item); return array;}

2021-05-22 20:43:53 98

原创牛客JS7：添加元素

function prepend(arr, item) { var array; // console.log(array); [...array] = arr; // console.log(array); array.unshift(item); return array;}

2021-05-22 20:40:14 61

原创牛客JS8：添加元素

function prepend(arr, item) { var array; // console.log(array); [...array] = arr; // console.log(array); array.unshift(item); return array;}

2021-05-22 20:35:36 70

原创牛客JS6：删除数组最后一个元素

function truncate(arr) { var array; // console.log(array); [...array] = arr; // console.log(array); array.pop(); return array;}

2021-05-22 20:32:30 104

原创牛客JS5

function append(arr, item) { var array; // console.log(array); [...array] = arr; // console.log(array); array.push(item); return array;}

2021-05-22 20:28:37 73

原创 CSS3：

CSS3：属性选择器：选择符简介E[att]选择具有att属性的E元素E[att=“val”]选择具有att属性且属性值等于val的E元素E[att^=“val”]匹配具有att属性、且值以val开头的E元素E[att$=“val”]匹配具有att属性、且值以val结尾的E元素E[att*=“val”]匹配具有att属性、且值中含有val的E元素属性选择器的权重要高于标签选择器类选择器、属性选择器、伪类选择器，权重为10<!D

2021-05-22 16:02:55 299

原创上下文规则：

立即执行函数（上下文规则4）：使用立即执行函数时，上下文就是window对象。 var a = 1; var obj = { a: 2, fun: (function(){ var a = this.a; // 立即执行函数里面的this指的是window，因此这里的a就是1 return function(){ console.log(a + this.a);

2021-05-22 15:45:38 222

原创包装类：

什么是包装类：Number() 、String() 、 Boolean() 函数分别是数字，字符串，布尔值的包装类。很多编程语言都有“包装类”的设计，包装类的目的就是为了让基本类型可以从它们的构造函数的prototype上获得方法。见案例： var a = new Number(123); var b = new String('慕课网'); var c = new Boolean(true); console.log(a); // N

2021-05-22 15:11:13 74

原创 prototype全解全析

prototype和原型链查找：任何函数都有 prototype属性， prototype是英语“原型”的意思。prototype属性值是个对象，它默认拥有constructor属性指回函数。举个栗子： function sum(a,b){ return a+b; } console.log(sum.prototype); // {constructor: ƒ} console.log(typeof sum.prot

2021-05-22 12:52:46 1182 5

原创用new调用函数的四步走

JS规定，使用new调用函数会进行四步走：1、函数体内会自动创建出一个空白对象。2、函数的上下文（this）会自动指向这个对象。3、函数体内的语句会执行。4、函数会自动返回上下文对象，即使函数没有return语句。下面进行解释四步走：用一下代码进行举例： function sun() { this.a = 3; this.b = 5; } var obj = new sun();

2021-05-21 17:11:10 1286

原创百度歌单案例

为了巩固ES6的语法，写了这个案例下面是HTML 和 JS部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, in

2021-05-18 23:15:13 612

原创数组去重和随机样本

数组去重：// 数组去重： var result = []; var arr = [1,2,1,2,3,1,4,9,6,4,7]; for(var i = 0; i < arr.length; i++){ if(!result.includes(arr[i])){ result.push(arr[i]); } } console.log(re

2021-05-17 21:12:29 94

原创用while实现一个简单的猜数字小游戏

中午闲着没事干，就写个小游戏吧，这个小游戏游戏规则就很简单，就是系统随机产出一个整数，然后用户输一个数字，如果输入的数字大于系统的整数就弹出输大了，如果小于，就弹出输小了，规则很简单就这样。下面见代码：// 随机产一个数字1到100之间： var answer = parseInt(Math.random()*100);// 定义最大值，最小值，防止后面用户输入的数字出现逆化 var min = 1; var max = 100;// 定义循环的条件，一

2021-05-17 12:57:42 1140

原创 JS中正则表达式：

JS中正则表达式：注意：正则表达式都是对字符串而言！正则在默认情况下区分大小写；什么是正则表达式：有以下两种字符组成的文字模式：1、普通字符（例如 26个英文字母、数字等）2、特殊字符（有特殊含义的，例如 .\ 等）说明：该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为以作为一个模板，将某个字符模式与所搜索的字符串进行匹配。正则的三种模式修饰符：忽略大小写：i — ignoreCase 全局匹配：g — global 多行匹配：m —

2021-05-17 10:56:05 554

原创深浅克隆

浅克隆：浅克隆就是只克隆对象的表层，如果对象的某些属性值又是引用类型值，则不进一步克隆它们，只是简单的传递它们的引用。见代码： var obj1 = { a: 2, b: 4, c: [12,34,18] }; var obj2 = {}; for(var k in obj1){ obj2[k] = obj1[k]; }

2021-05-17 10:53:20 98

原创用CSS实现幻灯片

<!doctype htm l><html> <head> <style> img { display: none; width: 100px; height: 100px; } input:checked + img { display: block; } input { position: absolute; left: -9999

2021-05-13 13:27:50 664

原创 HTML5

HTML5H5新增多媒体标签audio音频标签：HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的1、音频格式当然，aduio元素支持三种音频格式格式IE9firefox3.5Opera10.5chrome3.0safari3.0ogg vorbis可可可mp3可可可wav可可可语法格式：<audio src="文件地址" controls="controls"><

2021-05-07 19:21:05 68

原创 Flex布局：

Flex布局：讲解：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html1、flex解释1、flex布局为flex box的缩写，意思为弹性布局2、块级元素和行内元素都可以使用flex布局2、Webkit内核的浏览器，需要加上-webkit前缀2、flex容器属性首先父元素要加上display:flex;(1)flex-direction此属性决定主轴的方向.flex{ flex-direction:row;//（默

2021-05-07 19:20:06 306

空空如也

空空如也