前端
文章平均质量分 63
boJIke
世界第一退堂鼓选手,著名电影、电视剧观众。
展开
-
Vue基础知识(一) - 插值语法
1.mustache语法( 也叫双大括号)mustache : 英文是胡须 / 胡子的意思,因为 {{ }} 像人的脸上两边的胡子(自行脑补)用法:在html标签中 插入 {{ 变量名 }} ,来显示自己要展示的数据注意:mustache语法中可以写简单的表达式代码如下:<div id="app"> <!-- mustache语法中可以写简单的表达式 --> <h1> {{firstName + ' ' + lastName}} <原创 2021-10-15 09:47:28 · 831 阅读 · 0 评论 -
vue常见面试题
父组件中添加 scoped 属性会影响子组件吗答:不会;在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的。去掉scoped之后,样式可以覆盖。但这样会污染全局样式。解决方案:使用 /deep/ 深度选择器v-if 和 v-show 区别答:v-if是按条件动态的增删DOM,v-show是设置display的block或nonev-if 有更高的切换开销,v-show 有更高的出示渲染开销。因此如果频繁的切换开销 v-show 使用 v-show 比较好,如果在运行时条件较少改变使原创 2021-10-15 09:47:36 · 133 阅读 · 0 评论 -
react路由-react路由的跳转以及路由信息
路由的配置属性路由配置属性主要有 path、name、component 等。path:组件相对路径name:组件路径别名component:组件地址在路由配置中,有两个属性 exact 和 strict 表示路径匹配。“/detail” exact 属性为 true 时匹配的路由有:"/detail/",但是 url 中有 “/detail/” 匹配不到。“/detail” strict 属性为 true 时匹配的路由有:"/detail",但是 “/detail/” 可以被匹配到。综原创 2021-10-15 09:47:44 · 670 阅读 · 0 评论 -
vue.js源码解析(一)
虽然vue3已经出来很久了,但我觉得vue.js的源码还是非常值得去学习一下。vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到。所以我近期会对vue.js的源码进行解读,分享值得去学习的代码片段,这篇文章将会持续更新。一、哪些值得我们学习的地方:1.代码严谨,做了很多值和类型判断的工具类.例如判断已定义、未定义、判断原始类型、判断对象等等。2.源码中多处使用到call,bind,apply,所以学习call,apply,bind很重要,请阅读我的另一篇文章可进行学习:(https://原创 2021-10-15 09:47:59 · 289 阅读 · 0 评论 -
vue源码解读--计算属性
默认情况下页面将渲染出"default",当我们第一次点击onChangeIndex函数后将显示"三岁就会写bug",同时打印出’‘update’’,当再次点击则页面不会有变化,但是仍然打印出"update";当点击onChangeName后页面展示"三岁就会写bug哦",同时打印"update",当再次点击时,则页面无变化同时不会打印"update".那么为什么会这样呢?几个小问题我们之前在分析组件的createComponent和组件的init时候都跳过了部分关于computed的逻辑在组件创.原创 2021-10-15 09:48:05 · 309 阅读 · 0 评论 -
web前端面试
1.vue是什么Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库,拥有非常容易上手的 API;Vue.js是一个构建数据驱动的 Web 界面的库(数据驱动视图)。2.vue优点轻量级的框架双向数据绑定指令插件化(组件化)轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;双向数据绑定:保留了angular的特点,在数据操作方面更为简单;组件化:保留了react的优点,实现了h原创 2021-10-13 10:15:20 · 131 阅读 · 0 评论 -
2021前端面试涉及点
174道JavaScript 面试知识点总结(下)[Vue中文社区](javascript:void(0)???? 昨天、文章有许多金典阅读推荐建议点赞加收藏图片来源 | https://github.com/CavsZhouyou/全篇篇幅较长,保障阅读体验,故拆分为上中下3部分发布174道JavaScript 面试知识点总结(上)174道JavaScript 面试知识点总结(中)以下为第三部分URL 和 URI 的区别?URI: Uniform Resource Identifie原创 2021-10-13 10:14:45 · 135 阅读 · 0 评论 -
JavaScript数组技巧
数组是Javascript最常见的概念之一,它为我们提供了处理数据的许多可能性,熟悉数组的一些常用操作是很有必要的。1、数组去重1、from()叠加new Set()方法字符串或数值型数组的去重可以直接使用from方法。var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];var uniquePlants = Array.from(new Set(plants)); c原创 2021-10-13 10:13:02 · 92 阅读 · 0 评论 -
(转载)vue表单验证插件vva-js
最近写了一个vue的表单验证插件,第一次写插件,其中的一些设计模式不够优化,产品逻辑不够成熟,但作为自己的第一个完成的插件,写完了还是觉得小有收获的,特此记录。目标主要目标:将需要绑定验证的表单元素根据绑定的规则进行验证,验证通过则可进行表单提交(规则通过后由用户编写通过后程序逻辑)整体思路具体思路1.vue实例中自定义部分表单验证主要需要三种信息:1.用户自定义规则;2.提示信息;3.验证的时机每条输入的规则可能是多个的,对应的提示信息也不相同,此处均供用户自己填写,形如<inpu转载 2021-10-13 10:01:27 · 580 阅读 · 0 评论 -
vue+echarts图表点击事件
echarts 官方API提供了点击事件chart.on(‘click’)只获取到点击图形的数据;但是发现数据过小导致图形难以点击到的时候凉凉了,解决的时候发现tooltips中的数据与需要获取到的数据相同,具体代码如下:<div id="lineBar_chart" @mousedown="handleMousedown"></div>export default { methods: { handleMousedown(params) {原创 2021-10-13 10:01:41 · 5922 阅读 · 0 评论 -
vue图表ehchart和富文本编辑器的使用
vue图表用echart$ npm install echarts --save在你要用的XX.vue中引用import echarts from “echarts” <div class="charts"> <div class="className" id="myEchart" style="height:300px;width:400px" ref="myEchart"></div> data:<input type="te原创 2021-10-13 10:02:27 · 2720 阅读 · 0 评论 -
Vue轮播图
Vue轮播图的代码实现步骤和效果Vue轮播图效果主要用到的技术1.v-bind:属性绑定2.v-for:列表渲染3.v-show:条件渲染4.class的绑定切换5.created钩子6.Vue过渡效果步骤和对比1.写好html和cssPS:这里和jQuery轮播图有所不同,因为Vue使用了列表渲染,所以只需要一个简单的结构的可以了2.初始化一个Vue实例,然后挂在父元素上去,并且设定数据为图片的数组,以及后面计数用的mark,mark的初始值为0(第一张图片)3.分别在放置原创 2021-10-13 10:02:34 · 1400 阅读 · 0 评论 -
基于vue的图片上传预览插件
https://www.iqiyi.com/v_19rz6j9v50.htmlvue-image-upload-preview项目地址:github基于vue的图片上传和预览插件该组件引用了 mint-ui 和 lrzInstallnpm install vue-image-upload-preview --save-devUsage引入图片上传和预览组件,可按需引入 import {ImageUpload , ImagePreview} from 'vue-image-upload-原创 2021-10-13 09:54:14 · 4071 阅读 · 0 评论 -
react项目整理(react基础+react全家桶+ant-ui知识)基础篇(四)
项目中使用的功能方法请求外部的百度地图下的天气API先在百度地图开放平台,创建应用,选择浏览器,生成自己的AK码在代码中安装jsonpsudo yarn add jsonp --save封装jsonp方法import JsonP from ‘jsonp’export default class Axios {// 链式调用static jsonp (options) {return new Promise((resolve, reject) => {JsonP(options原创 2021-10-09 09:27:28 · 3529 阅读 · 0 评论 -
react项目整理(react基础+react全家桶+ant-ui知识)基础篇(三)
react生命周期getDefaultProps // 初始化props属性,props来自其他组件getInitialState // 初始化组件的状态componentWillMount // 组件加载之前render // 渲染componentDidMount // 组件dom插入之后componentWillReceiveProps // 接受父组件的传递shouldComponentUpdate // 组件的更新处罚componentWillUpdate // 组件要更新前co原创 2021-10-09 09:26:34 · 300 阅读 · 0 评论 -
react项目整理(react基础+react全家桶+ant-ui知识)基础篇(一)
基础知识点项目地址:https://github.com/yangxinjian/reactPractice.git完整项目地址(主要是这个)https://github.com/yangxinjian/reactAntBike.git准备阶段-基层环境安装node.js(官网下载即可)node -v (查看是否安装node完成)安装yarn新一代的包管理工具facebook开发,你也可以选择cnpmyarn的速度会比npm快安装版本统一,更安全更简洁的输出更好的语义化sudo c原创 2021-10-09 09:25:45 · 223 阅读 · 0 评论 -
react项目整理(react基础+react全家桶+ant-ui知识)基础篇(二)
react正式开始咯(上诉方法均为自己手打搭建一个react项目,了解每一步,接下来是react提供的项目创建方法)react => 视图层框架 组件化 JSX表达式 虚拟DOMFacebook 开源的一个JavaScript库React结合生态库构成一个MVC框架(vue也是mvc)特点:Declarative(声明式编码:只需要声明在哪里做什么,无需关心如何实现);Component-Based(组件化编码);高效-高效的DOM Diff算法,最小化页面重绘单向数据流生态介绍vue生原创 2021-10-09 09:19:31 · 193 阅读 · 0 评论 -
React爬坑之路三:Dva
前两篇写了react各种基本操作和主要概念但其实没必要那么复杂直接用框架就好啦这年头前端框架真是一睁眼就多出好几个傻瓜级教程写的不合理的地方请批评指正React官网:https://reactjs.org/菜鸟教程:http://www.runoob.com/react/react-tutorial.htmlES6入门: http://es6.ruanyifeng.com/Ant Design:https://ant.design/index-cnRedux: https://www.red原创 2021-10-09 08:54:36 · 422 阅读 · 0 评论 -
React爬坑之路二:Router+Redux
上一篇写了Antd和Axios的基本操作之前大标题到五了那么这篇从六开始ST也是初学小白可能讲的完全不对大家当做小说随便读读消遣一下就好React官网:https://reactjs.org/菜鸟教程:http://www.runoob.com/react/react-tutorial.htmlES6入门: http://es6.ruanyifeng.com/Ant Design:https://ant.design/index-cnRedux: https://www.redux.org.原创 2021-10-09 08:54:49 · 254 阅读 · 0 评论 -
最近京东抢茅台的很火啊,但是必须要京东plus会员。天猫超市抢茅台插件来咯
准备工作很简单 大家基本都有 。点击谷歌浏览器右上角三个点 - 更多工具—扩展程序文末放百度云下载链接 免得大家花积分下载。然后点击加载已解压的扩展程序 把解压的文件选择进去。这里注意不要选择双层文件夹 要最内一层的插入完成最好重启下浏览器。打开 https://cart.tmall.com/cart.htm 扫码登陆然后点击下插件框 再点击下茅台插件打开你的f12 看console是否出现安全警告 以及自动读秒。百度云网盘链接:https://pan.baidu.com/s原创 2021-09-28 20:09:45 · 1974 阅读 · 6 评论