- 博客(59)
- 收藏
- 关注
原创 使用vue搭建一个项目
1.首先确保安装了node.js环境。百度搜索"node.js",进入官网,下载自己操作系统对应的版本(建议稳定版本)就好,这里我是windwos 10版本。2.安装好了之后,打开power shell,输入node -v,查看是否安装成功。同样的npm(node.js的包管理工具)会自动安装上。同样输入npm -v 查看版本。3.使用npm安装vue命令行工具(CLI)。输入"npm install -g @vue/cli"就OK了。4.然后开始创建vue项目,我们只需要输入“..
2022-03-08 14:56:28
833
原创 JS中的||和&&
JS中的||符号:只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。JS中的&&符号:只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;只要“&&”前面是true,无论“&&”后面是true还是false,
2021-12-29 14:31:12
474
原创 vue中的computed
computed的含义:在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要 的请求,还可以利用computed给子组件的data赋值。使用computed的原因:在vue中,一些简易的计算可以直接在模板中计算,如:{{ number + 1 }};但是在模板中如果有太多复杂的计算难以维护;所以对于任何复杂的 ...
2021-12-24 15:27:30
1028
原创 vue中的watch
watch:在vue中,使用watch来响应数据的变化用法一:new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } })直接写一个监听处理函数,当每次监听到cityName 值发生改变时,执行函数。也可以在所监听的数据后面直接加字符串形式的方法名:watch: { ci.
2021-12-24 14:56:46
143
原创 vue中的filter
filter含义:在Vue中filter过滤器是一个非常强大的功能。个人觉得称它为加工车间会更加贴切一 些。过滤器可以用来筛选出符合条件的,丢弃不符合条件的;加工车间既可以筛选, 又可以对筛选出来的进行加工。filter作用:对值进行筛选加工。filter使用位置和方式: {{ msg | filterA }}双括号插值内。 <h1 v-bind:id=" msg | filterA">...
2021-12-24 14:25:11
1014
原创 flex的含义
flex的含义:flex是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可 选。flex-grow :flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如 果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一 个项目的flex-gro...
2021-12-23 15:47:28
1718
原创 display与float的区别
displaydisplay属性display特性块级元素与行级元素的转变控制块元素排到一行控制元素的显示和隐藏floatfloat属性display:inline-block和float的区别display可以让元素排在第一行,并且支持宽度和高度代码实现起来方便位置方向不可控,会解析空格IE6.IE7上不支持float可以让元素排在一行并制作宽度和高度,可以决定排列方向float浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添..
2021-11-30 09:37:19
1012
原创 css里的position、overflow
position常见的四个值:static、relative、absolute、fixedstatic:静态定位是position的默认值,元素框正常生成,也就是没有定位时的正常显示。relative:相对定位相对定位,最常见的使用方式有如下两种:使用方法一:元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表现为空白。使用方法二:把一个元素设置为position: relative;可以使该元素的子元素相对该元素绝对定位。absolute:绝对定位元素从文档流删除...
2021-11-28 23:02:23
226
原创 vscode不能运行yarn命令
一、权限问题如果安装完yarn后,直接输入命令进行执行会出现报错,例如查看版本号:yarn -v由于vscode中的集成终端使用的是powershell,所以我们要设置一下powershell的执行权限。1、在搜索框中搜索powershell,以管理员身份运行或者--进入C:\Windows\System32\WindowsPowerShell\v1.0目录,找到powershell.exe文件。右键该文件,以管理员权限执行。2、执行set-ExecutionPolicy Rem.
2021-11-24 23:50:16
4845
1
原创 Vue服务器渲染Nuxt
安装第一步:确保已安装yarnyarn create nuxt-app <project-name>它会问你一些问题(名称、Nuxt 选项、UI 框架、TypeScript、linter、测试框架等)。要了解有关所有选项的更多信息,请参阅create-nuxt-app 文档,回答完所有问题后,它将安装所有依赖项。第二步:导航到项目文件夹,并启动它:cd <project-name>yarn dev该应用程序现在在http://localhost:3
2021-11-24 23:42:10
284
原创 npm run dev报错
报错信息如下:A complete log of this run can be fund in: C\Users\administrator\AppData\Roaming\npm-cache_logs\2020-04-10T13_12_31_614Z-debug.log解决办法:1.将node_modules删除2.清理缓存3.重新安装依赖
2021-11-23 23:42:21
205
原创 /deep/深度选择器
在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候就不会影响到子组件的样式。我们在加了scoped之后样式会自动添加一个hash值。比如下面所示:当你想在父组件中修改子组件的样式,就需要使用/deep/。比如下面所示:>>>、/deep/以及::v-deep都可以在父组件中修改子组件的样式。一些预处理器(例如Sass)可能无法正确解析...
2021-11-23 23:28:35
312
原创 当保存vue项目时自动将双引号变成单引号,不必要的分号去掉
在项目根目录下创建.prettierrc文件,并在文件中写入一下内容{ "tabWidth": 2, "useTabs": false, "singleQuote": true, "semi": false}
2021-09-29 21:59:20
1151
原创 package.json配置详解
每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。下面是一个最简单的package.json文件,只定义两项元数据:项目名称和项目版本。{ "name" : "xxx", "version" : "0.0.0",}package.json文件就是一个JSON对象,该对象的每一个成员就是当前项目..
2021-09-29 21:48:04
2096
原创 tsconfig.json(使用typescript)配置详解
{ // 用来配置编译选项 "compilerOptions": { "target": "esnext",// 生成js 的版本,下一版本 "module": "esnext", // 生成的module的形式,esm,cmd,amd啥的 "strict": false, // 是否严格模式 "jsx": "preserve", // jsx用于的开发环境,preserve/react/RN "importHelpers": true, // 指定是否引入t...
2021-09-29 21:36:21
922
原创 首次使用git并创建公钥并将gitee上的代码克隆到本地
1.配置 git (1) 打开你要放置项目的本地路径,右键选择Git Bash Here(2) 初始化用户名:$git config --global user.name "用户名" (3) 初始化邮箱:$git config --global user.email "邮箱地址" 注:如果用户名或邮箱输入错误需要重置,使用以下命令修改: $git config --global --repalce-all user.name "用户名"...
2021-09-01 21:54:09
558
原创 for of
问题:遍历数字下标的数组或数组对象 a.普通for循环: (1)优点:既可遍历索引数组,又可遍历类数组对象(arguments) (2) 缺点:没有可简化的空间 b.forEach: (1).优点:可以配合ES6的箭头函数,很简化 (2).缺点:无法用于遍历类数组对象 解决:今后只要遍历数字下标的东西,都可用for-of代替普通for循环和f...
2021-07-10 11:05:45
60
原创 call,apply,bind
替换this:如果系统自动指定的this对象不是我们想要的,我们就可主动更换this指向的对象(1).在一次调用函数时,临时替换一次函数中的this为指定对象。 调用 i.要调用的函数.call(替换this的对象,实参值1,......) ii.3件事: a.立刻调用一次点前的函数 b.自动将.前的函数中的this替换为指定的新对象 ...
2021-07-08 16:18:09
70
原创 Object.create()
(1)什么是:基于一个现有父对象,创建一个新的子对象继承父对象(2)何时:今后,如果想要创建一个子对象,继承父对象,但是又没有构造含糊时,就不能使用new,只能用Object.create()(3)如何: var 新子对象 = Object.create(新对象,{ 属性名:{ value:属性值 writable:...
2021-07-08 14:55:28
58
原创 let变量的知识点
(1)问题:var的两个问题: i.会被声明提前---打乱程序正常的执行顺序 ii.没有块级作用域---代码块内的变量会超出代码块的范围,影响外部的变量 块级作用域:指除了对象{}和function的{}之外,其余if else、for、等程序结构的{}范 围,在其他语言中称为块级作用域。...
2021-07-08 11:43:15
591
原创 严格模式的知识点
(1)什么是严格模式:比旧的JS运行机制要求更加严格新运行机制(2)为什么:旧的JS中有很多广受诟病的缺陷(3)何时:今后,在企业中,所有代码都要运行在严格模式下。‘ (4)如何:当前代码的顶部添加:“use strict” (5) 新规定:4个 i.禁止给未声明的变量赋值:a.旧的JS中如果强行给未声明的变量赋值,不会报错而 ...
2021-07-06 10:31:59
137
原创 面向对象继承
(1)问题:只要将方法定义放在构造函数中,那么,每次new时都会执行function,就会反复创 建相同函数的多个副本!--浪费内存(2)解决:如果将来发现多个子对象都要使用相同的功能和属性值时,都可以用继承来解决(3)什么是继承:父对象中的成员,子对象无需重复创建,就可以直接使用!就像使用自己的成 员一样(4)如何:js中的继承都是通过原型对象实现的 a.什么是原...
2021-07-05 14:21:30
60
原创 面向对象的知识点
1.问题:程序中将来会保存大量的数据。而大量数据如果零散的随意管理,极易出错!而且用着不方便2.解决:今后的程序中,都是用面向对象的方式。来管理大量的数据3.什么是面向对像:程序中会将描述一个事物的多个属性和功能集中保存在一个对象结构中,再起一个名字。4.优点:及其便于大量数据的管理维护5.面向对象的三大特点:封装、继承、多态6.封装: (1)什么是封装:创建一个对象,集中保存现实中一个事物的属性和功能 (2)为什么:及其便于大量数据的管理维护(3)何时用:今后,只要使...
2021-07-05 10:48:06
72
原创 闭包的一些知识点
1.只要希望给一个函数保护一个可反复使用的专属变量,又防止这个变量被外界篡改时,都用闭包2.闭包三步:(1)用外层函数妈妈包裹要保护的变量和内层函数 (2)外层函数妈妈用return把内层函数孩子返回到外部 (3)外部想使用内层函数的人,必须调用外层函数,才能获得return出来的外层函 数对象。并将内层函数保存在一个变量中反复使用。3.形成闭包的...
2021-07-02 17:12:57
134
原创 作用域以及作用域链
(1)什么是作用域:a.一个变量的可作用范围。b.专门保存 变量的对象(2)作用:避免函数内外的变量之间互相干扰(3)JS中包括2级作用域: a.全局作用域:程序的任何一个角落都属于全局范围 i.保存着所有的全局变量 ii.保存在全局的变量,可在程序的任何一个角落被使用(没有局部变量覆盖 ...
2021-07-02 12:46:26
88
原创 匿名函数以及回调函数知识点
匿名函数:1.含义:在定义函数时,不指定函数名的函数2.何时使用:(1)绝大多数回调函数,都用匿名函数 (2)避免使用全局变量时,都用匿名函数自调回调函数:1.含义:我们自己定义的函数,但是自己不调用,而是交给别的函数,由别的函数自调用!例如:arr.sort(function(a,b){return a - b}) ()中的function,虽然是我们自己定义,但是不是我们自己调用,因为我们不知道何时调用, ...
2021-07-01 20:21:42
684
原创 重载的知识点
1.含义:相同函数名,不同的形参列表的多个函数,在调用时,可根据传入的实参值不同 自动选择匹配的函数调用。2.作用:减少函数名的个数,减轻调用者的负担3.何时使用:今后,只要一件事,可能根据传入的实参值不同,而执行不同的操作流程时 都要用重载。arguments:1.含义:每个函数内,一定都包含一个arguments,可直接使用的,专门接受所有传入函数的实参值 的类数组对象2.类数...
2021-07-01 19:05:53
153
原创 函数的一些知识整理
创建函数的三种方式: 1.function 函数名(形参列表){函数体;return 返回值} //会将声明提前 例如:function fun(a,b) {} 2.var 函数名 = function(形参列表){函数体;return 返回值}//不会被声明提前 例如:var fun = function(a,b){} ...
2021-06-30 20:19:30
148
原创 Context
如果两个组件是远房亲戚(比如:嵌套多层)可以使用Context实现组件通讯Context组件提供了两个组件:Provider和ConsumerProvider组件:用来提供数据Consumer组件:用来消费数据const {Provider,Consumer} = Raect.createContext()class Cpp extends React.Component{ state={ name='张子枫' } ...
2021-06-22 19:16:42
51
原创 组件的props
组件是封闭的,要接受外部数据应该通过props来实现props的作用:接受传递给组件的数据传递数据:给组件标签添加属性 例如:<Hello name='jack'/> 渲染: ReactDOM.render(<Hello name='jack' />,document.getElementById('root’))接受数据:1.函数组件通过参数props接受数据:const Hello = (props) => { ...
2021-06-22 11:05:11
232
原创 快速搭建一个react项目并成功运行
第一步: 全局安装create-react-app,cmd或终端中输入npm install -g create-react-app;
2021-06-15 09:56:57
146
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人