Vue2.X前端学习笔记

前端学习笔记（9）之css四种定位的本质和超长banner图如何居中

关于定位相对定位绝对定位粘性定位固定定位超长banner图如何居中相对定位相对定位是参照于元素在文档流中位置来定位的。position：relative不会脱离文档流，占据空间。相对定位会提升元素的层级，但并没有脱离文档流。※相对定位不会改变元素的性质，块还是块，行内元素还是行内元素。绝对定位绝对定位的特点：1.开启绝对定位后，不设置偏移量，元素的位置不会发生变化2.开启绝对定位后，元素会从文档流
前端之神风中告退·2020-07-30 21:16

前端学习笔记（10）之PC端高度自适应的两种情况

PC端高度自适应内容多时自适应高度，内容少时有最小高度没有最小高度，DIV完全自适应高度内容多时自适应高度，内容少时有最小高度min-height的值是分界点，小于min-height容器高度保持在min-height值，大于min-height值时容器自适应高度。a:内容增加，会把父元素高度撑开。b:当内容减少的时候，让容器保持一个最小高度。最小高度的设置：min-height没有最小高度，DI
前端之神风中告退·2020-07-30 21:16

前端学习笔记（7）之页面构建的技巧扩充

2个属性3个技巧空白空间的处理write-space溢出属性overflow单行文本溢出省略号显示布局页面的前期规划新闻列表流程空白空间的处理write-space属性值：prepre-wrappre-linenowrap不换行溢出属性overflowoverflow的两个子属性overflow-xoverflow-y属性值：visible默认值scroll产生滚动条auto自动hidden溢出隐
前端之神风中告退·2020-07-30 21:16

前端学习笔记（2）之CSS的零散知识总结

关于CSS的零散知识link和import区别样式表的权重关系样式表的层叠性导入外部样式表的两种方法关于选择器和伪类关于div内元素居中和color属性继承性网页布局中的命名规划文本大小fontsize控制文本类型font-family控制文本的行高line-heightlink和import区别link属于html@import属于css加载顺序：link和html同时加载而@import等待h
前端之神风中告退·2020-07-30 21:16

前端学习笔记（3）之css文本属性合集

文本模块缩进text-intent间距xxx-spacing控制文本大小写text-transform文本修饰text-decoration水平对齐方式text-align垂直对齐方式vertical-align文本加粗font-weight控制文本倾斜font-style文本换行处理解决input的border内嵌问题列表符号（不常用）缩进text-intent首行缩进：text-intent：
前端之神风中告退·2020-07-30 21:16

前端学习笔记 CSS 基础内容

参考视频：【极客学院】Web前端开发教学-第一部分：H5+CSS+JS参考文档：CSS教程W3school文章目录概述HTML引入CSS外部引入内部引入内联引入语法形式继承选择器通配符关系：分组选择器关系：派生(后代)选择器元素选择器id选择器类(class)选择器属性(值)选择器子元素选择器相邻兄弟选择器样式计量单位背景文本字体链接列表表格轮廓定位定位浮动常用操作对齐尺寸显示盒子模型四部分内容详
大熊软糖M·2020-07-30 21:15

前端学习笔记--分享

网页三层结构：结构+表现+行为核心技术：html+css+JavaScripthtml：超文本标记语言基本结构： 文档声明头    块级标签：         h1-h6、p、div、ul、ol、li、dl、dt、dd、br   行内标签：         span、i、em、b、strong   图片标签：            链接：         文本   表格：   table     
JackieDYH·2020-07-30 21:15

重学前端学习笔记---css的组成成分

css的顶层样式表由两种规则组成，一种是at-rule，也就是at规则，另一种是qulifiedrule，也就是普通规则。1.css的at规则也就是@再加一个关键字的语法（1）@page用于打印文档时修改某些css属性，只能修改margin,orphas,window和pagebreaksofthedocument四个属性描述：size：指定页面纸张大小marks：向文档添加剪切标记或注册标记bl
krysliang·2020-07-30 21:15

前端学习笔记（11）之过渡属性（transition）详解

有四个transition属性可以影响过渡效果指定要执行过渡的属性transition-property:过渡效果持续的时间transition-duration：过渡的时序函数transition-timing-function过渡效果的延迟transition-delay简写属性transition指定要执行过渡的属性transition-property:值widthheight，多个属性间
前端之神风中告退·2020-07-30 21:44

大前端学习笔记--持续随缘更新

目录前端知识&HTML常用标签标签&语义化&优先级&文本样式文本样式&表格&列表&表单css选择器&盒模型背景属性&css特性&标签分类&浮动属性伪元素选择器&浮动定位技术解决图片间隙&对齐方式&自适应布局精灵图&BFC阴影效果&ps操作圆角属性&兼容问题&csshackhtml5新增属性css3新增属性用户界面&多栏布局&过渡&2D&3D3种居中方法&帧动画&弹性盒子less&移动端布局方案媒体
JackieDYH·2020-07-30 21:44

【vue】vue2.x详解大全

不会就问就查询！科技利民，学海无涯2！1、vue.js的安装方式一：直接CDN引入方式二：下载和引入方式三：npm下载2、vue指令{{message}}//值不再改变{{message}}//原样输出{{message}}//结合[v-clock]{display:none;}样式，实现斗篷效果；我会被覆盖v-html='属性名':动态绑定输出内容，能识别解析html标签，覆盖标签文本我会被覆盖
ANKG·2020-07-30 11:57

Vue2.x之全局API

Day2------------全局API什么是全局API：并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能1.自定义指令Vue.directive在构造器外部用Vue提供给我们的API函数来定义新的功能。写个模块功能：最上方显示数字，默认初始值1，实现点击下方add按钮，每点一次数字+1；通过自定义指令绑定数字的style的color值为红色；DocumentVue.direc
Axis冬小冬·2020-07-30 10:58

Vue2.x内部指令

Vue2.x入门教程——Axis大家好！这是我第一次学习Vue.js，学习教材和资料来源于技术胖，很感谢他。此博客作为学习记录，欢迎入门的伙伴一起学习交流。若有偏颇之处，请大佬谅解和指正！
Axis冬小冬·2020-07-30 10:27

记录vue-waterfall-easy的踩坑之路

vue瀑布流布局，考虑到布局之后还有无限滚动加载，所以打算直接找一个插件来完成vue-waterfall首先试的vue-waterfall这个插件，waterfall是一个vue.js瀑布流布局组件，基于vue2
echo忘川·2020-07-30 09:02

Vuex源码阅读理解

$store根据这个mixin.js中的代码逻辑可以知道，在vue2.x的条件下：if(version>=2){  /*通过mixin将vuexInit混淆到Vue实例的
我的小英短·2020-07-30 07:47

前端学习笔记----Day09_position定位

Normalflow默认情况下，元素都是按照normalflow（标准流、常规流、正常流、文档流【documentflow】）进行定位default:不存在层叠现象标准流一般是通过marginpadding进行定位脱标元素使用position:fixed和absolute定位使用margin/padding定位的缺点1.设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定
Pamela_Liu·2020-07-30 01:16

anonymous的前端学习笔记(4)——jQuery入门及简单使用

文章目录jQuery的介绍和引用相关资源jQuery的引入jQuery选择器jQuery基本选择器代码示例页面效果选择同胞和父辈元素代码示例选择过滤完整代码示例jQuery操作样式jQuery绑定click事件jQuery操作属性jQuery操作元素jQuery动画效果函数jQuery的介绍和引用jQuery是目前使用最广泛的JavaScript函数库。jQuery的版本分为1.x系列和2.x、3
__anonymous·2020-07-29 13:55

bug大集

外卖项目中1.商品列表页中,使用better-scroll实现滚动菜单,,出现报错“Failedtoresolvedirective:el”错误原因：这是因为v-el在vue2.x以后被淘汰。
Guan ri·2020-07-29 12:57

Web前端学习笔记——VueJS之过滤器、生命周期、请求、动画

品牌管理案例添加新品牌删除品牌Document添加品牌Id:Name:搜索名称关键字：IdNameCtimeOperation{{item.id}}{{item.ctime}}删除//创建Vue实例，得到ViewModelvarvm=newVue({el:'#app',data:{id:'',name:'',keywords:'',//搜索的关键字list:[{id:1,name:'奔驰',cti
唯恋殊雨·2020-07-29 11:56

Web前端学习笔记——AngularJS之简介、起步、特性

目录Angular简介Angular是什么特性发展历史起源困境Angular2横空出世ng2相比ng1现状那我为什么要学习使用Angular？学习Angular的一些建议相关链接起步Step0.安装依赖环境安装Node.js安装npm安装Python安装C++编译工具安装cnpmStep1.安装脚手架工具AngularCLI安装失败解决方案Setp2.使用脚手架工具初始化项目Step3.Serve
唯恋殊雨·2020-07-29 11:56

Web前端学习笔记——HTML5与CSS3之QQ TIM案例

《QQTIM》案例Stellar插件描述视差滚动（ParallaxScrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。这种效果可以给网站一个很好的补充。特性视差滚动效果酷炫，适合于个性展示的场合。视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。视差滚动容易迷航，需要具备较强的导航功能。
唯恋殊雨·2020-07-29 11:25

Web前端学习笔记——iScroll

版本针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。目前我们有以下版本：iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台)iScroll精简版是又小又快的解决方案。i
唯恋殊雨·2020-07-29 11:25

Web前端学习笔记——HTML5与CSS3之购物车宣传案例

《购物车宣传》案例综合运用h5c3知识且进行一定扩展能使用jquery完成网页常见交互行为实际工作开发当中能应对活动宣传页全屏切换效果通过鼠标的滚轮切换全屏页面使用fullpage来完成使用动画（js实现动画，css3实现动画）一个是帧动画一个是补间动画什么是帧动画：使用定时器每隔一段时间更改当前元素的状态什么是补间动画：过渡(加过渡只要状态发生改变产出动画)动画（多个节点来控制动画）性能会更好在
唯恋殊雨·2020-07-29 11:25

Web前端学习笔记—— jQuery之样式、动画

jQuery操作样式CSS操作功能：设置或者修改样式，操作的是style属性。操作单个样式//name：需要设置的样式名称//value：对应的样式值$obj.css(name,value);//使用案例$('#one').css('background','gray');//将背景色修改为灰色设置多个样式//参数是一个对象，对象中包含了需要设置的样式名和样式值$obj.css(obj);//使用
唯恋殊雨·2020-07-29 11:24

Web前端学习笔记——VueJS基础

什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整
唯恋殊雨·2020-07-29 11:24

Web前端学习笔记——构建前端自动化工作流环境

目录为什么要有自动化的流程1.Node环境1.1.什么是Node1.2.Node环境搭建1.3.Node用途1.4.Node开发Web应用Demo1.5.NPM2.Bower2.1.什么是Bower2.2.为什么使用Bower2.3.Bower实践3.Sass/LESS4.Gulp4.1.Gulp简介4.2.Gulp准备工作4.3.基本使用4.4.常用插件为什么要有自动化的流程在我们的开发过程中有
唯恋殊雨·2020-07-29 11:24

Web前端学习笔记—— jQuery之简介、对象、选择器

jQuery简介JavaScript库的概念JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）常见的JavaScript库-jQuery、Prototype、MooTools。其中jQ
唯恋殊雨·2020-07-29 11:24

web前端学习笔记

一、HTML标签:由一对尖括号包裹的单词构成标签不区分大小写标签分为两部分:开始标签和结束标签.两个标签之间的部分我们叫做标签体.自闭和标签.例如:标签可以嵌套.但是不能交叉嵌套.标签的属性:以键值对形式出现的.例如name="alex"只能出现在开始标签或自闭和标签中.属性名字全部小写.*属性值必须使用双引号或单引号包裹例如name="alex"如果属性值和属性名完全一样.直接写属性名即可.例如
dingquan2917·2020-07-29 09:30

Web前端学习笔记—— jQuery之事件机制、补充、插件

jQuery事件机制JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。jQuery事件发展历程(了解)简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐)简单事件注册click(handler)单击事件mouseenter(han
唯恋殊雨·2020-07-29 09:00

Web前端学习笔记—— jQuery之操作节点、属性、尺寸和位置

jQuery节点操作创建节点//$(htmlStr)//htmlStr：html格式的字符串$('select{width:200px;background-color:teal;height:200px;font-size:20px;}.btn-box{width:30px;display:inline-block;vertical-align:top;}$(function(){//全部向右功
唯恋殊雨·2020-07-29 09:00

前端学习笔记（十三）

1.Vue常用的指令：v-modelv-ifv-elsev-showv-forv-bind----简写::class=“qq”、:type=“text”v-on----简写:@click=“qq”2.v-model的原理text和textarea元素使用value属性和input事件；checkbox和radio使用checked属性和change事件；select字段将value作为prop并将
大翰仔仔·2020-07-29 07:17

Web前端学习笔记——CSS基础、选择器

CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。CSS网页的美容师CSS的出现，拯救了混乱的HTML，当让更加拯救了我们
唯恋殊雨·2020-07-29 06:43

关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题

axios现在以及是尤大大推荐使用的了,官方不在维护vue-reresource.由于是地第一次使用axios,在使用过程中猜了很大的坑首先我们使用vue-cli创建的项目,访问接口肯定是跨域了,因为我们的本地服务默认的地址一般是localhost:8080我们的服务器端肯定不是这个,所以就形成跨域访问,axios不支持jsonp,所以我们就要使用http-proxy-middleware中间件做
webjiacheng·2020-07-29 06:10

Web前端学习笔记，详细的Web前端学习路线图

前端就是后台实现和视觉表现的桥梁，是贯穿在整个产品开发过程的纽带，起到承上启下的作用，一个好的前端工程师他能够很好理解产品经理对用户体验的要求，也能够很好地理解后台工程师对数据逻辑，或者程序逻辑进行分离的要求，并将这些要求转化成前台的开发工作。前端就是网站的门面，它的价值远大于其他的客户端开发。在移动互联网时代，相信我们每个人的手机上都装有数十个APP，这些APP的开发其实也和当下热门的Web前端
长沙千锋·2020-07-29 06:04

前端学习笔记（五）2020.03.02

CSS3盒子模型CSS3中可以通过box-sizing来指定盒子模型有两个值：content-box,border-box1.box-sizinf:content-box盒子大小为width+padding+border（以前默认的）2.box-sizing:border-box盒子大小为width如果盒子模型我们为了box-sizing:border-box,那padding和border就不会
纵马且长歌·2020-07-29 05:33

前端学习笔记 ！！持续加更,当然我知道我现在还配不上呢---哭

html相关标签整理＜html＞＜/html＞标签？？？呐尼这有什么好说的！！！——标签整理你真的了解DOCTYPE吗？——标签整理input表单标签最全整理使用情景细节处理等等等——标签整理与图像相关的html标签img以及各种格式的图片对比——标签整理css相关属性整理背景相关css属性你还模棱两可吗？进来看看有源码有实例——属性整理常见场景CSS居中DIV基础方法大全——场景整理css选择器
软件小姐·2020-07-29 04:54

Vue2.x源码——解析器

解析器的作用就是将模板解析成AST。那么什么是AST呢？下面我们先来了解一下AST到底是什么东西：AST（AbstractSyntaxTree，抽象语法树），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。例子：{{value}}将上面的模板转换成AST后：{type:1,tag:"div",attrsList:[],attrsMap:
白水煮青菜·2020-07-28 23:33

Vue使用v-model实现表单动态收集

欢迎大家加入我的github项目,一起学习，一起发展--->全栈工程师进阶学习站--->我的前端学习笔记--->行业内最新最群的报告，工作日每日更新—>原生js训练计划Document用户名:密码:性别
Gavincoder·2020-07-28 20:08

vue各种实例集合

注意：以下所有示例基于vue2.x、Vuex2.x、vm.
weixin_34320724·2020-07-28 19:32

vue2.x学习笔记

1.使用模板template的时候必须要有跟节点，可以支持表达式，但不支持正则，想使用正则就用过滤器。2.数据在显示的时候所带的HTMLDOM直接显示，不会渲染，要渲染DOM，得用v-html。3.使用v-model写单选和多选的时候，多选的数据关键字要用数组。4.加了multiple="multiple"的select标签，关键字自动变成数组.5.v-model修饰符number用来限定用户只能
weixin_30571465·2020-07-28 16:50

Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素

WebAPI介绍API的概念API（ApplicationProgrammingInterface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())WebAPI的概念浏览器提供的一套操作浏览
唯恋殊雨·2020-07-28 12:18

前端学习笔记(三) - 文本及列表标签、css基本长度颜色单位及文本和字体样式

文本标签：标签作用(语义)表示一段内容中的着重点,常为语气上的强调，显示为斜体表示内容的强调，显示为粗体没有语义上的强调，显示斜体没有语义的强调，显示粗体表示一些细则一类的内容，显示字号略小表示参考的内容，例如书名,《html基础》表示一个短的引用表示一个块引用，是一个块元素表示上标，例如22表示下标，例如H2O表示删除的内容，会添加一个删除线表示添加的内容，会添加下划线表示一个顶格式标签，会将代
sunshine2285·2020-07-28 12:28

Vue2.x 踩坑记录（持续更新）

踩坑少年欢乐多0.0记录下自己开发过程中遇到的坑，避免以后遇到了又一脸懵逼。（之前已经踩过很多坑了，没有及时记录，之后优化代码的时候再看到或者后续开发中遇到坑会更新到文章中。）computed修改data返回的数据出处是黄神的课程，源码是vue1.x，在2.x版本就会有这个问题，但项目还是可以正常跑起来的。修改方法很简单，官方API写的很明白了，给出官方示例：varvm=newVue({data:
sky_math·2020-07-28 11:31

Vue2.x路由守卫（路由钩子）详解

路由守卫vue-router提供的路由守卫主要用来通过跳转或取消的方式守卫路由，比如符合什么条件才可以进入路由，否则取消跳转，或者控制跳转路径，路由跳转成功过后需要做什么操作等等都可以使用路由守卫（路由钩子）实现，常用来做登录验证路由守卫分类全局守卫（全局前置守卫，全局解析守卫，全局后置钩子）路由独享守卫组件守卫全局前置守卫全局的守卫定义在main.js中使用router.beforeEach注册
kksw1121·2020-07-28 09:09

前端学习笔记——“贪吃蛇”小游戏制作（二）

上篇笔记我完成了“贪吃蛇”的背景制作，下面开始实现由上、下、左、右键盘控制颜色款的移动方向。点击开始按钮，颜色块向右匀速移动，按下方向键盘，即改变方向。当颜色块移动到背景边缘，提示“游戏结束”。我的思路如下：一、用定时器实现颜色块的匀速移动functiontimer(){time=setInterval(function(){//用获取id的方式给当前块加上背景颜色//当给下一个id添加背景颜色后
dsq-ee·2020-07-28 08:18

javascript --- > vue2.x中原型的使用(拦截数组方法) && 响应式原理(部分)

说明在Vue2.x中,利用了对原型链的理解,巧妙的利用JavaScript中的原型链,实现了数组的pop、push、shift、unshift、reverse、sort、splice等的拦截.你可能需要的知识参考
栗子好好吃·2020-07-28 04:44

vue2.x plugin vue2-touch

今天小编想和大家分享一下Vue2.x的手势插件--简单来说就是Hammerjs的vue2.xplugin的封装。
山姆极客·2020-07-27 23:36

vue2.x源码解析四——2.Vue的静态方法

//src/core/index.jsVue.version='__VERSION__'//src/entries/web-runtime-with-compiler.jsVue.compile=compileToFunctions//把模板template转换为render函数//src/core/global-api在目录结构中，我们指出，Vue的静态方法大多都是在该文件夹中定义的//src/
南张门·2020-07-27 23:40

vue2.x源码解析四——3.Vue的实例方法

vm._uid//自增的idvm._isVue//标示是vue对象，避免被observevm._renderProxy//Proxy代理对象vm._self//当前vm实例vm.$parent//用于自定义子组件中，指向父组件的实例vm.$root//指向根vm实例vm.$children//当前组件的子组件实例数组vm.$refsvm._watcher=nullvm._inactive=null
南张门·2020-07-27 23:40

vue2.x源码解析六——组件化--1.简介

（前一个为vue2.x源码解析五–数据驱动）。组件化：就是把页面拆分成多个组件(component)，每个组件依赖的CSS、JavaScript、模板、图片等资源放在一起开发和维护。
南张门·2020-07-27 23:40
上一页 27 28 29 30 31 32 33 34 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他