小白的前端开发学习之路
码码姑娘
这个作者很懒,什么都没留下…
展开
-
js手写深拷贝
深拷贝手写原创 2022-08-05 15:42:02 · 558 阅读 · 1 评论 -
实现数组扁平化
数组实现扁平化原创 2022-08-05 10:46:33 · 225 阅读 · 0 评论 -
Object.create()手写
Object.create()手写原创 2022-08-03 13:41:43 · 217 阅读 · 0 评论 -
Object.assign手写实现
Object.assign原创 2022-08-03 13:38:09 · 302 阅读 · 0 评论 -
Vue--表单收集数据,表单控件如何实现双向绑定
<!-- 如果是<input type="text"> 文本框,那么收集的就是文本框的内容,直接绑定v-model即可 如果是<input type="radio"> 单选框 手机的value值,必须要给标签的value值,这样才能收集到值 如果是<input type="checkbox"> 复选框 1,没有配置value值,收集的是checked,勾选的就是true, .原创 2021-11-24 17:04:14 · 477 阅读 · 0 评论 -
Vue--Vue进行监测数据的原理
一、想让后来添加的属性也能做到响应式VUE.set(vm._data.某个对象,添加的属性,给定的值)注意:Vue.set()和vm.set() 不能给vm或者vm的根数据对象添加属性,也就是不能给vm本身添加属性。div id="root"> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> <h2>学生姓名:{{student.name}}原创 2021-11-24 11:43:38 · 283 阅读 · 0 评论 -
Vue--条件渲染、列表渲染
条件渲染v-show 条件渲染、条件显示v-show 条件渲染、条件显式 实现display的效果 =>v-show(false)==display:none通常让一个元素显式、隐藏(display:none; visibility: hidden)原生的js:stylejQuery: cssvue : v-show v-if<h1 v-for="count in 5" v-text="count" v-show="false"></h1>v-if原创 2021-11-24 11:40:38 · 96 阅读 · 0 评论 -
Vue--绑定样式
绑定class 和style 样式。style 和 class 的绑定(不算指令) 1)style==> 抽象出来:它是一个对象 <h1 :style="{color:'red'}">style</h1> 可以单独把{color:'red'}抽取到data里头 2) class ==>抽象出来:它是一个数组array<h1 :class="['c1','c2']">class隶书</h1> 可以单独把['类名1','原创 2021-11-24 11:38:44 · 137 阅读 · 0 评论 -
Vue--计算属性与监视属性
vue认为data中的写的都是属性计算属性:拿着属性去进行加工配置项:computed<body> <div id="root"> 姓:<input type="text" name="" id="" v-model="surname"> <br> 名: <input type="text" name="" id="" v-model="name"> <br>原创 2021-11-24 11:38:02 · 224 阅读 · 0 评论 -
Vue--事件修饰符
刚刚学习了点击事件v-onclick,在点击某个控件的时候进行事件的绑定,触发某一个事件,注意需要在vue实例中将定义的触发函数进行注入,如果说想对于href这种能够点击的事件进行触发事件,我们就需要首先将本身的点击进行阻止,使用e.preventDefault()组织默认行为,或者是@click.prevent总共的事件修饰符:. stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递)。. prevent:阻止默认事件的发生。. capture:捕获冒泡,即有冒泡发生时,有该修饰符的dom原创 2021-11-24 11:34:53 · 411 阅读 · 0 评论 -
Vue--键盘修饰符
键盘修饰符1.概念与作用:>相当于是event.keycode来绑定按键事件>onclick onscroll ondblclick 都是鼠标事件....>keyup keydown keypress(keydown + keyup)>键盘修饰符是给上述三类key做绑定用的。2.定义键盘修饰符://键盘修饰符定义 定义回车并且去f2别名 13 对应的是enter 回车键Vue.config.keyCodes.f2 = 13;3.使用 <!-- 按en原创 2021-11-24 11:33:35 · 942 阅读 · 0 评论 -
Vue常见的几种指令
常见的几种指令:1. v-cloak 解决页面闪烁问题{{}} 插值表达式(并不是指令)2. v-text 类比jQuery里头的text()3. v-html 类比jQuery里头的html()4. v-on: 事件名称 ==>(绑定事件)>@click v-on: 用@来代替<button type="button" @click="add" >添加</button><input type="text" v-model="condi原创 2021-11-24 11:30:40 · 446 阅读 · 0 评论 -
2021-11-19 Vue学习笔记
原型链尚硅谷有一个课,去截个图VUE相关笔记在Vue来修改dom的过程中,一个vue实例只能对应一个dom对象,一个dom对象也只能对应一个vue实例,两者是一一对应的,而且如果vue实例中没有 定义的属性,如果dom中有,控制台就会报错。注意区分js表达式和js代码. <div id="root"> <h1>hhhh:{{name}}</h1> <h2>xx;{{age}}</h2> <原创 2021-11-19 17:41:23 · 741 阅读 · 0 评论 -
vue-devtools 安装
vue-devtools 是在chrome游览器的插件,用于来调试vue应用。下载地址:https://github.com/vuejs/devtools/tree/add-remote-devtoolsadd-remote-devtools分支下面有一个Instalation ,选择Chrome版本进行下载,下载后添加到Chrome的扩展程序,**注意:**打开扩展程序的开发者选项。并将【在无痕模式下启用、允许访问文件网址】两个选项进行勾选,并将其规定在导航栏。此时的vue的标是灰白色,是因为我们原创 2021-11-19 11:20:26 · 569 阅读 · 0 评论 -
2021-11-16 一天一个例子 li拖拽
实现li标签的拖拽功能,在html5之后,链接、文本和图像默认是可以拖动的,其他的控件想要实现拖拽,在定义的时候将 draggable 设置为true。在进行拖拽的时候,使用具体的一些方法:for(var i=0;i<aA.length;i++){ aA[i].ondragstart = function(ev){ //拖拽前触发 this.style.background = 'yellow'; ev.dataTransfer.setData('a','hell原创 2021-11-16 15:48:53 · 996 阅读 · 0 评论 -
2021-11-16 一天一个例子 复选框 和 时钟变换
label标签的使用label标签和特定的表单控件关联之后,如果用户在label元素内点击文本,就会触发关联的表单。也就是让label标签和checkbox和radio等关联,实现点击文字也可以实现选中CheckBox和radio。使用的方法:一,显示关联使用 label for<input type="checkbox" id="checkAll"> <label for="checkAll">全选</label> 二,隐式关联就是直接将表单控件放到l原创 2021-11-16 10:14:10 · 354 阅读 · 0 评论 -
2021-11-15 一天一个例子
学习使用js进行标签的增加和点击事件等学习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2021-11-15 10:00:49 · 67 阅读 · 0 评论 -
2021-11-01 vue项目创建
vue项目创建没有安装 vue-cli 时创建项目(初学者)没有安装 vue-cli 时,按照以下的步骤创建项目。vue init webpack testvue目录结构。创建好的项目,目录结构如下:package.json 文件部分内容如下:"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev原创 2021-11-01 15:27:36 · 225 阅读 · 0 评论 -
2021-11-01 Vue(JS框架)学习笔记
Vue(JS框架)学习笔记Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。Vue 将前端工程化。vue官方文档:https://cn.vuejs.org/v2/guide/installation.htmlvue特点:以数据驱动模块化开发。支持虚拟DOM。实现DOM监听和数据绑定。其他相关:网络通信:axios(前端通信框架)页面跳转:vue-router (路由)状原创 2021-11-01 15:25:25 · 215 阅读 · 0 评论 -
2021-11-01 web介绍页开发回顾总结
web知识学习flex布局flex布局是一个弹性布局,为盒状模型提供最大的灵活性。自己在使用的时候,就本次的开发的过程来说,每一个content都是一个describe和一个img,将两者都是用盒子包起来,【注意有时候就不要使用div包装img,因为会造成img的div被其他的样式污染】,img和describe是水平在content中且在垂直方向上居中的,所以我们就可以使用flex布局,然后设置flex-direction属性决定主轴的方向属性决定主轴的方向为水平row,(默认其实就是row,而且是原创 2021-11-01 10:38:28 · 125 阅读 · 0 评论