糖糖小姐-CSDN博客

原创 CSS:文字单行显示，超出用省略号代替

// css方式单行显示超出用...代替 .goods-name { // 文字不换行 white-space: nowrap; // 超出部分隐藏 overflow: hidden; // 溢出后用...代替 text-overflow: ellipsis; margin-right: 3px; }

2021-11-07 23:19:40 334

ES6的基本语法默认导入与默认导出按需导入与按需导出直接导入并执行模块中的代码默认导出// 默认导出export default { n1, show }默认导入// 默认导入import xxx from './默认导出'console.log(n1) 按需导出export let s1 = ‘aaa’按需导入import { s1，s2 } from './03'按需导出'直接导入并运行代码import './05直接导入并执行代码'一个模块只能使用一

2021-10-24 22:33:16 544

原创 Array中常用方法使用

forEach((item,index)=>{}):遍历整个数组，一旦开始无法被终止some((item,index)=>{})：找到对应项可以终止循环every((item,index)=>{}):每一项都满足返回truefilter(item=>{}):选出一个reduce(()=>{累加的结果,当前的循环项},初始值) :累加器 const obj = [ { id:1,name:'西瓜',state:true,price:10,count.

2021-09-17 12:31:14 114

原创 vue中ref引用,this.$nextTick(cb)方法

this.$nextTick(cb方法)组件的$nextTick(cb)方法，会把cb回调推迟到下一个DOM更新周期之后执行，通俗的理解就是，等组件的DOM更新完成之后再执行cb回调函数，从而能保证cb回调函数可以操作到最新的DOM元素 showInput(){ //切换布尔值展示文本框 this.inputVisibie = true, //此时页面还未重新渲染 // this.$refs.iptRef.focus() this.$nextTick

2021-09-17 11:20:29 263

原创 Vue组件的生命周期

生命周期生命周期是一个组件从创建——>运行——>销毁的整个阶段，强调一个时间段生命周期函数是由vue框架提供的内置函数，会伴随着组件的生命周期自动按次序执行组件创建阶段（创建前，创建后，渲染前，渲染后） - befoCreate之前：props，data，method都不可用 - created：可用数据（在这个阶段发起ajax请求拿数据，不能操作DOM） - befoMout:将要把内存中编译好的HTML结构渲染到浏览器中，还没有当前组件的DOM结构（不能操作DOM）

2021-09-16 20:23:21 134

原创在Vue中使用组件的三个步骤

第一步，导入组件import Left from '@/components/Left.vue'2.第二步：使用components节点注册组件export default { name: 'App', components: { Left }}以标签的形式使用组件template> <div id="app"> <Left></Left> </div></template>通.

2021-09-15 21:18:04 247

原创滴滴一面面经

1.js中的数据类型有哪些2.说说标准盒子模型和怪异盒子模型的区别3.如何实现中间固定两边自适应布局4.浏览器中的状态码说说你知道的5.说说flex布局以及常用的属性6.newPromise(),定时器,promise.then()是宏任务还是微任务7.Vue的生命周期8.讲讲原型链9.闭包是什么能说一下吗10.304和302的区别...

2021-09-15 15:35:31 69

原创 vue组件的三个组成部分

vue组件的三个组成部分在template中只能出现一个根节点template组件—>模板结构script组件—>javacript行为style —>组件的样式<template> <div> <h3 class="h3-box">我是{{username}}同学, 今年{{age}}岁,请多多关照!</h3> </div></template>

2021-09-13 21:38:19 1439

原创 vue-cli的使用*

在终端创建项目 vue create **项目名称**vue中src目录的构成assets 文件夹:存放项目中用到的静态资源文件，例如css，imgcomponents文件夹:程序员封装的可复用的组件，都要放在components目录下mian.js是项目的入口文件，整个项目的运行，要执行main.jsvue项目的运行流程在工程化项目中，vue要做的事情：通过Main.js把App.vue渲染到index.html的指定区域中app.vueh会替换掉index.html里

2021-09-12 22:40:16 122 2

原创 axios.get和axios.post的使用

<button id="btnGET">axios.get</button> <button id="btnPOST">axios.post</button></body><script> document.querySelector('#btnGET').addEventListener('click',async ()=>{ const {data:res} = await axios.ge

2021-09-12 20:49:37 487 1

原创在vue中使用axios

axios的定义一个专注于发起网络请求的库基本使用发起get请求<script> //http://www.liulongbon.top:3006/api/getbooks const result = axios({ method:'GET', url:'http://www.liulongbin.top:3006/api/getbooks', //URL中的查询参数 params:{

2021-09-12 20:22:28 367 1

原创计算属性使用方法

计算属性的使用要定义成方法在使用的时候当作普通户型使用 computed:{ //所有计算属性都要定义到conputed节点之下 //计算属性在定义的时候要定义成方法格式 rgb(){ return `rgb(${this.r},${this.g},${this.b})` } }...

2021-09-12 17:02:37 533

原创 watch侦听器的用法

侦听器的格式watch侦听器用于监视数据的变化，从而针对数据的变化做特定的操作1.方法格式的侦听器缺点：1.无法在刚进页面的时候自动触发2.如果侦听的是一个对象，如果对象中属性发生了变化，不会触发侦听器 watch:{ username(newVal,oldVal){ if(newVal == ''){ return } console

2021-09-12 15:40:53 212

原创 filters过滤器的使用方法

过滤器（函数）过滤器（Filters）是Vue为开发者提供的功能，常用于文本的格式化，过滤器可以和v-bind属性绑定注：过滤器函数形参中的val永远都是管道符前面那个值ody> <div id="app"> <p> message的值是:{{message | capi}} </p> </div></body><script> const

2021-09-11 14:39:08 2192

原创列表渲染 v-for的使用

2021-09-10 22:25:11 127

原创条件渲染：v-if和v-show的区别

条件渲染指令v-if：动态的移除元素或者动态的创建元素当初始状态是flase，默认不需要展示，而且后期也很有可能不需展示时用v-if v-show：修改dispaly的属性值（适用于频繁切换元素）dispaly：none 实现元素的显示和隐藏3.在实际开发中，绝大多数时候不需要考虑性能问题直接使用v-ifv-if配套指令（v-else-if）注意：v-else-if必须配合v-if指令一起使用否则不会识别 <div v-if="type === 'A'">优</div

2021-09-10 15:42:24 94

原创 V-model双向绑定

v-model指令适用场景:1.input输入框2.textarea3.select修饰符.number 自动将用户输入值转为数值类型<input v-model.number="age">.trim 自动过滤用户输入的首尾空白字符.lazy 在‘change’时而非’input’时更新...

2021-09-10 15:20:40 65

原创 MVVM原理

Vue的特性数据驱动视图当数据发生变化时，页面自动重新渲染！程序员只需维护好数据。数据驱动视图是单向的数据绑定双向数据绑定在网页中，form负责采集数据，ajax用于提交数据 **在填写表单时，双向数据绑定可辅助开发者在不操作dom的前提下，自动把用户填写内容同步到数据源** 页面表单采集数据发生变化时候，会被vue自动获取到同步到jsMVVMMVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model,View

2021-09-10 13:08:18 153

原创 plugin插件的安装和使用

安装npm install [email protected] -D配置//使用node.js中的导出语法向外到处一个webpack的配置对象const path = require('path')//导入 html-webpack-plugin 插件得到插件的构造函数const HtmlPlugin = require('html-webpack-plugin')const htmlPlugin = new HtmlPlugin({ template:'./

2021-09-09 16:16:20 2167

原创爱奇艺，快手一面凉经

深拷贝和浅拷贝的区别，实现一个对象或数组的深拷贝js中的数据类型有哪些基本数据类型和引用数据类型的区别，怎么检测数据类型在数组中使用New的时候发生了什么讲讲项目中的技术难点如何解决margin重叠问题知道BFC吗如何使用编程题：驼峰变中划线...

2021-09-09 09:38:29 48

原创百度前端二面面经（实习）

百度前端二面面经（实习）谈谈你对Vue的理解写一个三栏布局（两边固定中间自适应）讲讲本地缓存，coockie,sesion,localstorage,sessionstorage的区别http和https的区别以及https的原理说一下tcp的三次握手写一个闭包函数知道事件循环吗了解es6语法吗，用过哪些？面试题：实现两个数组的差值，[1,2,3,4,5],[2,4,7] result:[1,3,7]...

2021-08-31 20:24:35 283

原创百度前端一面面经

百度前端一面面经（实习）用两种方式实现垂直水平居中，内部宽高不固定scirpt里面有哪些属性，async 和 defer的区别是什么？HTML5里面的语义化标签有什么作用，div和section几乎没什么区别为什么在html里面还会独立出来？用过事件函数吗，比如click等等哪些css元素可以隐藏？meta标签有什么作用你知道吗还记得怎么使用meta移动端布局吗网站的语言一般是什么语言block和hidden的区别是什么，overflow除了hiddin

2021-08-31 20:14:05 278 1

原创 async+await的使用和原理

异步：1.定时器，2.ajax 3.事件处理,nodejs读取文件promise优点：没有太多嵌套关系，是一个链式编程。//.then取结果let p1 = new Promise(function(resove,reject){ $.ajax({ url:"./php/ok.php", success:function(res){ resole(res) } })})p1.then(function(data){let p2 = new Promise(function(

2021-08-31 10:44:24 2880

原创防抖和节流

防抖（闭包封装定时器）用户触发事件过于频繁，只要最后一次事件的操作function debouce(fn,delay){ let t= null; return function(){ if(t != null){ clearTimeout(t); } t = setTimeout(()=>{ fn(); },delay)}节流（定时器）控制高频事件执行次数（每隔多少秒执行一次）...

2021-08-30 20:58:58 39

原创三栏布局的实现方式

float+margin方式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .container{ width: 1000px; height: 1000px; background-color: #FFFFFF; }

2021-08-19 17:55:18 40

原创用css画一条0.5px的线

使用transform画一条0.5px的线<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .line{ margin-top: 10vh; width: 100px; border-bottom: 1px solid #FF

2021-08-19 15:41:48 329

原创 Vue事件修饰符

Vue事件修饰符.stop：阻止冒泡.capture：捕获出发事件.prevent：阻止事件默认行为capture：实现捕获触发事件的机制once：事件只触发一次//使用.self 实现只有点击当前元素，才会触发事件处理函数,阻止当前元素<div class = "inner" @click.once = "divHandler"> <input type="button" value="戳他" @click = "btnHanlder"></input&g

2021-08-18 16:15:10 83

原创 Vue基本使用

vue的基本代码//vue实例控制的这个元素区域就是V<div id="app"><p>{{msg}}</p></div><script>// 2.创建一个Vue的实例//导入包之后，在浏览器内存中就多了一个Vue构造函数//new出来的vm对象就是 MVVM中的 vm调度者 var vm = new Vue({el:'#app',//当我们new这个Vue实例，表示页面上控制哪个区域data:{//data属性中，存放的是

2021-08-17 23:12:42 185

原创 XSS、CSRF以及防范

XSS(Cross Site Scripting):跨站脚本攻击 CSRF（Cross-site request forgery）:跨站请求伪造。XSS和CSRF是什么？XSS和CSRF攻击的特点如何防范XSS和CSRF攻击XSS（跨站脚本攻击）篡改浏览器正常显示窃取用户信息XSS攻击是指攻击者在网站上恶意注入客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。攻击者对客户端网页注入的恶意脚本一般包括Java.

2021-08-17 12:55:03 97

原创使用localstorage,cookie实现页面通信

调用localstorage在一个标签页里面使用Locastorage.setItem(key,value)添加/修改/删除内容；在另一个标签页里面监听storage时间，即可得到localstorage存储的值，实现不同标签页之间的通讯。在一个标签页调用 loacalStorage.setItem(name,val) 保存数据**localStorage.removeItem(name)** 删除数据的时候会触发**‘storage**事件在另外一个标签页监听document对象的storag

2021-08-16 23:32:27 119

原创 fetch与axios的区别

fecth与xios的定义fecth是浏览器提供的一个api，而axios是社区封装的一个组件fecth是一个低底层的api，是W3C的正式标准，使用起来不怎么舒服，所以需要封装，以便使用。fetch和axios的区别fetch是规范底层apiaxios是封装fetch和axios的优缺点...

2021-08-13 17:10:41 1848

原创 HTTP服务过程和浏览器缓存

一、1次完整的HTTP的服务过程当我们在web浏览器的地址栏中输入URL地址发生了什么？对网址进行DNS域名解析，得到对应的IP地址根据IP地址，找到对应的服务器，发起TCP的三次握手建立TCP连接后发起HTTP请求服务器响应HTTP请求，浏览器得到html代码浏览器解析html代码，并请求html代码中的资源（js，css，图片，先得到代码再找资源浏览器对页面进行渲染后呈现给用户服务器关闭连接== 注==DNS怎么找到域名？ DNS域名解析采用“递归查询”方式，先查DNS缓存

2021-08-12 23:17:14 103

原创 js中WebSocket的用法

js中WebSocket的用法Websocket连接前后端使用步骤WebSocket 定义WebSoket是HTML5开始提供在单个TCP连接上实现的双工通讯协议，使用WebSocketAPI使得客户端和服务器只需要完成一次握手，两者就可以创建持久性的连接，并且实现双向数据传输。以前也有Ajax轮询实现即时通讯，不过ajax轮询太消耗服务器的性能，而WebSocket协议能够更好的节省服务器资源和带宽，并且能够更好的进行实时通讯。Websocket连接连接WebSocket：New WebSock

2021-08-12 16:42:55 757

wyhcyzai99的博客