- 博客(122)
- 收藏
- 关注
RSS订阅
原创 例题(2021.02.21/21:39)
文章目录CSSHTMLJS数组JS高级http请求ES6VueCSScss的居中方式 链接px、em、rem、%的区别 链接display的值和作用 链接css3的新特性 链接static、relative、absolute、fixed四种定位的区别 链接盒子模型（怪异模型） 链接boo
2021-02-21 22:18:28
210
原创 vue-cli3.0 最新项目创建
1.全局安装vue-clinpm install -g @vue/cli2.创建项目vue create demo demo是项目名可以随意替换默认（default）vue2默认（default）vue3手动（Manually）3.手动选择配置空格键是选中与取消，A键是全选Choose Vue version 选择视图版本Babel 支持es6TypeScript 支持使用 TypeScript 书写源码Progressive Web App (PWA) Support PW
2021-06-04 22:50:11
292
1
原创 微信小程序----云开发和云函数
文章目录01.写入数据库(云平台)01.写入数据库(云平台)使用数据库必须初始化 const db = wx.cloud.database();连接到集合 db.collection('集合名字').add({})写入数据 data 字段表示需新增的 JSON 数据sign(e){ //初始化数据库 const db=wx.cloud.database(); //连接到集合并插入数据 db.collection('test').add({ //插入的数据
2021-03-09 14:22:00
386
原创 微信小程序----组件
文章目录01.导航跳转02.路由传参03.audio04.表单提交01.导航跳转写法<navigator url=""></navigator>导航的/相当于会直接去miniprogram文件夹寻找需要跳转到tabbar页面，需要添加open-type="switchTab"属性open-type 的合法值功能navigate保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面redirect关闭当前页面，跳转到应用内的某
2021-03-02 01:27:16
175
原创 微信小程序----动态
文章目录01.变量02.事件03.事件传参04.wx:for05.wx:if和hidden01.变量书写在data中的变量在wxml中使用时用{{}}包裹{{}}和vue中的插值表达式类似，可以放置变量、表达式<view>{{msg}}</view><view>{{1>2?'a':'b'}}</view><view>{{1+3}}</view>02.事件bindtap点击事件 小程序中事件 bindta
2021-02-28 22:28:33
646
原创 flex布局
文章目录01.flex布局02.常见父项属性03.flex-direction属性04.justify-content属性05.flex-wrap属性06.align-items属性(单行)07.align-content属性(多行)08.flex-flow属性09.常见子项属性10.flex属性11.align-self属性12.order属性01.flex布局flex是flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局当父盒子设为f
2021-02-24 00:41:46
1482
原创 微信小程序----页面结构
文章目录01.页面结构02.专用组件03.资源上传到云开发01.页面结构wxml用来放置页面结构，专用标签 使用的是xml的语法xml的标签有开始有结束否则会报错不能使用之前html标签wxml使用专用组件(不称为标签，和标签类似)02.专用组件text用来引入文字 段落文字 标题文字view引入块级内容 替代之前的 div ulimage引入图片progress 引入进度条icon 引入图标input 引入输入框03.资源上传到云开发资源请求地址2021.02
2021-02-23 23:03:03
495
原创 微信小程序----框架
文章目录01.小程序框架02.pages03.app.json01.小程序框架小程序的项目框架是自动生成的cloudfunctions放置云平台(后台)miniprogram放置前端相关内容components放置组件images放置图片pages放置前端页面style放置公共的cssapp.js公共jsapp.json配置文件app.wxss公共的css样式project.config.json配置文件相关02.pages每一个前端页面，都在pages文件夹内部有一个
2021-02-23 21:29:39
179
原创 判断数据类型是数组还是对象
let arr=[1,2,3];let obj={"name":"abc"};console.log(arr instanceof Array);console.log(obj instanceof Object);
2021-02-21 21:33:44
198
转载 vue和react的区别
文章目录1. 数据2.虚拟Dom3.JSX和模板4.构建工具5.React.Native vs ???6.背后的团队转载自：参考1. 数据React:单项数据流Dom元素渲染依赖于state,但改变State并不会影响或者改变渲染出的Dom元素。只有通过setState才能重新走渲染流程。React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点React推崇的是函数式编程和单向数据流：给定原始界面（或数据），施
2021-02-21 21:21:01
175
原创 vue数据双向绑定的原理
vue底层实现双向数据绑定的原理01.Object.defineProperty()02.单向数据绑定03.双向数据绑定04.vue实现双向数据绑定原理01.Object.defineProperty()Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象prop 当前需要定义的属性名desc 属性描述符02.单向数据绑定数据
2021-02-21 21:15:25
173
原创 路由跳转的方式
路由跳转的方式01.router-link02.this.$router.push() (函数里面调用)03.this.$router.replace()04.this.$router.go(n)05.跳转方式的区别01.router-link<router-link to="/地址"></router-link>或者//此方法路由中要配置name属性<router-link to="{name:'地址'}"></router-link>rout
2021-02-21 19:16:14
460
原创 CSS的三种引用方式
CSS的三种引用方式1.内联样式(行间样式)2.内部样式3.外部样式4.link和@import的区别1.内联样式(行间样式)直接在标签内部通过使用style属性添加CSS样式<p style="color:red;font-size:12px;">这是一个段落</p>2.内部样式在<head>标签里面通过使用<style>标签来引进CSS样式<head><style>p{ color:red; font-size
2021-02-21 19:04:28
871
原创 H5新增的语义化标签
1.根据页面的结构section元素 表示页面中的一个区块article元素 表示一块与上下文无关的独立的内容aside元素 在article之外的，与article内容相关的辅助信息header元素 表示页面中一个内容区块或整个页面的标题footer元素 表示页面中一个内容区块或整个页面的脚注nav元素 表示页面中导航链接部分hgroup标题的一个分组2.媒体元素组合figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)&l
2021-02-21 18:47:56
163
原创 axios
文章目录01.使用axios02.使用axios请求本地文件01.使用axios1.下载包 npm i axios -S2.引入包 import axios from 'axios';3.配置使用axios Vue.prototype.$http=axios;02.使用axios请求本地文件list.json使用get方法请求json文件拿到数据2021.02.08 21:42...
2021-02-08 21:42:46
95
原创 Vuex
文章目录01.vuex02.使用vuex03.使用vuex进行数据管理04.使用vuex注意事项01.vuexvuex是一个全局的共享数据存储区域，就相当于是一个数据的仓库只有共享的数据，才有权利放到vuex中；组件内部私有的数据，只要放到组件的data中即可02.使用vuex1.下载包 npm i vuex -S2.引入vuex import Vuex from 'vuex'3.配置使用vuex Vue.use(Vuex)4.创建公共数据仓库const store=new Vue
2021-02-08 21:24:29
109
原创 Vue脚手架
文章目录01.vue-cil创建基本项目结构02.项目文件03.运行代码测试01.vue-cil创建基本项目结构npm install vue-cli -g 全局安装vue-cil验证是否安装成功 vue --version生成项目模板 vue init 模板名 项目目录名称simple 基本没用webpack 可以使用(大型项目)Eslint 检查代码规范，单元测试webpack-simple 个人推荐使用, 没有代码检查 √进入到项目目录里面下载包 cd
2021-02-04 23:42:24
158
原创 Vue路由实现页面跳转
要求：默认加载猜你喜欢页面猜你喜欢和购物车在一个页面，我的在另一个页面点击商品可以进入商品详情页点击返回可以返回之前的页面<body> <div id="app"> <router-view></router-view> </div> <!-- 默认渲染此模板 --> <template id="first"> <main>
2021-02-02 22:26:54
240
原创 Vue路由
文章目录01.路由02.路由嵌套(内容渲染到固定位置)03.路由嵌套(内容渲染到指定位置)04.路由传参05.路由方法01.路由spa:单页面开发。只有一个页面。其余页面通过路由跳转单页面开发的时候，不可能有a标签。页面跳转通过路由实现vue实现页面跳转要通过router-linkrouter-link最终会被渲染成a标签，不能自己书写a标签(不规范)router-view存储是最终渲染的内容定义路由 var router=new VueRouter({})在路由中配置路线 route
2021-02-02 22:15:32
206
原创 Vue组件的嵌套和通信
文章目录01.组件嵌套02.组件通信03.父组件传参给子组件01.组件嵌套<body> <div id="app"> <login></login> </div> <template id="login"> <div> <ul> <li @click="aaa='account'">3
2021-01-31 23:20:44
179
原创 Vue传参后父组件的值跟随子组件改变
实现方法：引用数据类型是以地址的形式存在的，将父组件的值做成对象，然后传递给子组件，地址相同，子组件的值改变父组件的值也一同改变<body> <div id="app"> {{fmsg.con}}<br> <button @click='change()'>点击修改父组件的数据</button> <!-- 将fmsg赋值给a --> <v-header :a
2021-01-31 23:02:32
215
原创 Vue动态组件实现移动端分类功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar
2021-01-31 21:11:50
561
原创 Vue组件
文章目录01.组件的基本使用02.slot03.动态组件01.组件的基本使用组件：前端模块化、工程化的基础。把前端页面分成一个一个的小模块。这些小模块就称为组件组件使用：使用占位符 英文即可。不能和标签名字一致，一般需要有语义定义组件 let 组件名=Vue.extend({})定义模板 书写所要渲染的标签挂载组件 相当于把模板和组件联系起来 <body> <div id="app"> <!-- 占位符 --> <v-he
2021-01-29 22:05:36
144
原创 将json字符串转为对象
let jstr='{"name":"张三","age":"18"}'console.log(jstr)console.log(typeof jstr)let jobj=JSON.parse(jstr)console.log(jobj instanceof Object)
2021-01-29 01:38:17
142
原创 原生js实现获取li的索引
<body> <ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>55</li> </ul> <script type="text/javascript"> //获取所有的li let lis=document.getElementsByTag
2021-01-29 00:48:23
750
原创 实现元素宽度跟随浏览器窗口变化
<body> <div id="left"></div> <div id="center"></div> <div id="right"></div> <script src="jquery-3.4.1.js"></script> <script type="text/javascript"> //浏览器窗口改变时触发 $(window).resize(()=&g
2021-01-29 00:38:00
530
原创 清除浮动的方法
给父元素加height——有局限性给父元素加overflow:hidden——有副作用给父元素加子元素 clear:both——语义有问题给父元素添加后置的内容生成" ",显示样式为table，清除浮动clear:both——无任何副作用...
2021-01-29 00:21:20
115
原创 css动画
用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #circle{ /*半径200*/ width: 400px; height: 400px; border-r
2021-01-29 00:18:53
237
原创 手机号的正则表达式(以1开头的11位数字)
let phone=13715945748;//乱写的let reg=/^1[3|4|5|7|8][0-9]{9}$/;console.log(phone,reg.test(phone)?'正确的手机号':"不正确的手机号")^1 以1开头[3|4|5|7|8] 第二位是3或4或5或7或8任意一位[0-9]{9}$ 以0-9任意9位数字结尾...
2021-01-29 00:12:17
18708
2
原创 前端面试题82----页面之间是怎么传参数的？
01.cookie传参书写cookie：res.cookie('cookie名字',cookie值(传递的参数),{maxAge:100000})获取cookie：req.cookies.cookie名字02.session传参书写session：req.session.session名字='session的值(传递的参数)'获取session：res.send(req.session.session名字)03.ejs传参res.render('页面',{"name":"传递的参数"})0.
2021-01-28 23:58:33
143
原创 localstorage和sessionstorage的区别
localstoragelocalStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据sessionstoragesessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的sessionstorage注意点：页面刷新不会消除数据只有在当前页面打开的链接，才可以访sessionStorage的数据只有当全部关闭页面和从其内部打开的所有页面 或者直接关闭浏览
2021-01-28 23:49:46
174
原创 Vue实现切换导航栏
原理：导航栏对应子页面，index一样的话子页面就显示<body> <div id="app"> <ul> <li v-for="(top,index) in top" v-bind:class="{current:num==index}" v-on:click="change(index)">{{top}}</li> </ul> <div id="
2021-01-27 00:25:53
2495
原创 Vue实现微博发布和删除功能
原理：利用数据的双向绑定，点击发布按钮获取文本域的数据，然后向data中添加<body> <div id="app"> <div> <ul> <li v-for="(blogs,index) in list"> {{blogs.content}} <button v-on:click
2021-01-27 00:23:53
668
原创 Vue指令
文章目录01.v-if和v-show02.v-for03.v-model04.v-bind05.v-cloak06.v-once和v-pre07 .prevent和.stop08.watch和computed01.v-if和v-showv-if控制的是标签是否存在 true存在 false的时候是不存在v-show控制的是标签的显示隐藏 true显示 false的时候隐藏如果变量作为的值的时候，不用加{{}}如果只是单纯显示隐藏最好使用show 。效率高<body> <d
2021-01-27 00:21:30
337
原创 Vue插值表达式和事件
文章目录01.Vue声明式渲染02.MVVM03.Vue使用相关问题04.插值表达式05.事件06.操作标签内容01.Vue声明式渲染<body> <div id="#app"> {{msg}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"Hello!Vue" }
2021-01-25 00:28:06
583
原创 ejs和websocket
文章目录01.ejs模板引擎02.使用ejs呈递静态资源03.ejs语法04.websocket05.实现简单的实时通信对话01.ejs模板引擎ejs就是模板引擎(在html页面中书写js)使用方法下载包 npm i ejs -S引入包 const ejs=require('ejs')设置可以使用ejs模板引擎app.set('view engine','ejs')ejs呈递静态资源呈递ejs页面 res.render('文件名字') 自动去views目录寻找该文件(文件后缀要改
2021-01-09 10:45:11
207
原创 cookie和session
文章目录01.cookie和session的区别02.cookie03.在浏览器中写入cookie04.session05.服务器端写入session01.cookie和session的区别链接02.cookie使用步骤：下载包 npm install cookie-parser -S引入包 var cookieParser=require('cookie-parser')配置app可以使用包(借助express) app.use(cookieParser())书写cookie：
2021-01-09 09:11:36
116
原创 实现分页功能
原理：点击第几页就跳过多少条数据再查询前台：<div> <a href="#" id="firstpage">1</a> <a href="#" id="secondpage">2</a></div>数据库数据：前端ajax：$("a").click(function(){ //点击按钮变色 $(this).css('background-color','blue'); $(this)
2021-01-06 18:43:38
110
原创 封装模块实现商品增删改查
文章目录01.前端02.封装的模块03.后台和数据库04.添加05.删除06.更新07.查询08.利用cookie验证是否登陆过01.前端<input type="text" placeholder="请输入商品名字" class="proname"><input type="text" placeholder="请输入商品价格" class="price"><button class="add">增加商品</button><input typ
2021-01-03 06:04:20
372
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人