前端
bLaCk2333
这个作者很懒,什么都没留下…
展开
-
随笔记录
位操作小技巧两数相除,判断结果正负号:(a^b)>>31如果为0则是正号如果为-1则是负号原创 2020-06-21 19:22:17 · 178 阅读 · 0 评论 -
http状态码 301 302 303 307区别
http幂等性和本地环境相比,在分布式系统中,我们不能轻易不能保证分布式环境的可靠性。例如服务器端的返回结果由于网络等原因丢失了,导致客户端无法得知处理结果。在网页上,一些不恰当的设计可能会让用户认为上一次操作失败了,然后刷新页面,这就导致了接口被调用两次。如果使用幂等性方案,则将操作分成两个步骤:获取本次操作的id。使用本次id进行操作。HTTP协议本身是一种面向资源的应用层协议,但...原创 2020-05-07 22:04:21 · 557 阅读 · 0 评论 -
组件Prop
在HTML中,属性( attribute) 名是大小写不敏感的,所以使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:未完。。。...原创 2020-05-07 20:33:53 · 199 阅读 · 0 评论 -
vue组件注册
组件名众所周知,注册一个组件的时候,需要给它一个名字,比如在全局注册的时候:Vue.component('my-component-name', { /* ... */ })为了避免和当前以及未来的 HTML 元素相冲突,当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)的方式。也就是短横...原创 2020-05-06 16:19:29 · 256 阅读 · 0 评论 -
vue组件基础
概述:组件是可复用的 Vue 实例,且带有一个名字。它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。例:// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () {...翻译 2020-05-03 23:53:44 · 172 阅读 · 0 评论 -
VUE表单数据绑定
可以用 v-model 指令在表单input、textarea及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。tips:v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而...翻译 2020-05-03 18:28:24 · 2248 阅读 · 0 评论 -
ele:nth-child(n)和ele:nth-of-type(n)区别
两个都是选择父元素下对应的子元素,但是,有一定区别:father ele:nth-child(n)指的是先选择父元素下的第n个子元素,同时判断他是不是ele元素,只有他是ele元素时才选择成功,否则选择失败。father ele:nth-of-type(n)选择的是父元素下第n个ele元素,也就是说先收集所有ele元素,再从中选择第n个。(注意索引都是从1开始)在不指定ele情况下,即只有...原创 2020-04-27 17:38:45 · 303 阅读 · 0 评论 -
vue事件绑定
VUE可以使用v-on指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} tim...原创 2020-04-15 22:20:43 · 168 阅读 · 0 评论 -
vue列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。使用方法<ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.m...原创 2020-04-15 18:32:37 · 205 阅读 · 0 评论 -
vue条件渲染
v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。所谓truty值,和true有一些区别:MDN解释为:在 JavaScript 中,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)。相应地,可...原创 2020-04-15 12:38:45 · 108 阅读 · 0 评论 -
vue class和style绑定
对于元素属性绑定,常常使用v-bind,vue还针对class和style进行了专门的增强,表达式类型还可以使用对象和数组以减少因为字符串拼接而带来的不便和意想不到的错误。class绑定对象语法可以传给 v-bind:class 一个对象,以动态地切换 class:<div v-bind:class="{ active: isActive }"></div>此处...翻译 2020-04-15 11:03:56 · 118 阅读 · 0 评论 -
vue计算属性和侦听器
vue在模板中使用表达式虽然很方便,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。计算属性<div id="example"> {{ message.split('').reverse().join('') }}</div>对于任何复杂逻辑,都应当使用计算属性。例子:<div id="example"> ...翻译 2020-04-15 08:48:22 · 326 阅读 · 0 评论 -
VUE模板语法
由于Vue.js 使用了基于 HTML 的模板语法,所以能被遵循规范的浏览器和 HTML 解析器解析。并且在底层实现上,vue将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。插值文本插值使用双大括号{{ }}实现文本插值,即文本数据绑定通过使用 v-once 指令,也能执行一次性地插值,当数据改变时,插值...原创 2020-04-14 21:58:01 · 225 阅读 · 0 评论 -
javaScript Map使用及注意事项
Object与Map在Es6之前,对象Object常常被用作map的功能,因为两者都可以实现按键存取一个值、删除键、检测一个键是否绑定了值。但是Object在使用上还是有一些不便之处,例如:新增的键名可能会和Object原型链上的键名发生冲突。Object的键名只能是String和Symbol类型,事实上Symbol也是ES6新增的数据类型,因此在ES6之前,只能是String类型。Ob...原创 2020-04-14 11:20:46 · 576 阅读 · 0 评论 -
vue生命周期钩子
何为生命周期钩子官网解释:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。实际上,之所以叫生命周期钩子,就是在vue实例创建和执行的过程中,在每一步设置一个钩子函数,钩子函数可以理解成一个提前执行的回调函...原创 2020-04-13 23:35:36 · 175 阅读 · 0 评论 -
vue数据绑定整体思路
首先,数据绑定包含两部分:view->model以及model->view,view到model很容易实现,通过事件监听就可以,主要是model->view。vue的数据绑定是基于Object.defineProperty 实现的,Observer数据监听器通过为绑定的数据对象添加get和set函数来实现数据监听,当对象被获取的时候会自动调用get函数,对象变化时候会调用se...原创 2020-04-09 11:10:13 · 172 阅读 · 0 评论 -
js深拷贝浅拷贝区别及实现
区别:浅拷贝只能拷贝一层副本,对于对象中的子对象拷贝的是引用。而深拷贝能拷贝深层,实现完全独立。 function simpleClone(initalObj) { var obj = {}; for ( var i in initalObj) { obj[i] = initalObj[i]; } return obj; } function deepClone(o...原创 2020-03-25 23:45:17 · 115 阅读 · 0 评论 -
三列布局
情况一:两列定宽,一列自适应1.使用float+margindiv设置float:left,left的div添加属性margin-right:left和center的间隔px,right的div添加属性margin-left:left和center的宽度html<div class='test'> <div class='c1'></div> &...原创 2020-03-07 23:20:18 · 347 阅读 · 0 评论 -
图片在容器中居中方法
1.绝对定位+直接计算法:当父元素固定宽高时,利用定位,和margin。例如:父元素400px正方形 子元素200px正方形 css代码:.father{position:relative;}.child{position:absolute;margin:100px;}2.定位+平移.father{position:relative;}.child{position:absolut...原创 2020-03-07 21:37:48 · 700 阅读 · 0 评论