手机随时阅读
新人专享大礼包¥24
命名视图项目中会遇到同级显示多个视图而且不属于嵌套关系时,就会用到命名视图。这样可以在界面中使用多个单独命名的视图。如果没有设置名字的route-view会默认为default。一个视图使用一个组件进行渲染,对于同一个路由,多个视图就需要我们使用多个组件。const router = createRouter({ history: createWebHashHistory()
路由同一个路由可以由多个动态段,比如/root/:name,如果匹配路径为/root/zss,那么$route.params就是为{ name:'zss' },除此之外,$route中还可以使用$route.query或者$route.path。路由参数中使用正则表达式,路由中如何至少有一个不是斜杠的字符,我们可以使用正则表达式([^/]+)
vue项目main.js中的createApp方法是用来创建应用程序实例,然后通过mount方法将id为root的DOM元素上装载应用程序实例的根组件。导入语句中为了简化路径的访问,我们使用@符号表示src目录。package.json中是一个json的npm配置文件,里面有很多配置信息,比如name表示项目名称,version
项目的创建vue3中vuecli的包修改为@vue/cli,vue创建的项目命令修改为vue create,用来快速创建新项目。因为项目开发中需要vuecli,所以我们需要全局安装,下面中的-g表示全局安装,install也可以简写为i。安装完成后,我们可以通过vue --versioon检查是否安装成功。除了npm安装外,我们也可以使用yarn
CSS属性一个svg的圆形效果,不仅可以通过svg自身去实现,我们也可以通过css去实现,只需要使用一个类名加样式就可以。除了圆形之外,多边形,矩形等不规则形状也可以通过css实现。使用css属性和css选择器去实现有时候可以提高我们对样式的复用。当页面中我们需要5个圆形,svg标签需要我们去写5次,而且我们修改半径需要每个都要修改,而css只需要我们修改类名中的样式就可以解决。填充在svg的默认
renderrender()函数中重要的是使用h()函数。这个h函数返回的是一个JavaScript对象,而不是一个DOM元素。返回的对象中包括页面上渲染的节点类型信息和任何子节点的描述。就是我们VNode也称为虚拟节点。我们使用这个函数的作用就是创建虚拟节点。接收3个参数,第一个参数可以是对象、字符串或者函数对象(一个HTML标签名、组件或异步组件,或者任何一种的一个as
watchEffectwatchEffect()方法接收一个函数对象作为参数,就会立即执行这个函数,同时也会响应式地跟踪这个依赖是否发生改变,如果发生改变会重新运行。这个方法和watch很相似。不同的是这个方法不需要分离去监听数据源。vue3中听提供的watch方法和vue2中提供的watch方法是一样的。如果我们处理一个比较大的响应式对象的属性时,我们可以使用es6中的结构语法获
子组件事件子组件向父组件传递使用$emit()方法去触发事件。然后父组件使用v-on指令去监听子组件的自定义事件。使用的语法是$emit(event, [...num]),其中event指的是事件名,num表示参数,其中参数会传给事件监听器的回调函数。子组件想要向父组件传递的数据可以使用第二个参数。我们需要注意的是方法触发的事件名称需要与监听该事件的名称要完全匹配。组件中使
组件注册组件可以通过全局注册和本地注册两种方式。全局注册使用应用程序实例的component方法去注册,接收两个参数分别为组件的名字和函数对象或者选项对象。组件的内容使用template去定义。当我们使用组件时,组件的位置显示的就是template的内容。组件注册时一般使用首字母大写的方式去命名。我们需要注意的是组件不能当做闭合元素去使用。全局注册的组件可以在应用程序中任何模板中去
事件修饰符事件处理中我们使用过event.preventDefault()方法或者event.stopPropagation()方法,在vue中我们可以在v-on指令中使用stop或者prevent去代替上面两个方法。除此之外还有capture表示添加事件监听器时去使用。self表示仅当事件是从特定按键触发时才触发回调。once表示仅
模块解析模块解析指的是当我们在程序中导入模块时,编译器查找并读取导入模块的定义。模块解析的影响条件有模块解析策略以及模块解析编译选项或者相对模块导入和非相对模块导入。在解析相对模块导入的模块名时,会参考当前模块文件所在的目录位置。相对模块导入可以使用./和/或者../,其中第一个指的是当前目录,第二个指的是系统的根目录,最后一个指的是上一级目录。import x from
外部声明Typescript中源文件的类型有.ts或者.tsx的文件或者.d.ts的文件。外部声明有类型声明和模块声明。外部类型声明中我们定义的时候需要使用declare关键字。外部类型声明有外部变量声明、外部类声明、外部函数声明以及外部命名空间声明和外部枚举声明。我们需要注意的是,外部变量声明是不允许定义初始值,用来表示一种类型而不是表示一个值。当我们定义外部变量
模块导入模块导入使用import关键字,关键字后面的大括号是需要导出的命名模板。from关键字后面跟的是模块名。模块名不需要加ts结尾,如果我们想要导出x,y可以如下:import { x, y } from 'tes';如果我们想要一次性导出整个模块,我们可以使用*关键字, 默认导出使用import ... form ...,import后面跟的是导入模块
v-onv-on指令用于监听DOM事件,可以简写为@,在methods去定义对应的方法,定义之后可以直接通过组件实例去访问,还可以从组件的模板中去访问这些方法。我们需要注意的是不要使用箭头函数,因为箭头函数绑定的是父级作用域,导致this指向的不是组件实例。如果使用箭头函数的话,this获取的数据时undefined。我们一般不在指令表达式中书写js语句,这是因为写
工作中项目代码过多时,我们不能将所有代码放在同一个文件中,所以我们可以对这些代码进行拆分成多个文件。对于同一个命名空间声明我们也可以进行拆分。这些同名的命名空间声明通过ts会合并在一起,使用namespace进行命名。下面案例合并后会存在str和Peo以及num这三个导出声明。namespace Demo { export function str(x: an
正则表达式概述正则表达式(regular expression) RegExp正则表达式用于匹配字符串中字符组合模式,用于表单验证。正则字面量: /表达式/;数据类型:引用数据类型objectvar reg = /abc/;字符串方法split():将字符串转为数组方法参数:要切割的字符串,还可以是正则表达式返回值:数组var str1 = "abxxxxxxxxxxchvxxbcxxxx
数组数组:表示有序数据的集合,每一项之间有顺序数组使用字面量:[],每一项之间用逗号隔开,每一项可以是任何数据类型,一般我们习惯书写相同的数据。最后一项不书写逗号。数组的数据类型:object(引用数据)读取:数组名[index] 通过index索引值读取数组中每一项的值。index从0开始。console.log(arr1[0]);设置:使用=赋值arr1[0] = 100;length
递归函数递归函数:在函数内部调用自身,一般解决数学问题。菲波那切数列:1,1,2,3,,5,8,13,21,34……function feibo(n) { // 用户输入第n项,返回对应的值 // 从第3项开始值等于n-1对应的值+n-2对应的值 if(n === 1 || n == 2) { return 1; }else { return feibo(n-1) + feib
函数函数声明函数就是功能(function)我们可以自己封装一些语句在函数内部,函数就具有了某一种特定的功能。声明函数:function 空格隔开函数名后面紧跟小括号,小括号中可以书写参数,将功能语句书写在大括号中表示整体。函数声明只是告诉我们函数有什么功能有语句,并不会执行。// 声明函数function fun() { // 将功能语句书写在大括号中,表示一个整体 console.log(
累加器和累乘器累加器:有时我们在计算时不想知道直接的过程,只想要最终的数值,有一个满足条件的结果就自加1.注意:1 累加器变量,必须书写在for外面(以防变量被每次重置为0),初始值设置0.2 当有满足条件的数值,累加器自加13 最终的结果也必须书写在for循环外面。// 用户输入数字,输出约数的总个数// 的到用户的输入var num = parseInt(prompt("请输入数字"));//
条件分支语句三元表达式三元表达式是js中唯一一个需要三个元素参与的表达式。语法: 条件表达式 ? 值1 : 值2;计算机会自行计算条件表达式的真假,返回值是布尔值如果结果是true,整个式子结果是值1;如果表达式结果是false,整个式子结果是值2.三元表达式使用的情况:当值是二选一时,使用三元会更简单。任何三元表达式都可以改为if语句(if语句是最基础的条件表达式)举例:if(false)
原型每一个函数都有一个prototype属性,它的值是一个对象对于普通函数来说, 它的作用不大但是对于构造函数,作用:实例共享方法举例:// 定义构造函数function People(name, age, sex) { this.name = name; this.age = age; this.sex = sex;}// 其实我们使用布兰达艾奇 为我们提供的People.prototy
鼠标滚轮事件事件名称: onmousewheel 兼容性: 火狐不支持onmousewheel 支持DOMMouseScroll事件该事件触发条件: 当鼠标滚轮滚动的时候触发。绑定方式:// 给document绑定鼠标滚轮事件document.onmousewheel = function() { console.log("滚动滚轮了");}在chrome中滚动:在IE中滚动滚轮:在火狐中滚
快捷尺寸clientWidth clientHeight样式:#box { float: left; padding: 10px; background-color: red; border: 10px solid blue;}输出clientWidth和clientHeight:总结:clientWidth和clientHeight包含的是:content + padding区域offs
call和apply函数中的this在定义的时候,无法确定,只有当函数执行的瞬间this才能确定下来。简单来说就是: 谁调用,指向谁。举例:// 定义函数function fun(a, b, c) { console.log(this, arguments);}// 函数单独执行// fun(1, 2, 3);// 作为事件函数执行// document.onclick = fun;docume
Javascriptjavascript由DOM、BOM、ECMAScript组成。DOM: document object model 文档对象模型 体现在代码中是documentBOM:browser object model 浏览器对象模型 体现在代码中是windowECMAScript: 核心语法。包含如何定义变量、循环语句、运算符、表达式、
bootstrapbootstrap是什么Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使 Web 开发更加快捷。它对HTML、CSS和JAVASCRIPT进行了封装,使它们使用起来更方便。我们只需要使用它已经设定好的类,或规则,即可快速应用它提供的功能。Bootstrap 使用了一些 HTM
SessionCookie已经可以保持登录状态了,但是不安全。于是又引入了Session。Cookie是存储在前端的,而Session是存储在后端的。当用户第一次登录时,将信息发送给服务器,服务器接收到信息,处理完毕,根据这些信息生成一个随机ID。该ID就代表该用户。将该ID字符串设置在set-cookie响应头中带给浏览器。浏览器依旧生成cookie文件,并保存随机ID。之后每一次请求都把该ID
使用AJAX发送表单信息为什么要使用AJAX发送表单数据?因为使用表单发送时,一旦失败,错误信息总会显示在第二个页面内。用户体验不好。使用AJAX发送时,一旦失败,错误信息显示在本页。用户可以不必其它操作,直接修改即可。表单序列化如果使用表单本身去提交,数据都是浏览器帮忙组织的。使用AJAX提交表单数据时,只能够自己组织数据。一个两个表单控件,好说,一两个表单也好说。但是,总会出现新的表单,表单的
NodeJS处理POST请求接口文档// URL /tijiao携带数据: { id: 唯一标识 number username: 用户名 string password: 密码 string sex: 性别 字符串 male female secret age: 年龄 number ……}//
Copyright © 2005-2022 51CTO.COM 版权所有 京ICP证060544号