前端学习
关注
分享
扫一扫
前端学习
沐果果
工作不分你我，做事不分边界，每个人都有值得学习的地方，每个公司都有值得学习的内容，每个事物都有好的一面，不太太乐观，也不要太悲观，努力做一个积极向上的人
展开
-
前端学习-超强VUE教程14虚拟dom-diff
本人还不太理解先贴上别人写的深入Vue2.x的虚拟DOM diff原理https://blog.csdn.net/M6i37JK/article/details/78140159原创 2020-07-19 22:09:20 · 74 阅读 · 0 评论 -
前端学习-超强VUE教程13计算属性
1、在{{}}里运算2、在methods也可以3、计算属性computed练习代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-07-19 21:44:55 · 146 阅读 · 0 评论 -
前端学习-超强VUE教程12（vue-axios）
vue-axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF官方文档http://www.axios-js.com/zh-cn/docs/引入方式1、模块化引入 npm install axios2、练习代码<!原创 2020-07-19 19:59:58 · 125 阅读 · 0 评论 -
前端学习-超强VUE教程11
Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能。Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。除此之外，Fetch 还利用到了请求的异步特性——它是基于 Promise 的。测试代码...原创 2020-07-19 19:26:24 · 90 阅读 · 0 评论 -
前端学习-超强VUE教程10-表单修饰符
.lazy在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：.trim如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：...原创 2020-07-13 19:15:27 · 108 阅读 · 0 评论 -
前端学习-超强VUE教程09-购物车
练习案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 开发环境版本，包含了有帮助的命令行警告 -->原创 2020-07-13 18:27:51 · 93 阅读 · 0 评论 -
前端学习-超强VUE教程08
Vue表单控件绑定v-model 指令在表单控件元素上创建双向数据绑定文本<div id="example-1" class="demo"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p></div><script>new Vue({ el: '#example-1', data: { m原创 2020-07-11 22:10:25 · 81 阅读 · 0 评论 -
前端学习-超强VUE教程02
vue-class动态绑定样式1、三目写法2、对象写法:class=“classObject”data() {return {classObject:{ active: true, sort:false }}}3、数组写法:class="[isActive,isSort]"data() {return{isActive:‘active’,isSort:‘sort’}}练习案例<!DOCTYPE html><html lang="en"><原创 2020-07-10 18:24:10 · 87 阅读 · 0 评论 -
前端学习-超强VUE教程01（目录导航）
Vue简介第一个vue程序el：挂载点data：数据对象原创 2020-07-10 18:23:55 · 175 阅读 · 0 评论 -
前端学习-超强VUE教程03
vue-style绑定行内样式和内联样式动态绑定一样有三种写法1、三目2、对象3、数组动态操作数组赋值练习案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2020-07-10 18:23:46 · 82 阅读 · 0 评论 -
前端学习-超强VUE教程04
vue 条件渲染v-if练习案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 开发环境版本，包含了有帮助原创 2020-07-10 18:23:38 · 176 阅读 · 1 评论 -
前端学习-超强VUE教程05
v-for遍历数组和对象都可以遍历练习案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 开发环境版本，包原创 2020-07-10 18:23:27 · 82 阅读 · 0 评论 -
前端学习-超强VUE教程06
列表过滤应用需求：根据input输入框判断输入的值显示数组一样的值利用fiter练习案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl原创 2020-07-10 18:23:17 · 102 阅读 · 0 评论 -
前端学习-超强VUE教程07 事件处理
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> <!-- 开发环境版本，包含了有帮助的命令行警告 --&原创 2020-07-10 18:23:06 · 100 阅读 · 0 评论 -
前端学习笔记vue-01（仿照网易严选）
仿照网易严选安装vue-clicnpm intall vue-cli -g项目初始化vue init webpack “vue-wangyi”使用vanthttps://youzan.github.io/vant/#/zh-CN/button通过 npm 安装npm i vant -S// 在.babelrc 中添加配置// 注意：webpack 1 无需设置 libraryDirectory{“plugins”: [[“import”, {“libraryName”: “van原创 2020-06-24 00:19:26 · 651 阅读 · 1 评论 -
VSCode - 快速生成vue模版
1、安装一个插件，识别vue文件插件库中搜索Vetur，点击安装，安装完成之后点击重新加载，即可使用2、新建代码片段mac的步骤如下，由于我安装了转中文插件，所以接下来会是中文的：code -> 首选项 -> 用户代码片段 -> (新建代码片段取名vue.json）新建代码片段这块可以直接往下找就能找到vscode上带的vue.json3、在vue.json里写下自己想要生成的vue模版{ "Print to console": { "prefix": "vue"原创 2020-06-20 19:51:03 · 695 阅读 · 1 评论 -
前端学习笔记css-05(练习案例)
css练习案例1、滑动门2、手机网站首页1、代码实现图片素材<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航栏</title> <sty原创 2020-06-14 21:23:05 · 279 阅读 · 0 评论 -
前端学习css-06（display:inline-block布局）
css之display:inline-block布局1.解释一下display的几个常用的属性值，inline ， block， inline-blockinline（行内元素）:使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.不能更改元素的height，width的值，大小由内容撑开.可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.block（块级元素）:使元素变成块级元素，独占一行，原创 2020-06-14 18:27:47 · 243 阅读 · 0 评论 -
前端学习笔记css-04
17定位的盒子居中显示★:margin:0 auto; 只能让标准流的盒子居中对齐。★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)18标签包含规范◆div可以包含所有的标签。◆p标签不能包含div h1等标签。◆h1可以包含p，div等标签。◆行内元素尽量包含行内元素，行内元素不要包含块元素。19规避脱标流◆尽量使用标准流。◆标准流解决不了的使用浮动。◆浮动解决不了的使用定位。20图片和文字垂直居中对齐vertica原创 2020-06-14 16:46:45 · 129 阅读 · 0 评论 -
前端学习笔记css-03
9行高◆浏览器默认文字大小浏览器默认文字大小：16px行高：是基线与基线之间的距离行高=文字高度+上下边距一行文字行高和父元素高度一致的时候，垂直居中显示。9.1行高的单位总结:单位除了像素以为，行高都是与文字大小乘积。总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。◆推荐行高使用像素为单位。10 盒子模型10.1边框 borderBorder-top-style: solid 实线dotted原创 2020-06-14 15:53:54 · 184 阅读 · 0 评论 -
前端学习筆記css-02
5样式表书写位置◆内嵌式写法<head><style type=”text/css”>样式表写法</style>◆外链式写法写在head里，◆行内样式表◆三种写法特点:★内嵌式写法，样式只作用于当原创 2020-06-14 15:19:55 · 112 阅读 · 0 评论 -
前端学习css-01
Css基础１Css概念CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)Css是用来美化html标签的，相当于页面化妆。◆样式表书写位置２选择器２.1写法选择器是一个选择谁（标签）的过程。３选择器３.1基础选择器◆标签选择器标签{属性：值;}特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。★颜色的显示方式◎直接写颜色的名称◎十六进制显示颜色0-9 a-f#000000; 前2为代表红色，中间2位代表绿色，后边2位代原创 2020-06-13 22:03:56 · 104 阅读 · 0 评论 -
vscode安装和使用前端工具
1、下载网址：https://visualstudio.microsoft.com/zh-hans/downloads/2.安装程序如下3.运行安装程序4.接收协议5.可选择修改默认安装路径6.快捷方式设置7.其他的设置8.安装9.等待完成10.安装完成VScode插件推荐Auto Close Tag自动添加HTML / XML关闭标签（必备）Auto Rename Tag自动重命名配对的HTML / XML标签(必备)Beautify格式化javascrip原创 2020-06-13 21:51:06 · 909 阅读 · 0 评论