- 博客(57)
- 收藏
- 关注
原创 发布订阅模式
发布/订阅模式(publish-subscribe pattern)事件总线就是一个vue实例用事件总线需要安装vue-busnpm install vue-bus --save在一个组件中发布,在另一个组件中订阅created钩子函数订阅<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.bootc
2022-05-28 22:01:33
99
原创 响应式原理
1、数据驱动1、什么是数据驱动?- 数据驱动视图,改变数据,模板自动刷新- 不需要操作DOM1.1、数据响应式1、什么是数据响应式?- 模板基于数据驱动,改变数据,模板自动刷新2、Jquery操作DOM,vue操作数据,靠数据驱动视图1.2、双向绑定1、视图随数据改变而改变,数据也随视图改变而改变2、可以使用v-model在表单元素上创建双向数据绑定。2、响应式原理vue2与vue3均有自己的响应式原理2.1、Vue2.x响应式原理1、官方文档:https://cn
2022-05-28 21:18:38
138
原创 仓库中的state、mutation、action、getter
state1、在仓库中定义状态2、在组件中使用仓库中定义的状态{{ $store.state.count }}3、将仓库中的状态映射成组件中的计算属性mapState 辅助函数1、导入import { mapState } from "vuex"2、将仓库中的状态映射成组件中的计算属性computed:{ //表示自己定义一个计算属性count count(){ //值是来自仓库中的count return $store.state.count; }}.
2022-05-26 17:53:23
215
原创 vuex安装使用步骤
1)安装vuex直接安装会安装最新版本(4.x)npm i vuex安装指定版本npm i vuex@3.6.22)安装完成,创建store目录store目录下放仓库仓库中放状态(共享数据)目录结构如下:3)调试工具4)使用(参照官网 / v3.x)//引入import Vue from 'vue' //该行代码可以通过Vue.use()自动导入import Vuex from 'vuex'//Vuex是插件,插件都需要useVue.use(Vuex)//通
2022-05-25 20:33:55
3494
原创 vue全家桶版本对应关系
vue2对应关系:2 ===>3 ===> 3vue版本:^2.6.14vue-router:“^3.5.2”vuex版本:3.xvue3对应关系:vue3 ===> vue-router4 ===> vuex4
2022-05-25 19:00:18
2163
原创 安装vue调试插件
插件:vue-devtoolsvue_devtools_chrome_5.3.4百度网盘下载链接:https://pan.baidu.com/s/1xXHRHX9UByEMEDkXiDlwgA提取码:bmtwchrome示例:设置:更多工具→扩展程序(chrome://extensions/)将vue_devtools_chrome_5.3.4.crx文件拖到chrome扩展程序页面即可...
2022-05-14 20:48:45
470
原创 Sass基础
Sass是为了让我们更优雅地写CSS,可以让我们使用编程语言中的特性来写CSS浏览器不能识别Sass,写好的Sass需要编译成CSSvscode使用插件easy sass。Sass写法:文件后缀:.scss例:$fs:10px;$声明变量fs:变量名;10px:变量值...
2022-04-05 16:35:20
497
原创 JS高级十五、生成器(ES6)
问题1: 生成器是什么?Generator是ES6中新增的一种函数控制一种异步编程解决方案是一个函数问题2: 生成器函数和普通函数的区别?function后面有一个*函数体内部使用yield表达式定义不同的内部状态生成器函数的返回值是一个生成器(生成器是一种特殊的迭代器)问题3: 生成器的作用是什么?控制函数暂停(yield可暂停,next可启动)解决异步问题Generator函数是分段执行的,调用next方法函数内部逻辑开始执行,遇到yield表达式停止,返回 {val
2022-03-17 22:00:56
254
原创 JS高级十四、迭代器
迭代器是一个对象迭代器是一个对数据解构进行遍历的对象迭代器是一个需要满足迭代器协议的帮我们对数据解构进行遍历的对象在JS中这个协议就是一个特定的next方法可迭代对象和迭代器不是一个概念一个可迭代对象需要实现iterable protocol协议要求必须实现@@iterator方法,在JS代码中,我们使用Symbol.iterator访问@@iterator只要使用for of可以遍历的,都是可迭代对象。生成器(ES6)控制函数暂停是一个函数function前面有一个*可以通过y
2022-03-17 20:57:58
294
原创 JS高级十五:JSON
1、JSON什么是JSON?JSON:JavaScript Object NotationJSON是服务器响应给客户端的数据格式也可以把JSON数据给服务器JSON是客户端与服务器之间通信的一种数据格式JSON的语法要求:支持的数据类型:数字、字符串、布尔值、null值、数组、对象不支持的数据类型:函数、undefined对象的key必须用双引号包起来JSON中没有注释可以通过某些网站进行格式化校验常见格式:第一种:"hello json"第二种{ "nam
2022-03-17 16:46:12
779
原创 JS高级十二、Proxy-Reflect
1、ProxyObject.defineProperty(obj, prop, descriptor)返回值:被传递给函数的对象。参数obj要定义属性的对象prop要定义或修改的属性的名称或Symboldescriptor要定义或修改的属性描述符监听对象中的name属性:let obj = { name:"jerry", age:20 }Object.defineProperty(obj,"name",{ get:function(){
2022-03-15 21:07:39
133
原创 JS高级十一、ES6
1、对象中属性和方法的简写属性的简写简写前简写后uname: unameunameage: ageage方法的简写简写前简写后fn:function(){console.log(“fn…”)}fn(){console.log(“fn…”)}2、数组的解构和对象的解构解构的目的:从数组或对象中快速获取数据1、数组的解构赋值:let names = ["aa","bb","cc"];let [x,y,z] = names;
2022-03-14 22:22:12
859
原创 JS高级八、对象
一切都是对象对象是属性的无序集合创建对象1、new Object创建let obj = new Object();2、字面量形式创建let obj = {...}3、通过new一个类(构造器)可以得到一个对象let num = new Number(110);4、通过打点的方式可以将基本数据类型的变量包装成对象let str = "hello"; //str不是对象str.toUppercase(); //str会包装成对象5、工厂函数创建对象其他访问一个对象..
2022-03-10 19:49:56
61
原创 JS高级六、this
this1、默认绑定独立函数调用就是所谓的默认绑定默认绑定时this指向全局对象window<script> function fn(){ console.log(this); } //独立函数调用 fn();</script>2、隐式绑定通过某个对象发起的函数调用称为隐式绑定,隐式绑定会将对象绑定到this上隐式绑定必须在调用的对象内部有一个对函数的引用<script> function fn(
2022-03-08 19:56:58
207
原创 JS高级七、ES6箭头函数
箭头函数1、将function变成箭头=><script> var fn = function(num1,num2){ return num1 + num2; } //将function变成箭头=> var fn = (num1,num2) => { return num1 + num2; }</script>2、如果形参只有一个,()可以不写<script>
2022-03-08 19:48:10
256
原创 JS高级四:IIFE
IIFE立即调用函数表达式Immediately Invoked Function Expression在定义函数时直接调用函数IIFE详细的写法请参考:https://blog.youkuaiyun.com/qq_42683219/article/details/104161466这里浅记一下对返回结果不进行处理的两种写法:写法一:(function fn(形参) { console.log("fn...");})(实参)写法二:(function fn(形参) { console.
2022-03-07 20:59:59
85
原创 JS高级一、预解析
1、代码段一个script标签就是一个代码段JS代码在执行时,是一个代码段一个代码段执行代码段彼此独立,上面的代码段报错了,不会影响下面的代码段下面代码段可以使用上面代码段中定义的数据,但上面代码段不能使用下面代码段中定义的数据JS代码的执行分两个阶段:预解析和执行,预解析结束后,才会进入到执行阶段2、预解析预解析期间做了什么?1、提升声明:var声明的变量和function声明的函数会被提升到代码段的最前面。2、变量的提升仅仅是声明,不包括赋值,函数的提升不只提升声明,也提升赋值(
2022-03-05 21:11:59
125
原创 十四、字符串
创建字符串通过字面量的形式创建 var str1 = "hello"; var str2 = ""; //空串,隐式转化成false通过new的形式创建 var str = new String("hello string");
2022-03-03 16:46:31
77
原创 十三、对象
对象对象中放的是属性,属性分属性名和属性值(key-value),key是键的意思,value是值的意思。对象,严格来说,{ }还不能表示对象。{ }中可以写很多代码,{ }可以称为一块,如果在{ }前加一个变量,此时这个{ }就表示一个对象其他的编程语言中对象需要new出来,但在JS中{ }就是一个对象对象是属性的无序集合key都是字符串类型,只是不需要引号引起来属性值可以是任意数据类型,如果属性值是函数,此时,这个函数叫方法,方法也是属性数组是特殊的对象,键是从0开始的索引创建对象
2022-03-03 16:40:17
124
原创 十二、hanshu
函数在JS中,函数是JS的核心。在JS高级中,最主要的就是函数。在JS中,函数是引用数据类型,引入数据类型是存储在堆区,在栈区保存了堆区所对应的地址。1、创建函数在JS中创建函数有两种形式:1)函数声明 function 函数名称(参数列表){ 函数体 }2)函数表达式var 函数名称 = function(参数列表){ 函数体}注意:调用函数时解析器不会检查实参的类型,所以开发中一般需要对参数进行类型的检查函数的实参可以是任意的数据类型调用函数时,解析器不会
2022-03-03 16:16:10
100
原创 十一、数组(JS)
Js中的数据类型:√基本数据类型: number string boolean undefiend null√引用数据类型:数组,函数,对象I不同的数据类型,在内存中存储的地方是不一样的,基本数据类型是存储在栈区的,引用数据类型是存储在堆区。如下:在栈区保存了堆区数据|;的地址...
2022-03-03 15:48:11
419
原创 十、流程控制
1、流程控制区分语句和表达式:1、所有的有值的内容都是表达式2、语句是JS中定义好的,如:声明语句 var a = 110、if语句、for语句、while语句…3、通常情况下,语句建议使用分号结束,在JS中,分号也可以不加1、选择结构if语句,格式如下:if(条件表达式){ }else if(条件表达式){}else{}1、条件表达式的结果是布尔值,如果不是,则会发生隐式类型转化null、und、0、-0、NaN、空串会转化成false,其他都会转化成true
2022-03-01 20:27:45
68
原创 九、JS中的运算符
1、运算符两侧的操作数的数据类型一定是一样的,如果不一样,会发生隐式类型转化2、NaN与任何数据计算都是NaN,在关系运算符中任何数据和NaN进行比较,结果都是false1、运算符从功能上分类:1、算数运算符:+ - * / %优先级:* / % 高于+ -,如果优先级一样,则从左到右计算(左结合性)加号运算符:任何非数值(非字符串)的数据在参与加法运算之前,都会自动隐式转化成数值类型,再参与计算(true→1、null→0)任何数据和字符串相加,+就变成了字符串拼接运算符,不再.
2022-02-28 16:56:50
147
原创 八、JS数据类型转换
1、转换成String类型1、toString()方法布尔类型转字符串true.toString()数值类型转字符串(123).toString()不能处理null和undefined2、借String类型函数String(数据)可以将null和undefined直接转成字符串3、字符串拼接任何数据 + 字符 = 字符串 “hello” + 123;程序处理时,会先把非字符串数据,使用String,转换成字符串,再做字符串拼接2、转换成Number类型1、借Number类
2022-02-25 21:02:09
208
原创 七、JS数据类型
为什么会有数据类型的额概念?为了更加合理地使用内存空间1、基本数据类型1、string使用单引号或双引号包裹,单引号和双引号之间可以互相嵌套,但不能自己嵌套自己,如果确实需要嵌套,可以使用转义字符2、number在JS中,不区分小数和整数,都是number类型特殊数值:最大值:Number.MAX_VALUE最小值:Number.MIN_VALUE无穷大:Infinity 10 / 0无穷小:-Infinity -10 / 0非法数字 NaNJS中当对数值进.
2022-02-25 20:36:57
174
原创 六、JS命名规则和规范
1、标识符标识符就是一个单词,一个名字常量名、变量名、函数名都是标识符关键字、保留字也是标识符2、命名规则1、由字母、数字、下划线和$符号组成,不能以数字开头2、不能是关键字和保留字3、严格区分大小写3、命名规范1、变量名最好见名知意2、小驼峰命名法:首字母小写,后面单词的首字母需要大写**(推荐)**var userName = "wc"; // 小驼峰命名法var UserName = "xq"; // 大驼峰命名法var user_name = "xx"; // 下划线
2022-02-25 19:55:45
2251
原创 五、常量、变量
1、字面量(常量)1、字符串使用单引号或双引号包起来的2、数字不区分整数和小数3、布尔两个值:true、false4、Object(数组、对象)5、自定义常量ES6版本中新增的,通过const来自定义常量,常量名通常大写,如果由多个单词构成,可以用下划线隔开const PI = 3.14const MY_SITE = 'http://www.baidu.com'2、变量1、变量 = 变量名 + 变量值2、声明变量:var没有赋值的变量存储的是undefinedvar a
2022-02-25 19:46:04
173
原创 四、JS-ES5-输入输出
1、输入1、prompt<script> prompt("使用prompt进行输入"); </script>2、confirm<script> comfirm("使用confirm来进行输入"); </script>2、输出1、alert<script> alert("弹窗效果"); </script>2、console<script> conso
2022-02-25 19:18:39
364
原创 三、JS注释
JS注释1、单行注释://vscode快捷键:Ctrl + /2、多行注释:/* 注释内容*/vscode快捷键:alt + Shift +a3、文档注释1、函数描述/*** 计算两个数值的和* @param a {number} 参数1* @param b {number} 参数2* @returns {number} 两个数值的和* @author Sz 2022/05/20* @example* 6, 10 => 16*/2、文档描述/*** 文件名
2022-02-25 18:50:00
353
原创 二、写JS代码的三种方式
写JS代码的三种方式1、行内式格式:<button onclick="alert('hello js');">点我</button>2、内部JS(页内式)格式:<!-- type="text/javascript" 表示你写的脚本类型是JS --><!-- 如果不写,默认也是type="text/javascript" --><script type="text/javascript"> alert("hello js");&
2022-02-25 17:44:57
2179
原创 一、JS介绍
js是什么?首先,JavaScript是一门编程语言,和C、java、python一样,但和html、css不一样,他们不是编程语言。其次,JavaScript和Java没有半毛钱关系,只是为了蹭热度,原来叫liveScript,后来发行Java的SUN公司决定和研发javaScript的网景(netscape)公司合作这个项目,改名为JavaScript。ESECMAScript,简称ES,ECMA是欧洲计算机制造联合会,是一个组织,用来定义标准,这个组织推出来的标准就叫ECMAScript。JS
2022-02-25 17:20:55
580
原创 reset.css重置样式设置
内容一般有:/* 为什么不写“ * ”,“ * ”效率低,一般情况下,网页上用到什么标签,就写什么标签*/body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}/* text-align font-family有继承性 */body{text-
2022-01-19 20:52:25
538
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人