前端
文章平均质量分 50
前端入门之路~
PP_L
世界会不会有一点点不一样?
展开
-
D3实战①环境搭建
安装node环境;新建package.json文件:{ "name": "d3-project-template", "version": "0.1.0", "description": "Ready to go d3 data visualization project template", "keywords": [ "data visualization", "d3" ], "homepage": "<project home page>",.原创 2021-03-24 23:08:19 · 557 阅读 · 0 评论 -
mavon-editor关闭cdn本地加载实现代码高亮
不用配置webpack实现本地加载mavon-editor资源,代码高亮功能。原创 2022-01-16 19:08:15 · 1091 阅读 · 3 评论 -
D3实战②选择器
常见修饰函数selection.attr()读取或改变已选中元素中的给定属性 // 将id属性的值设置为change d3.select("p").attr("id","change") // 读取属性值 var getId = d3.select("p").attr("id") console.log(getId); //"change"selection.classed()添加、删除选定元素中的c.原创 2021-03-29 21:28:01 · 478 阅读 · 0 评论 -
elementUI中输入框回车事件
<el-input placeholder="请输入IP或连接地址进行搜索" v-model="queryInfo.query" @keyup.enter.native="getHttpLogData()" >给 @keyup.enter.native绑定函数即可。原创 2021-03-22 21:15:55 · 444 阅读 · 0 评论 -
vue中使用el-table表格的expand展开对应tag标签
将表格获取到的数组对象中的attr_vals的值(格式为tag1,tag2)作为标签,在每条数据中分别展示:split将attr_vals获取到的值通过逗号分隔组成数组 <el-table-column type="expand"> <!-- 标签tags --> <template slot-scope="scope"> <span v-i原创 2021-01-26 23:04:15 · 1343 阅读 · 0 评论 -
vue转换表格数据中的时间戳
在使用vue做表格时,后端传过来的时间数据是时间戳的格式,需要将其转换后显示。时间戳数据存放于`res.data.goods[i].add_time`中,以下为具体转换步骤:1.在methods中添加时间戳转换方法; // 时间戳转换 timestampToTime(timestamp) { var date = new Date(timestamp * 1000) //时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = date.原创 2021-01-18 23:12:54 · 1483 阅读 · 0 评论 -
14-axios的使用
一、网络模块封装经过Ajax,JQuery-Ajax和不再维护的vue-resource后,选择官方推荐的Ajax库–axios。axios特点如下:在浏览器中发送XMLHttpRequests请求在node.js中发送http请求支持Promise API拦截请求和响应转换请求和响应数据等二、axios基本使用2.1 安装axios使用如下命令:npm install axios --save一个可以进行很多请求模拟的网站:httpbin.org2.2 使用axios在原创 2020-09-29 23:17:11 · 383 阅读 · 0 评论 -
13-VueX的使用
一、Vuex介绍Vuex是为Vue.js开发的状态管理模式,集中式存储管理所有组件的状态。可以理解为把多个组件共享的变量全部存储到一个对象中,再将这个对象放在最顶层的Vue实例里,其他组件就可以共享这个对象的所有变量属性了。由于自己封装一个对象不能保证它的所有属性都是响应式的,要达到响应式的过程又会十分的麻烦,所以vuex十分方便。需要共享的一些场景:登录状态、用户信息、收藏、购物车等。二、使用Vuex2.1 安装vuex在终端输入如下命令安装vuexnpm install vuex --sa原创 2020-09-29 23:15:31 · 177 阅读 · 0 评论 -
12-Vue-Router前端路由
一、前端路由前端路由是指由前端控制URL到页面的映射关系,即改变URL时,页面不进行刷新。改变URL通常有以下两种方式:1.1 URL的hash模式URL的hash是指锚点(#),本质是改变window.location的href属性,可以直接通过location.hash改变href属性,但页面不发生刷新。1.2 HTML5的history模式1.2.1 pushState也可以通过history.pushState改变URL,页面也不会发生刷新。类似一个栈结构,通过pushState入原创 2020-09-12 00:28:45 · 221 阅读 · 0 评论 -
11-Vue-CLI的使用与配置
一、Vue CLI安装开发大型项目,必然需要使用Vue CLI,俗称脚手架。开发时需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等,使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。1.1 使用环境Node:版本在8.9以上的Node环境(推荐 8.11.0+),默认安装npm,也可使用cnpm。Webpack全局安装:npm install webpack -g1.2 安装Vue脚手架3.x以上版本脚手架安装:npm install -g @vue/c原创 2020-09-12 00:23:20 · 309 阅读 · 0 评论 -
10-webpack的使用与配置
一、webpack安装全局安装webpacknpm install webpack@3.6.0 -g局部安装webpackcd 对应目录npm install webpack --save-dev--save-dev是开发时依赖,项目打包后不需要继续使用。全局安装后为何需要局部安装?在终端直接执行webpack命令,使用的是全局安装的webpack。在package.json中定义了scripts时,其中包含的webpack命令使用的是局部webpack。二、原创 2020-08-29 13:44:26 · 385 阅读 · 0 评论 -
09-vue插槽slot使用
在Vue组件的使用过程中,常常会遇到组件大体框架相同,但是部分内容在不同页面上显示需求不同的情况,此时就可以使用插槽,类似于在组件中挖一个坑,可以进行组件模板的替换。一、slot基本使用插槽功能通过标签:<slot></slot> 来实现。首先我们实现一个template,其中使用slot标签添加了一个插槽,插槽中放置了一个按钮标签,当组件标签中未添加内容时,就会默认显示按钮标签。 <template id="cpn"> <div>原创 2020-08-29 13:36:48 · 367 阅读 · 0 评论 -
07-表单绑定v-model
对于用户信息的提交,需要大量表单。vue中使用v-modle来实现表单元素和数据的双向绑定一、v-model原理v-model其实是一个语法糖,本质是包含两个操作:v-bind绑定一个value属性v-on给当前元素绑定input时间相当于以下代码:<input type="text" :value='message' @input='message = $event.target.value'>二、v-model:radio下面演示v-model与单选框radi原创 2020-08-09 16:07:21 · 211 阅读 · 0 评论 -
06-v-on、v-if、v-for
一、事件监听在开发中,需要监听用户发生的事件,如点击、拖拽、键盘操作等,在Vue中,使用v-on指令绑定事件监听器。v-on的语法糖为:@1.v-on基础操作在下面代码中,使用了v-on语法(使用的是语法糖@)绑定了一个点击事件,事件指向了一个methods中定义的函数: <div id="app"> <h1>{{message}}</h1> <h2>{{counter}}</h2> <butt原创 2020-08-09 16:02:59 · 346 阅读 · 0 评论 -
08-Vue组件化的实现与使用
Vue中利用组件化的思想把页面拆成一个个小的功能块(组件),每个功能块完成自己这部分独立的功能。一、组件的基本使用注册组件的基本步骤创建组件构造器 – 调用Vue.extend()方法注册组件 – 调用Vue.component()方法使用组件 – 在Vue实例的作用范围内使用代码示例: <div id="app"> <!-- 3.使用组件 --> <mycpn></mycpn> <mycpn&g原创 2020-08-09 16:07:47 · 197 阅读 · 0 评论 -
04-Vue的计算属性computed
在vue实例中,除了el、data、methods外,还存在一个叫做computed的计算属性,在计算属性中也是添加方法,但是调用的时候不用添加括号。1、字符串操作计算属性可以将两个字符串做拼接操作,简单的代码示例如下: <div id="app">{{fullname}}</div> <script> const app = new Vue({ el:'#app', data:{ firstnam原创 2020-07-21 21:58:30 · 581 阅读 · 0 评论 -
03-插值操作(Mustache)与V-bind
一、插值操作1、MustacheMustache是胡子,胡须的意思,在Vue中,通过Mustache语法(双大括号)将data中的文本数据插入到HTML中。Mustache语法可以是简单的语句,也可以是表达式,有很多种写法。 <div id="app"> <h2>{{message}}</h2> <h2>{{message}},熊吱</h2> <h2>{{firstName + ' '原创 2020-07-14 21:22:04 · 553 阅读 · 0 评论 -
02-在VSCODE中添加Vue的模板代码
在初步学习Vue时,由于每次都需要手动敲一次Vue的导入以及实例模板,所以在这里介绍一下把模板事先写入VSCODE中,以后使用补全的方式就可以直接出现写好的模板。下面就教大家如何在VSCODE中设置Vue的模板。1、在VSCODE中依次点击左上角的文件-->首选项-->用户片段。这里是选择我们的模板将要作用于哪种类型的文件,这里我们选择html。2、然后我们需要配置一个html.json文件,文件内也写了配置的格式。其中:"Print to ...原创 2020-07-11 12:31:46 · 668 阅读 · 1 评论 -
01-Vue.js安装与初体验
一、初识Vue Vue是一个渐进式框架——可以将Vue作为应用的一部分嵌入其中 Vue有很多开发中常见的高级功能 解耦视图和数据 虚拟DOM 状态管理 前端路由技术 可复用的组件 学习Vue一定需要具备HTML、CSS、JavaScript基础二、安装Vue官方网站:https://cn.vuejs.org/v2/guide/installation.html方法一:直接CDN引用CDN地址参考:<!-- 开发环境版本,包含了有帮助的命令行警告 -原创 2020-07-07 23:21:55 · 308 阅读 · 0 评论 -
一些培养设计美感的网站(不断更新)
1.iconfont --图标https://www.iconfont.cn2.colorhunt -配色https://colorhunt.co/3.视觉中国 -ui界面https://www.ui.cn/4.dribbble - uihttps://dribbble.com/原创 2020-03-02 11:51:27 · 711 阅读 · 1 评论 -
前端之路② --webpack4学习(不断更新)
目录1.webpack基础配置#初始化项目#安装本地webpack#运行webpack命令进行打包#使用VS插件coderunner#手动配置webpack#直接使用npmrunbuild命令执行打包#生成本地服务配置#自动生成dist中的index.html文件-安装html-webpack-plugin插件#生产环境下进行文件压缩...原创 2020-03-01 13:06:13 · 275 阅读 · 0 评论 -
①超级基础的HTML5
一、基础知识1.浏览器内核浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。浏览器 内核 备注 IE Trident IE、猎豹安全、360极速、百度 firefox Gecko 火狐 Safari Webkit apple浏览器 chrome/Opera Blink 谷歌、欧朋,...原创 2020-01-16 17:13:53 · 283 阅读 · 0 评论