笔记
文章平均质量分 65
An丶清风
这个作者很懒,什么都没留下…
展开
-
echarts的使用
目录1、基本使用2、常用配置项说明2.1、决定图表的类型和数据(series)2.2、标题(title)2.3、提示框(tooltip)1、基本使用先引入echarts 然后创建一个元素用来装载echarts图表 echarts.init() 方法初始化 echarts 实例 最后设置配置项和数据 option,使用 setOption() 方法根据数据和配置项来显示图表即可<!DOCTYPE html><html> <.原创 2021-12-21 16:35:24 · 471 阅读 · 0 评论 -
vue接收图片数据流,显示在页面
1、先通过ref获取到img元素。<img v-if="ls" ref="test" src="" alt="" />2、请求接口,获取到数据图片流,赋值到img的src中,注意,需要拼接“data:image/png;base64,”,逗号必须加axios.post(this.$api+"地址", JSON.stringify(data), { }).then(res => { console.log(res, 11111) t原创 2021-10-20 09:24:01 · 4022 阅读 · 0 评论 -
react初步学习(三)
目录一、列表 和 键列表(List), 键(Key)多组件渲染基本列表组件键(Keys)使用 Keys 提取组件keys 在同辈元素中必须唯一直接在JSX中使用map()二、 表单受控组件(Controlled Components)textarea标签select 标签多选select利用e.target合并多个输入元素的处理事件受控 Input 组件的 null 值三、 状态提升 (Lifting State Up)温度计算器状态.原创 2021-07-29 19:53:45 · 558 阅读 · 0 评论 -
react初步学习(二)
一、状态和生命周期 状态state, 生命周期 liftcircle. 之前说过,一旦元素被渲染了之后就不可改变了,但我们可以通过重新渲染的方法使页面得以刷新,同样我们提到过最常用的方法是编写一个可复用的具有状态的组件,这里的状态,就是我们将要说的 state 我们对上述提过的计时器tick 中的计时功能封装成一个函数式组件如下:function Clock(props) { return ( <div> <h1&g原创 2021-07-27 20:07:10 · 415 阅读 · 0 评论 -
react 初步学习
什么是 React ? React是一个声明式的,高效的,并且灵活的用于构建用户界面的 JavaScript 库 一个最简单的React例子ReactDom.render( <h1>Hello World</h1>, document.getElementById('root')) ReactDom.render接受两个参数,第一个是要被插入的内容,第二个是插入到DOM或者说index.html的位置 一个与Html对比的简单组.原创 2021-07-26 19:18:56 · 122 阅读 · 0 评论 -
Vue.js中过滤器(filter)的使用
Vue.js 过滤器的基本使用(filter)vue中的过滤器分为两种:局部过滤器和全局过滤器1.定义一个全局过滤器原创 2021-06-02 15:06:45 · 547 阅读 · 0 评论 -
vuex的五个核心属性
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。Vuex有五个核心概念: state,getters,mutations,actions,modules。 1. state:vuex的基本数据,用来存储变量 2. geeter:从基本数据(state)派生的数据,相当于state的计算属性 3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用...原创 2021-06-02 14:40:21 · 1456 阅读 · 0 评论 -
vue中watch的用法
在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } })直接写一个监听处理.原创 2021-06-02 14:31:21 · 95 阅读 · 0 评论 -
浅谈vue的生命周期
一.了解先上张珍藏图:通过这张图我们可以了解到生命周期每个钩子函数的基本作用也能够了解到什么是生命周期vue的生命周期是什么??Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的原创 2021-06-02 14:22:58 · 158 阅读 · 0 评论 -
vue的语法使用
模板语法 一、插值 1.直接使用{{}} 将数据解释为普通文本,而非html代码 刷新或文档过长出现{{}}问题 解决1:可以用v-text 解决2:使用 v-cloak指令 <div v-cloak>{{msg}}</div> <style> ...原创 2021-05-27 10:18:46 · 149 阅读 · 0 评论 -
vue cli 3.0搭建
一、安装1、先安装node.js去官网:https://nodejs.org/en/,下载node.js左边是使用人数最多的,右边是最新版本的node.js,推荐选择左边的,稳定。安装成功以后,打开命令窗口,输入node -v出现版本号则代表安装成功2、全局安装过旧版本的vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步:npm uninstall vue-cli -g //或者 yarn global remove vue-cli3、安装@vue/c...原创 2021-05-27 09:46:31 · 295 阅读 · 1 评论 -
vuex的辅助函数--映射函数
使用mapState辅助函数import {mapState} from 'vuex'export default { name: 'home', computed: { ...mapState('user', ['nickname','age','gender']) // 可直接使用 } }mapActionsimport { mapActions } from 'vuex'methods: { // ...mapActions('user', ['原创 2021-05-27 08:43:48 · 341 阅读 · 0 评论 -
v-model实现父子组件通信
如何实现两个组件之间的双向传递呢?即,在父组件中修改了值,子组件会立即更新。在子组件中修改了值,父组件中立即更新。vue中有一个很神奇的东西叫v-model,它可以完成我们的需求。使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model1、v-model一般用于表单的双向数据绑定<template> <div> <input type="text" v-model="msg"...原创 2021-05-27 08:29:41 · 2203 阅读 · 0 评论 -
async和await的用法
一、async&await用法async 表示函数里有异步操作,await 表示紧跟在后面的表达式需要等待结果。同 Generator 函数一样,async函数返回一个Promise对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。二、async/await的优点1)方便级联调用:即调用依次发生的场景;2)同步代码编写方式: Promise使用then函数进行链式调...原创 2021-05-21 19:47:36 · 51236 阅读 · 3 评论 -
js中!和!!的用法
“!”可以与任何变量进行逻辑与将其转化为布尔值 !!是将表达式强制转化为bool值的运算,运算结果为true或false,表达式是什么值,结果就是对应的bool值,不再取非。判断变量a为非空,未定义或者非空串才能执行方法体的内容我们就可以用!!的方法来写,方便快捷if(!!a){ //a有内容才执行的代码... }代码中,!!a, 先将a转成取反的布尔值,将得到的布尔值再次取反,保证a的值为null,undefined和空字符串的情况下,if体中的代码不会执行。!可...原创 2021-05-21 19:28:51 · 423 阅读 · 0 评论 -
通过vue实现login登录
通过vue实现login登录使用element UI 插件里的loginhtml部分: <div class="login-section"> <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" ref="ruleForm" :model="ruleForm" >原创 2021-05-20 08:59:33 · 1393 阅读 · 0 评论 -
reduce()的使用
reduce()的使用以前只是看过reduce这个方法,但是没有上手使用过,今天研究了一下,算是又多了个会用的小技能吧。reduce()这个方法,平时基本很少用到它,因为reduce()可以解决的问题,用for循环,或者forEach方法有时候也可以搞定,但是reduce()可以用来处理很多数组的需求,...原创 2021-05-19 15:59:01 · 262 阅读 · 1 评论