![](https://img-blog.csdnimg.cn/20190815190737253.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
小菜鸟学前端
零基础学习前端
啊辉的小号
多学习,才能进步
展开
-
vscode 缩进异常
设置indent size 2图中三项选中可能会解决存在的问题原创 2022-02-21 15:37:20 · 862 阅读 · 0 评论 -
学习前端_vue组件_路由别名
我们在使用重定向是 当我们访问 /a时 会重定向到 /b 我们实际上访问的时/b。就好比我 小红给我打电话,我把电话转线到小刚那,小红实际上是在给小刚打电话。如图中这就是重定向的基本逻辑当我们在使用别名时,举例说明:当小红打电话给我时,说:嗨小明,我找小刚,我说:小红,就是我,我大名叫小明,小名叫 小刚。如图中这是别名的基本含义说完了别名具体含义接下来就看一下使用方法:在定...原创 2020-04-22 09:35:19 · 229 阅读 · 0 评论 -
学习前端_vue组件_命名路由
有时候我们在定义路由跳转时,没必要使用 path。我们可以在定义路由时,附加名称,这样我们在使用时,直接使用name 来定义跳转路由。使用步骤:1 定义路由时要 添加路由名称 name 属性。例如:const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user'...原创 2020-04-22 08:49:56 · 230 阅读 · 0 评论 -
学习前端_vue组件_路由_编程式导航
除了使用<router-link>创建 a 标签来定义导航链接,我们还可以借助 javascript 方式 调用router 的实例方法,通过编写代码来实现。通过这种方式我们能够更加方便的和灵活的跳转到任意导航。两种方式:router.push(...) 这种方式等同于<router-link :to="..."> 当执行router.push 时会向 hi...原创 2020-04-21 19:58:37 · 221 阅读 · 0 评论 -
学习前端_vue组件_动态路由参数
我们在匹配 规则时例如:{ path: '/user/1', component: User }当我们出现这种情况时:{ path: '/user/1', component: User }{ path: '/user/2', component: User }{ path: '/user/3', component: User }我们就是可以使用动态路由匹配,通过传参的方...原创 2020-04-21 19:25:35 · 248 阅读 · 0 评论 -
学习前端_vue组件_路由重定向
在这里先附上 官方链接https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html#%E9%87%8D%E5%AE%9A%E5%90%91在官方中没有具体表述路由重定向的含义对于新人来说可能不太好理解。路由重定向指:用户在访问A地址时,强制页面跳转到B页面,从而展示特定的组件页面;通过路由规则 redirect 属性...原创 2020-04-21 17:51:33 · 309 阅读 · 0 评论 -
前端笔记 单页面应用 spa
之前听到别人说什么单页面应用自己不了解什么意思。于是上网查了查,理一下到什么单页面应用指的是什么。要说但页面应用首先可以说说路由的概念和原理。路由分为前端路由和后端路由。先说后端路由 概念是:根据不同的用户URL请求返回不同的内容。本质上就是URL请求地址与服务器资源之间的对应关系。每次浏览器请求一个URL 地址,服务器 中 后端路由就会拦截地址然后 找到 服务器中的资源 返回给浏览器...原创 2020-04-21 11:08:41 · 283 阅读 · 0 评论 -
前端笔记——ES6 直接导入并执行模块代码
直接导入并执行模块代码只想单纯的执行某个模块中的代码,并不需要得到某个模块向外暴露的成员,可以直接导入并执行代码具体语法:被导入的模块aconsole.log("a")导入并且执行模块aimport "./a.js"此时就会导入模块a 中的代码 并且 执行 console.log("a")...原创 2020-04-16 10:03:56 · 893 阅读 · 0 评论 -
前端笔记——ES6 按需导入和导出
ES6基本语法按需导入和导出 按需导入 import { a} from "模块标识符" 按需导出 exprot let a="a" 按需导出 可以是多个 按需 导入 可以一次导入多个 export let a="a"export let b="b" import {a ,b} from "aaa" ...原创 2020-04-16 09:57:27 · 239 阅读 · 0 评论 -
前端笔记——ES6默认导出
ES6 模块化默认导出与导入 默认导出语法 export default 默认导出 默认导入 import 接收名称 from “模块标识符” 每个模块,只允许使用唯一的一次 export default 重点重点 let a="a"let b="b"export default { a, b} import aaa from "...原创 2020-04-16 09:50:45 · 673 阅读 · 0 评论 -
v-charts 爬坑三 富文本相关设置
在项目开发中,标签中的文字效果都是一致的,但是有时候会需要不同的效果,这时候就需要用到echarts 中富文本的概念。首先要找到echarts 文档中的你要修改的项,查看这个文档中关于富文本是怎么设置的例如仪表盘的detail 值中要添加%号这是文档中关于仪表盘富文本的相关介绍detail: { show: true, ...原创 2020-03-09 17:43:30 · 214 阅读 · 0 评论 -
v-charts 爬坑二 v-charts设置颜色渐变
从网上查了一些资料,有的需要引入ehcarts应该是v-charts老版本,目前版本应该不需要了,类似渐变都可以这样做。line 区域颜色渐变:areaStyle : { color: { type: 'linear', x: 0, y: 0, x2: 0, ...原创 2020-03-08 10:25:04 · 2515 阅读 · 2 评论 -
v-charts 爬坑一 v-charts如何对图表的样式属性进行设置
昨天在使用v-charts时,设置不同项的区域颜色时,遇到困难,网上查了一些资料大部分都是引入e-charts,再进行设置。由于是公司项目,不能再引入echarts。还好在github中找到了作者的方案。这是链接https://github.com/ElemeFE/v-charts/issues/468#issuecomment-410660972https://github.com/ElemeF...原创 2020-03-08 10:19:58 · 3986 阅读 · 0 评论 -
CSS 类选择器 如果您想把很多元素显示为灰色,可以使用类似如下的规则:
body, h2, p, table, th, td, pre, strong, em {color:gray;}通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。以下的两组规则能得到同样的结果,不过可以很清楚地看出哪一个写起来更容易:/* no grouping */h1 {color:blue;}h2 {color:blue;}h3 {co...原创 2020-03-07 10:09:28 · 261 阅读 · 0 评论 -
学习前端_npm 切换源
下载nrmnpm install -g nrm; nrm ls 查看源列表 nrm use 源名称这时候就切换源了原创 2019-11-28 18:38:51 · 146 阅读 · 0 评论 -
学习前端_播放带alpha 通道的视频
1.使用AE或者其他软件制作带有Alpha的视频2.使用ffmpeg 将其转化为 webm 格式的视频 -ac 设置为03.在video 元素中这只背景为透明background-color:transparent;以下是ffmpeg 命令ffmpeg -i in.mov -c:a libvorbis -ac 0 -b:a 96k -ar 48000 -b:v 1100k ...原创 2019-11-18 19:46:21 · 868 阅读 · 1 评论 -
css_让元素支持height:100%效果
如何让元素支持height:100%效果,有两种方式父级元素设置固定的高度值或者有效的百分比值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2019-11-15 14:40:39 · 200 阅读 · 0 评论 -
学习前端_vue组件_脚手架简单使用
脚手架官方网址https://cli.vuejs.org/zh/ 首先配置环境:cnpm install vue-cli -g 开启项目框架 :vue init 模板名 项目名 在项目目录下 安装相关依赖 npm install 运行一下,测试是否安装正确 npm run dev...原创 2019-08-20 10:27:00 · 80 阅读 · 0 评论 -
学习前端_vue组件_路由的传参
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...原创 2019-08-16 17:43:40 · 167 阅读 · 0 评论 -
学习前端_vue组件_路由的嵌套
渲染组件中设置自己的Router-link和RouterView 在routes中设置子路由配置 通过Children<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...原创 2019-08-16 12:38:58 · 113 阅读 · 0 评论 -
学习前端_vue组件_路由的简单介绍
Vue Router的官方网址:https://router.vuejs.org/zh/ 安装:https://unpkg.com/vue-router/dist/vue-router.js NPM : npm install vue-router 用Vue.js+Vue Router创建单页面应用,使用Vue.js,我们通过组合组成应用程序,当把Vue Router添加进来,我们需要将组...原创 2019-08-16 10:31:03 · 115 阅读 · 0 评论 -
学习前端_vue组件_slot内容分发
1.直接使用2.通过slot=''标记<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...原创 2019-08-16 09:43:21 · 91 阅读 · 0 评论 -
学习前端_vue组件_非父子级的组件间的数据传递
之前说过了父子级之间是如何传递数据的,接下来讲一下非父子级如何传递数据1.创建一个空的vue实例 例如:var datavue=new Vue();2.在数据源组件上添加发射方法,将想要传送的数据发射出去 例如:send(){datavue.$emit("edata",this.name) }3.在接收数据的组件接收方法,在合适的时间监听传送过来的数据 例如datavue.$on...原创 2019-08-15 18:21:34 · 120 阅读 · 0 评论 -
学习前端_vue组件_单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。可以通过这种方式双向随意的改...原创 2019-08-15 16:48:24 · 180 阅读 · 0 评论 -
学习前端_vue组件_父组件接收子组件中的数据
父组件不能直接获取子组件中的数据,只能通过子组件发送时间的方式传递数据1:在子组件中定义发送方法 例如:this.$emit('ve',this.name,this.address,this.sex) 第一个参数是事件名称,后面的参数是要发送的数据2:在掉用子组件的地方设置绑定 例如<my-vue2 @ve='getData'></my-vue2>...原创 2019-08-15 15:27:19 · 414 阅读 · 0 评论 -
学习前端_vue组件_子组件接收父组件中的数据
父子组件之间的作用域时独立的,因此想要调用数据就得使用一定手段进行数值传递1.在父子间中调用子组件时,绑定父组件中的数据 例如::father_name='name'2.在子组件props中申明要获取数据的名字 例如: props:['father_name']3在子组件中使用接收到的数据 例如{{ father_name}}<!DOCTYPE html>...原创 2019-08-15 14:33:21 · 471 阅读 · 0 评论 -
学习前端_vue组件_父子组件
父子组件:在一个组件内部定义另一个组件,被定义的组件称为子组件子组件只能在父组件内部使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...原创 2019-08-15 13:59:06 · 130 阅读 · 0 评论 -
学习前端_vue组件动态组件
多个组件使用同一个挂载点,可以实现他们的动态切换使用方法:只用<component :is="组件名"> 方式进行切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...原创 2019-08-15 12:33:12 · 109 阅读 · 0 评论 -
学习前端_vue组件引用模板
有时组件内容过多,可以将其提取出来放到模板中,并且对其引用 通过<template>实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...原创 2019-08-15 11:22:07 · 326 阅读 · 0 评论 -
学习前端_vue组件分类
vue组件分为两类:全局组件和局部组件1.全局组件时通过vue.component进行注册2.局部组件时在vue实例中注册:在components选项中定义自己得组件,对于comconents中得属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象<!DOCTYPE html><html lang="en"><head> ...原创 2019-08-15 10:58:40 · 172 阅读 · 0 评论 -
学习前端_vue组件创建方式二
1.通过vue.component注册组件2.添加挂载点3.创建<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2019-08-15 10:40:17 · 76 阅读 · 0 评论 -
学习前端_vue组件创建方式一
1.通过Vue.extend创建构造器2.注册组件3.设置组件挂载点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2019-08-15 10:27:58 · 76 阅读 · 0 评论 -
VSCode中如何浏览器打开Html
1.在插件中寻找open in browser,选择安装2.在编辑面板中右键 选择open in default browser或者 open in other browser 打开浏览器即可 ,快捷键alt+B原创 2019-08-04 17:37:35 · 2741 阅读 · 0 评论