![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
文章平均质量分 69
月亮不营业
这个作者很懒,什么都没留下…
展开
-
vuex mixins refs nexTick
简要了解一下mixins的用法1.在src下建立一个mixin文件2.在mixin文件下建立所需的文件(我在这里创建一个message.js)export default { data:function(){ return{ message:"这是混入" } }, methods:{ sub(){ alert("这是混入里的方法") } }}3.引用(原创 2021-09-08 20:03:37 · 158 阅读 · 0 评论 -
vuex
Vuex是什么是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化vuex工作流程1.vue组件->Dispatch派发->action2.action->commit提交->mutation3.mutation->change修改->state4.state->render渲染->vue组件组件文件:stateactionmutation什么情况原创 2021-09-07 19:44:14 · 162 阅读 · 0 评论 -
vue 三
vue-router实现vue中的路由管理(切换、路由跳转)万能公式:1.了解2.下载3.使用(import引入、配置、使用)Vue-router的安装vue create 项目名 时直接选中vue-router(直接配置好)按需导入的一种格式: component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')暴露路由:export default routermain.js原创 2021-09-07 09:53:40 · 133 阅读 · 0 评论 -
vue 二
一、脚手架1.脚手架的本质:一套文件架构2.怎样安装脚手架:npm install -g @vue/cli创建项目:vue create 项目名(不能包含大写字母)文件结构publicsrc:assets放资源文件(css、js等文件);components:组件文件;view:页面级组件App.vue:根组件;main.js:入口文件package.jsonnode_modules3.创建组件//只能有一个根元素4.使用组件导入组件import 名称 fr原创 2021-09-07 09:30:56 · 107 阅读 · 0 评论 -
vue
什么是vue渐进式JavaScript框架1.什么是框架:具有约束性的项目管理结构或者写法,能更好的管理项目,让程序员更专注于业务逻辑,使项目的原创 2021-09-01 20:05:40 · 88 阅读 · 0 评论 -
Promise
promise1.promise是什么:由社区提出的,为了解决异步回调深渊的一种解决方案它有三种状态:pending进行中resolved已完成rejected已失败2.promise如何使用方法1:let promise = new Promise(function(resolve,reject){//业务逻辑if(success){resolve(a); //此时由pendding变为resolve}else{reject(err); //此时由pend原创 2021-08-31 14:30:58 · 52 阅读 · 0 评论 -
电商网站项目 动态实现(从数据库获取数据)六 商品详情页面
商品详情页面一、在数据库建立商品详情表系列表商品表规则表原创 2021-08-29 15:21:51 · 777 阅读 · 0 评论 -
电商网站项目 动态实现(从数据库获取数据)四
banner的实现一、数据库创建一个广告表index.html中轮播部分代码 <div id="banner"> <div id="conten"> <div id="leftBox"></div> <div id="righBox"></div> <div id="contenttext原创 2021-08-28 17:07:49 · 135 阅读 · 0 评论 -
电商网站项目 动态实现(从数据库获取数据)三 nodejs之ejs
ejs:视图模板显示html的结构和数据,并进行渲染模板组成:结构+数据MVCM:modal 数据库V:view 视图(页面+数据),给用户展示的(静态的)C:控制,业务处理如何使用:1.了解视图模板(页面+数据)2.下载:npm i ejs3.引用:const myejs=require(‘ejs’);配置:app.js:1.直接使用ejs模板app.set(“views”,path(__dirname,“view”)); //views是固定的app.set(“vi原创 2021-08-28 16:09:20 · 355 阅读 · 0 评论 -
session和cookie 电商网站项目 动态实现(从数据库获取数据)五session和cookie下的登录
HTTP协议是一种无状态的协议,session和cookie用不记录会话状态的两种技术cookiecookie是将用户信息存储在客户端cookie登录的demo流程:1.用户发起登录请求2.服务端进行响应3.客户端接收到数据,将相应的数据存储到cookie文件4.之后每一次请求都将带上cookie文件cookie的使用document.cookie返回cookie存储的信息(键值的形式,用分号分隔)session与cookie的区别HITP协议是一种无状态的协议,session和coo原创 2021-08-26 16:26:43 · 231 阅读 · 0 评论 -
mysql数据库
mysql的解释1.为什么要使用数据库:永久化1.1数据库是什么:存储数据的"仓库"; 本质也是一个文件数据想要永久化(数据库,本质:一个文件)2.数据存储在什么地方: 变量(内存,临时存在)、硬盘、U盘、网盘(文件)3.数据库的作用:3.1.存储大量的数据 ,访问和检索(管理数据 )3.2. 保证数据的完整性(正确性)3.3. 安全和共享3.4. 数据可以进行组合(数据分析)4.数据库存储的发展历史4.1. 层次模型4.2. 网状模型4.3. 关系模型(重点)4.4. 对象模型原创 2021-08-25 19:23:51 · 90 阅读 · 0 评论 -
HTML5 cancas
canvas:画布<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px red solid; } </style></head><bo原创 2021-08-25 18:45:37 · 340 阅读 · 0 评论 -
ajax
ajax异步的javascript和xml不会跳转页面(局部更新);从服务器端获取数据,如果服务器端写了跳转页面,它相当于把页面的代码返回ajax的使用ajax实现跳转不需要form表单1.创建xhr对象2.xhr设置请求3.发起请求4.设置响应处理事件app.js:router/dbOpen.js:router/userRouter.js:ajax的代码写在客户端public/login.html:<!DOCTYPE html><html lang="原创 2021-08-21 16:51:26 · 70 阅读 · 0 评论 -
Node js (二)
搭建服务器// 引入http模块const http = require("http");//读取文件(.html等的文件),就需要引入文件模块const fs = require("fs");//搭建服务器,并以常量的形式存储起来const myServer = http.createServer(function (request,response) { console.log("请求来了!"); //有请求来时执行 console.log(request.url);原创 2021-08-21 13:24:13 · 86 阅读 · 0 评论 -
node.js (一)
一、什么是node解释:node是一个服务器端的JavaScript解释器;node本身运行V8 JavaScript;二、node的特点1.模块化(模块需下载,只需下载一次)npm install express -D:下载到开发环境npm install express -S:下载到生态环境npm install express --save:项目运行时依赖npm install express --save:开发时时依赖node的框架expressnpm install expr原创 2021-08-19 08:53:37 · 91 阅读 · 0 评论 -
DOM学习篇 三
文本节点的操作方法元素节点.firstChild//获取文本节点textNode.length//获取文本节点长度textNode.data="…"// 设置文本内容appendData(string)//添加文本deleteData(offset,count)//删除指定位置和长度的文本insertData(offset,string)//在指定位置插入文本replaceData(offset,count,string)//替换指定位置和长度的文本属性节点的操作方法一、ge原创 2021-08-02 16:21:14 · 80 阅读 · 0 评论 -
DOM学习篇 二
插入元素一、A.appendChild(B);//appendChild()把一个新元素插入到父元素的内部子元素的 末尾;A表示父元素,B表示动态创建好的新元素二、A.insertBefore(B,ref);//A表示父元素,B表示新子元素。ref表示指定子元素,在这个元素之前插入新子元素...原创 2021-07-24 10:38:00 · 220 阅读 · 0 评论 -
DOM学习篇 一
DOM的介绍Document Object Model:文档对象模型是XML解析文档;DOM操作,可以简单理解成“元素操作”原理:将html文档,看成一颗节点树,然后,使用dom提供的API,对应的节点进行增删改查;从而使用通过js 去动态操作html元素将其用树形表示是为了更好地给每一个元素进行定位,以便让我们找到想要的元素每一个元素就是一个节点,而每一个节点就是一个对象。也就是说,我们在操作元素时,其实就是把这个元素看成一个对象,然后使用这个对象的属性和方法来进行相关操作一、查看节点du原创 2021-07-23 20:31:00 · 140 阅读 · 0 评论 -
js ATM机
js版的学生管理系统 1.0版 var namearr = ["张三三", "李小四", "程冰冰", "王小五"]; //存储姓名 var age = [18, 19, 17, 18]; //存储年龄 var sex = ["男", "女", "男", "女"]; //性别 var banJi = [1, 2, 3, 1]; // 班级信息 var xueHao = ["2001", "2101", "2002", "2201"]; //学号信息原创 2021-07-20 19:27:15 · 104 阅读 · 0 评论 -
JS 程序执行的三大结构
九九乘法表 var i,j; for (i=1;i<=9;i++){ for (j=1;j<=i;j++){ document.write(j+"*"+i+"="+j*i+" "); } document.write("<br/>"); }韩信的士兵有一队兵,他想知道有多少人,便让士兵排队报数:按从1至5报数,最末一个士兵报的数为1;按从1至6报数,最原创 2021-07-15 18:14:43 · 142 阅读 · 0 评论 -
JS 数组
一、数组的定义 数组也是一个变量,它可以存储一组数据(可以是任何类型的数据);数组名:数组的整体数组的元素:存放在数组中的具体的数据数组的下标:从0开始二、定义一个数组1.使用new关键字 var arr1 = new Arry(); var arr1 = new Arry(大小); //var arr1 = new Arry(4); var arr1 = new Arry("张三","李四");2.数组赋值的方式 var arr1 = []; /原创 2021-07-15 18:13:46 · 221 阅读 · 0 评论 -
JS循环、选择练习题
组三位最大数输入a ,b,c 三个个位数(0-9)之间,组成一个最大的三位数 var a=window.prompt("请输入数字a"); var b=window.prompt("请输入数字b"); var c=window.prompt("请输入数字c"); var x; if (a<0||a>9){alert("输入的a不在(0-9)范围内")} if (b<0||b>9){alert("输入的b不在(0-9)范围内")}原创 2021-07-14 20:13:34 · 675 阅读 · 1 评论 -
JS oneday
CSS2与CSS3的区别1.css3已经完全向后兼容,故不必改变原有设计2.大部分css3标准都重复css2的内容,在此基本初上进行了增补和修订3.css3支持定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片4.css3的部分属性个别浏览器不支持css3的私有前缀由于CSS3新增的有些属性尚未成为W3C标准的一部分,因此对于这些属性来说,部分浏览器都只能识别带有自身私有前缀的属性。也就是说,我们在书写CSS3属性的时候,可能需要在属性前面加上浏览器的私有前缀,然后该浏览器才能识别对应原创 2021-07-12 17:48:37 · 157 阅读 · 0 评论 -
CSS3 动效实现
无鼠标上移是的效果图鼠标上移后的样式图效果:h2下移,p上移,div旋转成x存在一个遮罩层一、先分析整体有什么(有什么就先写什么)注意层级关系 <li> <img src="../素材/动效/lanrenzhijia5.jpg" alt=""> <h2><span>WILD ROMEO</span></h2> <div></div>原创 2021-07-05 18:05:04 · 217 阅读 · 0 评论 -
练习写网页(静态) two
<header> <nav> <img src="../素材/image/logo.png" alt=""> <ul class="list1"> <li>Home</li> <li>Who is Red Bilby</li> <li>Services</li> .原创 2021-07-02 13:36:27 · 102 阅读 · 0 评论 -
练习写网页(静态) oneday
网页样式图划块写网页一、header1.html代码<header> <nav class="nav"> <ul> <li><span>HOME</span></li> <li><span>PHOTOAPP</span></li> <li><img sr原创 2021-07-01 17:57:05 · 168 阅读 · 0 评论 -
浮动定位 float|position
一、浮动:float对应值:left right none二、浮动的原理1.浮动元素将脱离标准文档流,浮动元素后面的元素依次向上填充2.浮动元素不会覆盖行内元素3.浮动元素变为行内块级元素,内容有多宽整体盒子就有多宽三、文档流:网页中元素的排列顺序1.标准文档流(默认):从左到右,从上到下排列2.浮动流:左浮:先从左到右,在从上到下排列右浮:先从右到左,在从上到下排列如果一行内容已满,则换行显示四、浮动带来的问题导致父盒子塌陷五、如何解决父盒子塌陷(扩展盒子高度原创 2021-06-30 10:24:39 · 240 阅读 · 0 评论 -
HTML标签二(列表 表格 表单)
列表标签1.有序列表order list格式: <ol> <li></li> </ol>2.无序列表type:circle,空心小圆圈square,小方块disc,默认的实心小圆圈格式: <ul> <li></li> </ul>3.原创 2021-06-29 10:05:08 · 168 阅读 · 0 评论 -
前端一阶段小知识
一、 什么是WEB应用WEB:需要用浏览器浏览的网页WEB应用程序:基于浏览器运行浏览的应用程序B/S(浏览器/服务器)优点:不用下载、不占内存、跨平台、维护性强缺点:速度慢C/S(客服端/服务器)优点: 速度慢缺点:要下载、占内存、不跨平台、维护性差二、 WEB应用开发流程1. 需求分析(销售、售前经理、产品经理、项目经理、需求分析师、功能顾问)需要分析什么:(1)网站类型根据呈现内容:推广展示、机构企业、电子商务、多媒体互动、综合门类、搜索引擎】、根据技术:固定分辨率:网原创 2021-06-23 19:17:20 · 106 阅读 · 0 评论 -
css3篇 三(变形之2d、3d的转换)
一、2d转换 .trans1{ transform: rotate(30deg) ; /*旋转30度*/ } .trans2{ transform: skew(30deg) ; /*扭曲30度*/ } .trans3{ ...原创 2020-03-26 17:32:16 · 187 阅读 · 0 评论 -
CSS3 元素篇四
1、-img 标签:常用于定义网页中的图像基本语法格式:<img src=”图片路径”alt=”图片无法显示时显示的文字”/>//src和alt是标签的必需属性2、-figure和-figcaption标签-当需要在网页在添加一个插图时,就可以使用-figure标签来实现。<figure> <figcaption>一只呆萌的小鸡</fig...原创 2020-03-21 19:50:17 · 253 阅读 · 0 评论 -
CSS3元素篇二
一、CSS3圆角边框:实际上是在矩形的四个角分别做内切圆,然后通过设置内切圆的半径来控制圆角的弧度。(左上角”top-left;右下角:bottom-left;右上角:top-right;左下角:bottom-right)1.border-radius属性:基本语法格式:border-radius:1-4 length |%/1-4length|%;//也可以设置百分比//length...原创 2020-03-20 22:51:18 · 259 阅读 · 0 评论 -
网页制作任务二:课表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>我的课程表</title> <style> body{ margin:0% auto; padding:0; ...原创 2020-03-12 20:02:30 · 886 阅读 · 0 评论 -
CSS选择器篇 一
一、通配符选择器1.通配符选择器常用 ‘*’号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。2.基本语法格式:*{ 属性1:属性值1;属性2:属性值2;}例1:使用该选择器定义样式,清除所有HTML标记的默认边距。*{margin:0; /*定义外边距*/padding:0; /*定义内边距*/}说明:实际开发中不建议使用通配符选择器,因为它设...原创 2020-03-08 21:48:12 · 445 阅读 · 0 评论 -
小网页制作
1.员工信息表<!doctype html><html><head><meta charset="utf-8"><title>员工信息登记表</title> <script type="text/javascript"> function changeColor(node) { ...原创 2020-03-04 14:46:27 · 595 阅读 · 0 评论 -
HTML5logo的绘制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5的logo设计</title> <style> body{ margin:0; ...原创 2020-03-04 12:20:25 · 304 阅读 · 0 评论 -
HTML5标签篇 (一)
HTML5一、结构元素1.header:表示页面中一个内容区块或整个页面的标题 <header class="qui-header"> <h1>国内旅游计划</h1></header>2.nav:表示页面中导航链接的部分3.aside:表示article标签元素内容之外的、与article标签内容相关的辅助信息。可用作...原创 2020-03-03 20:02:37 · 1583 阅读 · 0 评论