ducaifeng86的博客

原创 在vue3+vite项目中使用axios

分三步：1）安装axios npm install axios -D2）在需要使用的地方引入axiosimport axios from 'axios'3）使用axios在setup()方法里面使用axiossetup() { //获取引导页图片 let images = ref([]) const getData = () => { axios.get('/dat...

原创 vant组件在项目中vite+vue3项目中的引用

vant组件在vue3项目中的使用，分三步：1）安装插件：npm install vant -D2）在main.ts全局引入样式：import vant from 'vant'import 'vant/lib/index.css'; // 全局引入样式createApp(App).use(vant).mount('#app')vite版本不需要配置组件的按需加载，因为Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力，但是样式必须全部引入...

原创 javascript创建对象的几种方式

创建对象主要有以下几种方式：对象字面量方式、构造函数模式、工厂模式、原型模式、混合模式1）对象字面量方式var person = { age:10, name:"小明", eat:function(){ console.log("吃了一些东西"); } }2）构造函数模式function Person(age,name){ this.age = age; this...

原创 每日一结

vuejs的特点响应式，组件模块，单文件组件响应式是通过v-modle来实现的组件之间形成组件树，有一个根组件单文件是vue文件，html,js,css放在一个文件里面Vue事例在main.js里面引入Vue，通过new Vue 事例了一个全局变量Vue在Vue事例之前可以同过Vue.component方法来定义一个全局组件，全局组件就是在任何地方都可以使用Vue事例里面的el是挂...

原创 每日一结

js遍历的方法：1）for循环:支持break,continue2）forEach:不支持break,continue3)every:支持breank,continue的场景，需要返回true4)for in:遍历对象的，对于数组，它输出的key是字符串形式5)for of ：遍历任意的对象，es新增内容...

原创 每日一结

周六用到的知识js作用域：全局作用域，函数作用域，块级作用，动态作用域动态作用域是用bind来动态改变this的指向let定义的变量的特点：具有块级作用的特点，不能用全局的对象来访问，不能重复命名const定义的常量的特点：不能对值进行修改，不能先声明再赋值。router-view就是动态来渲染组件的，它放置的位置，将会被其它组件替代使用scss的时候，需要安装node-sass sa...

原创 每日一结

Type of the default value for 'slides' prop must be a function修改方式：default: () => []

原创 每日一结

今天使用到的内容子组件可以向父组件传值，父组件可以向它的父组件传值mockjs里返回的数据是放到data里面的mockjs里面的mock方法，第一个参数是访问地址，第二个是访问方式，get或者post,第三个参数是返回的数据，是个对象使用axios的时候，第一个是访问路径，第二个是参数，没有参数的可以不传，mockjs里面接收饿的时候写null给router添加导航守卫的时候，需要在ro...

原创 每日一结

昨天所用的知识总结1)v-for循环的时候没有给key赋值是会报错的2)使用vue-router的步骤，第一步，安装vue-router。第二步，新建一个router.js文件，跟man.js在同一个级别，在这个文件里面配置路由信息。第三步，在main.js里面引入router.js，并挂载到应用上3)使用3秒后弹框自动消失，这个显示隐藏的判断要用v-if，用v-show是不行的4)cre...

原创 每日一结

昨天使用到的内容1)使用axios进行访问接口，要注意，使用箭头函数的时候，才能用this.$emit给父组件传值，不然会报错2)使用axios的方法，先安装，然后在需要应用的组件里面先引入axios,然后就可以在该组件里面使用了3)父组件在接收到子组件的值的时候，在父组件中使用@变量名，如果子组件传递的有参数的时候，不用在模板上的方法里写参数名，直接在定义的方法里面传入参数即可4)moc...

原创 每日一结

昨天使用到的内容：1)click事件的绑定2)事件里面可以传data里面的参数3)方法接受参数可以像访问数组那样获得key，通过this4)对组件的使用，用components选项，同时，在模板中使用的时候可以用短横效的方式5)父组件给子组件传值的体会，父组件里面有很多子组件，要把值传给对应的子组件只能是在对应的子组件上给参数，子组件在给父组件传值的时候，也只能把接收的参数写到对应的子组...

原创 windows操作系统下到nodejs升级

第一步：node -v查看node.js版本 ：node -v第二步: npm -v 查看npm包管理器的版本 ：npm -v第三步：打开cmd查看你之前node版本安装的路径 ：where node第四步：直接去官网下载与你电脑系统对应的最新的版本,安装在上述路径中覆盖即可。...

原创 webpack——cleanWebpackPlugin插件，每次打包前先自动删除先前打包的文件

引言有时候为了避免先前打包文件的干扰，或者不想要先前的打包文件了，要手动进行删除。为了避免手动删除的麻烦，可以借助于cleanWebpackPlugin插件来自动完成。下面是cleanWebpackPlugin插件的具体使用方法：第一步：安装cleanWebpackPlugin插件使用命令：npm install clean-webpack-plugin -D来安装第二步：进行相关...

原创 webpack打包——htmlWebpackPlugin插件，打包自动生成index.html文件

引言webpack打包的时候，为了打包结束后自动生成index.html模板，而不进行手动的创建index.html。需要使用htmlWebpackPlugin插件。下面就来讲解如何使用htmlWebpackPlugin插件来自动生成index.html文件第一步：安装htmlWebpackPlugin插件使用命令：npm install html-webpack-plugin -D ...

原创 CSS动画属性

引言动画是使元素从一种样式逐渐变化为另一种样式的效果。CSS3 中有三个关于动画的样式属性transform、transition和animation。一、transformtransform：设置元素的形状改变。常用属性有translate、rotate、scale语法：transform: none|transform-functions;常用的2D属性值说明：属性值...

原创 JS里的事件模型

引言javascript中有两种事件模型：DOM0，DOM2。一、DOM0事件模型DOM0级事件模型是早期的事件模型。这种事件模型就是直接在dom对象上注册事件名称，优点是所以浏览器都支持，缺点是注册多个同类型的函数，后面的就会覆盖前面。1、如何注册事件：直接在dom对象上注册事件名。比如下面的代码，给button按钮注册一个click事件： <button id="...

原创 CSS里的BFC

一、什么是BFCBFC（Block Formatting Context）块级格式化上下文，指一个独立渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。二、BFC的特征1、BFC区域的元素不会影响外面的元素2、BFC区域不会与float元素发生重叠3、计算BFC高度时，浮动元素能够撑开BFC的高度三、如何创建BFC1、设置overflow属性：hi...

原创 CSS布局——flex

一、什么是Flex布局？Flex又称为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。采用Flex布局的元素，称为Flex容器（flex container），它的所有子元素称为flex项目（flex item）。设为flex布局以后，子元素的float、clear和vertical-align属性将失效。二、容器的属性1、flex-direct...

原创 CSS基本布局----定位

前言CSS有三种基本的布局机制：标准流、浮动和定位。定位就是确定元素的位置，利用top/right/bottom/left这四个偏移属性，可以准确地定义元素框相对于其正常位置应该出现的位置。top的优先级要高于bottom，left的优先级要高于right一、相对定位：relative相对定位：相对于元素原有位置的定位。相对定位并没有脱离文档流，因此对于它的位置设定不会影响其它兄弟元素...

原创 CSS布局——float

引言float即浮动。实质上就是为了让块级元素能够在一行显示。设置了float属性的元素会脱离标准文档流。那什么是标准文档流？标准文档流就是指元素默认的方式显示，从上到下，从左到右排版。比如，块级元素占据一行显示，行内元素在一行显示。一、float的属性值 1、左浮动：float:left；以左边为基准，盒子并排紧贴显示在一起。 2、右浮动：float:ri...

原创 JavaScript(9)——闭包

一、引题在JavaScript中我们知道变量的作用域分为全局作用域和局部作用域。函数外部是不能访问函数内部的变量的，但是在实际工作中我们有时需要在函数外部去访问函数内部的变量！为了达到这一目的，我们只能在函数内部再定义一个函数。从而就有了闭包这个概念！闭包就是能够访问其他函数变量的函数。二、什么是闭包闭包可以简单的理解为函数里面嵌套了另一个函数，将函数内部和函数外部进行链接起来。三...

原创 JavaScript(8)——作用域

作用域是指代码在运行时，可访问的变量、函数、对象的集合。分为局部作用域和全局作用域。一、局部作用域变量在函数内声明，只能在函数内部访问。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。函数参数也是局部变量。代码演示：function fn(age){ var fullName = "ducaifeng"; console.log("姓名："+fullName...

原创 JavaScript(7)——函数的理解

一、函数是什么函数又叫方法，它是用来执行特定功能的代码块。在需要的时候调用它。如果有一段代码需要多处被使用，可以将相同的代码封装成函数，可以避免代码重复。二、如何创建函数创建函数有2种方式：函数式声明、表达式声明1）函数式声明代码演示：function fn(){ console.log("函数式声明");//这里是函数内容}2）表达式声明代码演示：va...

原创 JavaScript(6)——数组的常用方法

待完善

原创 JavaScript(5)——对象常用的属性和方法

待完善

原创 JavaScript(4)——对象的操作

对象的操作主要包括：访问属性、添加属性、修改属性、删除属性、遍历属性一、访问属性有2种方式：对象名.属性名、对象名[“属性名”]代码演示：var person = { name:"ducaifeng", age:33}console.log("姓名："+person.name);//对象.属性名console.log("姓名："+person["name"]);//对象...

原创 JavaScript(3)——如何创建对象

下面将从对象是什么、对象的分类、如何创建对象3方面来介绍对象。一、对象是什么？对象是一系列无序属性的集合，这些属性包括原始数据、对象或者函数。二、对象的分类？对象分为2大类：一类是内建对象；一类是自定义对象。内建对象包括9类：Number、String、Boolean、Object、Array、Function、Date、RegExp、Error三、如何创建对象？创建对...

原创 Javascript（2）——数据类型之undefined、null

一、undefined undefined表示“缺少值”，一般会出现在下面4种场景：变量声明了，但是还没有赋值时,该变量的值为undefined； 对象没有赋值的属性，该属性的值为undefined; 调用函数时，函数需要的参数没有传递时，该参数为undefined; 函数没有返回值时，默认返回undefined;代码演示： <script type="tex...

原创 Javascript（1）——数据类型及typeof

一、数据类型JavaScript的数据类型分为2大类：原始数据类型和引用数据类型。原始数据类型包括5种：Undefined、Null、Number、String、Boolean。引用类型包括3种：对象、数组、函数。二、typeoftypeof是运算操作符，返回值是字符串，用来判断操作数的类型。typeof的语法：typeof operand 或者 typeof (opera...

原创 利用css画三角形

一、目的利用css画三角形二、原理利用border属性，将其中的一个边框设置颜色，其它的边框设置成透明的三、代码片段为了方便理解，首先设置一个四个边框为不同颜色的box,效果如下、代码#box1{width:0;height:0;margin:40pxauto;border-top:40pxsolidgreen;border-ri...

原创 实现3秒后页面自动跳转的另一个页面

一、目的实现3秒后页面自动跳转的另一个页面二、原理在当前页面设置一个变量，设置这个变量的值为3，利用定时器，每隔1秒就将变量减1；当变量为0的时候跳转页面三、代码片段<p> 此页面<span id="count-span">3</span>秒后将自动跳转 </p><script type="...

原创 移动端判断手指上滑下滑

1、目的：判断手指是上滑还是下滑2、原理：获取手指按下时的Y坐标和手指抬起的Y坐标。如果抬起的坐标小于按下的坐标，则是上滑；抬起时的坐标大于按下时的坐标，则是下滑；3、代码示例：<script type="text/javascript"> var startY = 0; document.addEventListener("...

原创 如何修改基于webpack和vue-cli的vuejs项目的端口号

基于webpack搭建的vuejs项目的默认端口号是8080，那么如何修改默认的端口号呢！首先，找到config文件下的index.js文件。然后找到里面的port配置项，修改即可：比如将8080改成8888。然后重新运行...

原创 如何利用vue-cli和webpack搭建vuejs项目

1、安装node和npm    下载地址：https://nodejs.org/zh-cn/    测试是否安装成功：node  -v如果出现版本号，就表示成功    注：Node中自带安装了npm,故不再安装2、  安装cnpm镜像安装命令：npm install -g cnpm  --registry=https://registry.npm.taobao.org测...

原创 如何在github上创建一个远程仓库

1、github是什么GitHub是一个免费的远程仓库。同时它也是一个开源社区，把代码放到github上可以让别人参与你的开源项目，你也可以参与别人的开源项目。2、如何申请一个github账号1） 打开github的官方网站：https://github.com/2） 进入到注册界面，填写相关信息验证完了之后就可以创建项目了3、  如何创建一个仓库验证完之后就可以创建远程仓库了这就成功创建了一个远...

原创 html的基本概念

1、       html的基本概念1.1、   html是什么html：（Hyper Text Markup Language）超文本标记语言。1.2、   html是干什么的它是标记语言下的一个应用，一种规范，一种标准，通过标记符号来告诉浏览器以何种形式显示内容。1.3、   html的结构是什么html的基本结构中包括：html、head、title、body标签

原创 windows常用的快捷键