自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

code^_^熊的博客

记录,又是一遍思考的过程

  • 博客(95)
  • 资源 (2)
  • 收藏
  • 关注

原创 vue项目中使用Echarts绘图的步骤

vue+Echarts

2024-01-27 15:49:51 460

原创 安装5.0.0版本less-loader命令(vue项目下打开的cmd中)

【代码】安装5.0.0版本less-loader命令(vue项目下打开的cmd中)

2024-01-13 23:45:55 491

原创 Element UI的安装与引入

两步就行,如下图截图来源:点击链接: ElementUI的使用.

2021-12-17 15:02:45 364

原创 CSS背景图片代码示例

<html> //背景图片存放的地方 <div> </div></html><script> div{ background-image: url("browseBtn.png"); background-repeat: no-repeat; cursor: hand; width: 80px; height: 24px; }</script>

2021-12-10 15:28:44 2305

原创 uni-app UI框架之uview-ui使用教程

链接: uni-app UI框架之uview-ui使用教程.

2021-10-07 21:55:55 1493

原创 CSS 使用margin属性 得到的居中效果

左右居中:margin: 0 auto;注意:可以让 div标签 线条区域(< div style="border: 1px solid red; opacity: 0.5;"></div>) 等等进行居中

2021-04-02 22:37:58 559

原创 CSS层叠样式:z-index: -1;

z-index的用法链接:点击链接: CSS中 z-index属性.特别注意:

2021-04-02 21:50:52 1440 1

原创 微信小程序设置padding-right没有相应的效果怎么办?

解决方法:  在代码中添加box-sizing:border-box;

2021-04-01 20:20:15 469

原创 CSDN文章中如何设置目录索引?

在第一行加 @[toc] 即可自动生成目录图片示例

2021-04-01 20:04:55 440

原创 navigator标签(组件),点击之后没有跳转到相应页面,也没有报错(小程序中)

问题原因:   navigator组件中只是设置了url属性,没有设置open-type属性。 示例图片:   如果没有在navigator组件中设置open-type属性,就不会跳转达url所指的页面。设置方式如下图:(点击链接: open-type属性值的选择.,进入到相应页面,往下拉到 “open-type的合法值” 一栏进行选择相应的open-type属性值)...

2021-04-01 19:40:14 1002

原创 微信小程序video组件播放不了

分析:  video标签中的 src属性值 应该是 视频的源地址 ,而不是视频所在网页的地址。图片举例:

2021-03-28 11:07:36 4897 2

原创 微信小程序的学习(持续更新中)

1. 小程序开发工具的下载1.1 小程序开发工具的安装:  点击链接: 微信小程序开发工具下载网站.小程序开发工具的安装图示:  2.app.json文件的配置  小程序的制作可以参考的文档:链接: 微信小程序官方文档.2.1 小程序官方文档使用举例:  app.json文件中的配置要用到图片中“全局配置–框架–配置项 里面的选项” 2.1.1 pages配置的使用举例 2.1.2 window配置的使用举例 2.1.

2021-03-26 10:49:09 491

原创 js原型链的学习和总结(配图理解)

原型链的代码讲解<!-- 原型链 --> <script> // 创建函数 const animal = function(name,age){ this.name = name; this.age = age; //创建函数对象(缺点:耗内存。原因:每构造一个对象,这个函数就要被创建一次,例如创建一万个对象,这个函数就要被反复创建一万次,会消耗巨大的内存) this.func = function func(){ console.log(thi

2021-03-20 20:35:52 298 6

原创 前端学习路线推荐

尚硅谷前端推荐路线.

2021-03-11 09:04:04 153 1

原创 43-vuex-组件中共享状态的更新与读取、计算属性与高级计算属性get()的对比

一.dispatch():更新共享状态时需要用到。mapState、mapGetter:单纯地引入显示共享状态or其计算属性时需要用到。二.使用vuex时,组件中去引入计算属性(图片中红色标记)和计算属性get()方法(图片中蓝色标记)有少许的不同,举例:...

2021-03-11 08:40:11 234

原创 42-vuex中-实现异步请求(读写)数据(actions对象和backend的数据交互)的步骤

①父组件中app.vue中,mounted生命勾子中使用dispatch()向actions对象发送给命令②actions中将数据提交给mutations对象 (还需要在mutations-type中收集commit()方法的消息名)③mutations对象中显示state共享状态的方法、...

2021-03-11 08:12:00 386

原创 41-vue中-接口main.js中-render渲染函数(简化了映射组件为标签、使用标签的写法)

1.使用render渲染函数之前的写法new Vue({ el:"#app", components:{ App }, template:"<App/>"})2.使用render渲染函数之后的写法render渲染函数,相当于将component属性和template属性二者的代码换作了简化写法new Vue({ el:"#app", render:h => h(App)//传入的参数h是一个函数createElement()函数的对象})3

2021-03-10 11:10:50 266

原创 一定要问问自己,真的会高效地自学编程吗?(干货、实操)

一. 程序员如何跳出低水平勤奋?  对一个方向先深入,后再追求广度.  身在大厂,不要沉伦,学习新技能,向崇拜的专家学习工作方式和技能等,努力成为专家  不以代码数量论英雄,不仅追求数量,更要追求质量二. 如何高效的自学?  ①制定计划  ②设定时间表(几点开始多长时间)  ③找一个老师(有几年开发经验的软件开发人,遇到问题时,能给予方向上的指导 )  ④至少做一个完整的项目(博客),并不断持续维护。    有一个比喻:学习技术就像就像是谈恋爱,做项目是入洞房,只有入洞房了,才是你的。 

2021-03-08 13:41:29 149 1

原创 Vue项目报错: Uncaught TypeError: vuex__WEBPACK_IMPORTED_MODULE_1__.default.store is not a constructor

错误截图原因如果Vuex拼写正确,看看一下是不是Store的首字母没有大写等等其他拼写错误。

2021-03-07 20:01:50 1822 1

原创 40-vue-在根据每个组件中的数据写成vuex时,注意的小点(mapActions、mapGetters、mapState、dispatch()、高级计算属性中的set、get)

1.vuex是全局的,所有组件都可以和它通信。2.getters对象中没有this,应该用getters来取代this图片示例3.高级计算属性(包含get、set)  组件中get方法对应vuex中的getters对象。  组件中set方法写成了vuex中的actions。4.mapState、mapGetters  mapState:组件中获得state对象中的共享状态。  mapGetters:组件中获得vuex中的和共享状态有关的计算属性(例如:假若数组是共享的状态,那数组的长度这

2021-03-07 16:55:36 550

原创 38-vuex-基本文件的的写法

  1.大项目里面使用vuex时,state、actions、mutations和getters对象是单独作为一个文件来写的。图片示例如下:store对象中四个属性的单独文件里面的写法:export default {}  2.可以设置设置一个index.js,它里面有最核心的管理对象store,示例如下:/** vue最核心的管理对象store* */import Vue from "vue"import Vuex from "vuex"import state from ".

2021-03-05 22:12:41 151

原创 39-vuex-多组共享的状态及其更新方法的写法

1.首先,要明确两个方法的传参使用  ①dispatch(“消息名”,参数)  ②commit(函数名,{参数})/形参要用对象的形式包裹起来,不论形参是什么形式 2.将 多组共享的状态(数据) 写入state.js,作为初始化状态  对于各个组件中自己使用的状态就不需要再写入初始状态的state.js文件中了。3.紧接着就进行 更新多组共享数据的方法 的vuex式的编写①子组件中:组件中使用dispatch()向actions对象发送消息。this.$store.dispatch

2021-03-05 22:10:30 221

原创 vue中npm运行时出现的错误:This relative module was not found

问题This relative module was not found: ......原因  根目录设置上出现了问题解决方法设置根目录:个人心得  有时候,问题无法解决的原因是 不知道问题出在哪里。一旦找对了解决的方向,就相当于解决了问题的百分之九十九。...

2021-03-05 16:26:32 1703

原创 37-vuex的结构图(可以检验自己对vuex的理解程度)

  vuex的使用,体现了 封装性。vue components 相对于vuex功能更能接近用户,vuex则将vue components中的复杂逻辑操作的代码封装在vuex中,这样使得vue components的代码得到了大大的简化。

2021-03-03 17:19:48 173 1

原创 36-使用vuex对组件代码的优化(使用了mapState、mapActions、mapMutations、mapGetters)

作用:  简化代码方法:  只在app.vue文件中进行修改优化。  vuex中的map取代了 this.$ store为前缀的代码,例如:this.$ store.dispatch(消息名) 、this.$ store.getters.消息名。代码示例:本篇是在 链接: 35-vue中vuex(实现组件的集中管理)的介绍和使用.代码的基础上进行了优化。...

2021-03-03 11:34:38 111

原创 es6语法中的...的作用?

两个作用:  1.展开运算符号  2.剩余操作符//1.展开运算符const a = [2,3];const b = [1,...a,4];console.log(b)//结果是:[1,2,3,4]//2.剩余操作符const a = [1,2,3,4,5]const [b,...c] = a;console.log(b) //结果是1console.log(c) //结果是2,3,4,5...

2021-03-03 11:03:29 523

原创 35-vue中vuex(实现组件的集中管理)的介绍和使用

一.vuex的介绍vuex是什么?  (精简)对vue中多个组件的共享状态进行集中式管理vuex的作用(优点)?  vuex可以优化解决的问题:    ①将数据及其操作数据的行为都定义在父组件里面    ②还需要将数据及其数据操作的行为传递给各个子组件当中(有可能需要多级传递)起到了优化代码的作用。vuex的单向数据流(图解) 二.vuex的使用相关&nb

2021-03-01 21:24:19 235

原创 34-vue中的编程式路由导航

理解  编程式路由导航:用js代码来实现页面跳转 (例如点击按钮,添加事件监听使得页面来跳转)window.location.href = urlwindow.location = url //简洁写法组件对象this的两个属性  组件对象有两个属性:$route $router. 。   $route代表当前组件,存储着一些数据;   $router代表路由器,有一些功能性的方法$router属性中的三个

2021-02-28 20:50:06 138

原创 33-vue项目用到的js数组方法

①filter() 等待中…以后遇见了再补充吧  ②map():  理解:从一个数组中的每个对象元素中抽取个别属性,作为一个对象放在相同的下标位置,要用数组的map方法。  括号里要写抽取元素,结果返回的是新数组代码示例const users = result.items.map(item => ({ //item是数组中对象元素 name:item.login, //将items 数组中每个对象的item.login属性值赋给新数组users中每个对象元素的name属性。(下同)

2021-02-21 22:02:03 398

原创 32-vue中,向路由组件传递数据的两种方式

向路由组件传递数据的两种方式:  1. 组件链接  2. router-view props1.组件链接1.1 大致步骤  定义组件(存放消息的组件) --> 注册此组件的路由(在路由器里,相应的父组件路由下注册) --> 在父组件路由中写相应标签(router-link router-view) --> 在存放消息的组件中进行ajax请求(若需模拟ajax请求,可用setTimeout定时器) 详情查看:链接: 路由器项目.1.2 页面图示1

2021-02-21 21:54:51 268

原创 31-vue常用的生命周期勾子总结

常用的生命周期钩子自我总结:  ①data (设置需要用到的变量)  ②methods(添加监听事件,例如 用户点击鼠标、敲击键盘等)  ③ mounted(异步执行代码、可以设置设置ajax、自动触发的事件、生命周期中只执行一次)   ④computed(得到数据,并监视数据,例如全选框:得到数据修改自己状态,监听自己的check属性数据变化,去操纵别的选项) 、   ⑤ watch(监视数据变化,可用于将最新数据进行localStorage存储)...

2021-02-21 21:02:06 89 1

原创 29-vue-嵌套路由的理解和使用

理解  路由组件中包含着组件嵌套组件的使用(写法)  ①定义(要嵌套的)路由组件。  ②注册路由:和基本路由一样需要在路由器里进行注册路由代码示例①定义(要嵌套的)路由组件。  和基本路由的定义方法一样。此步骤可以参考链接:28-vue中vue-router-基本路由的理解和使用.②注册路由:在父组件路由的注册下进行注册。 补充  嵌套路由组件的默认显示...

2021-02-19 22:15:09 322

原创 30-vue-缓存路由组件对象

理解  默认情况下,别切换的路由组件对象会死亡释放,再次回来时,就会被重新创建。  为提高用户的体验感,可以设置 缓存路由组件对象。 作用  保存用户上次操作的页面状态 代码示例  在<router-view>外加上<keep-alive><keep-alive> <router-view><router-view><keep-alive>...

2021-02-19 20:14:21 105

原创 28-vue中vue-router-基本路由的理解和使用

什么是路由  路由 是一种映射关系: k-v  k是path  v是value,前端value是组件;后端value是 回调函数。  路由器 管理 路由 路由的优点:  用户体验好,不需要每次都从服务器全部获取,快速展现给用户 路由器的使用  ①定义路由组件(在views文件中写)  ②将路由组件映射成路由(创建路由器文件)  ③配置路由器(在main.js中配置)  ④写界面(在App.vue,用到 标签)代码图片示例  ①定义路由组件(在views文件

2021-02-18 12:14:20 284 1

原创 27-vue中 UI组件库的使用

参照网站链接: vue插件(移动端).链接: vue插件库(PC端).提示以vue插件(移动端)为例:  安装mini-ui库的命令:npm install --save mint-ui  要实现按需打包,也要执行命令并修改.babelrc文件:npm install --save-dev babel-plugin-component  将.babelrc文件修改为:{ "presets": [ ["env", { "modules": false,

2021-02-16 18:23:11 137

原创 26-vue-users_page项目的自我心得

项目展示图片心得   1.通信方式的确定–消息的订阅与发布   分析:搜索区(search组件)和展示区(main组件),属于_兄弟组件_,通信方式就使用 消息的订阅与发布,这样可以实直接传输信息。(若使用props方法的话,就需要通过他们的父组件进行逐层传递,麻烦)。   2.谁来进行消息的发布?谁来进行消息的发布?  分析:search组件要将用户输入信息,点击搜索,再将其输入的信息传给main组件,main组件在进行ajax请求数据,并在展示区(main组件)展示。   结论:sear

2021-02-16 11:38:46 118

原创 25-vue-ajax-常用的两个库:vue-resource库和axios库(推荐使用axios库)

1. 两个库的安装命令  1.1 vue-resource库:npm install vue-resource --save  1.2 axios库  非官方库npm install axios --save2. vue-resource库的使用  ①在main.js 入口中,引入VueResource,并声明使用  ②在App.vue中写发送请求的代码,下面以 get 请求方式为例3.axios库的使用  需要在App.vue文件中导入 axios库测试接口  接口

2021-02-15 07:44:04 250

原创 24-vue中组件的通信方式之一:消息的订阅与发布的使用pubsub、 pubsub-js库的安装

1.pubsub-js库的安装使用 消息订阅与发布,先在对应的项目中Terminal里安装pubsub-js库1、查看pubsub-js 库是否已经存在该库命令:npm info pubsub-js2、若不存在,则先安装pubsub-js 库,命令如下:npm install --save pubsub-js**注意:**上面两条命令,在vue项目的终端Terminal中输入2.消息的订阅与发布的使用优点:  消息订阅与发布 优点: 父子通信 、逐层通信、兄弟组件通信 等等都可以,没有

2021-02-13 16:24:09 648 2

原创 23-vue中 localStorage--存储信息的使用

数据存储的简介:  为了让用户操作的数据在下次打开网页时,依然能够显示,需要用到localStorage 来将数据储存到 文件中。使用localStorage应该考虑的问题:  使用localstorage, 需要考虑到 存和读 : 存的时机 存的东西 存的地方 读的时机代码示例:export default { data() { return { //localStorage 中的 键值对 总是 转化为字符串的形式存来进行存储

2021-02-13 11:31:37 207 1

原创 22-vue 组件通信的五种方式(总结):props、自定义事件、ref\refs 、消息的订阅与发布(pubsub-js库)、slot插槽法

第一种 props  父组件用 :(v-bind的简写)传递,子组件用 props 来接收,并注明类型代码示例父组件代码:<template> <TodoHeader :addTodo="addTodo"/></template>子组件代码:export default{ props:{ addTodo:Function }}this.$emit(“方法名”,方法中参数)第二种 自定义事件  父组件用@(v-on的简写)来绑定事件,

2021-02-13 10:16:55 419

test-router.zip

路由跳转的初步教程,app.vue中有步骤;有代码展示

2021-11-24

src-07-路由器项目.zip

vue 、vue路由器 建议用ws软件打开

2021-02-21

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除