自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(11)
  • 收藏
  • 关注

原创 结合Vue-router封装一个导航栏组件

需求:使用Vue封装出一个导航栏组件

2021-09-18 00:35:29 807

原创 vue-router详解

目录认识路由vue-router基本使用vue-router嵌套路由 vue-router参数传递 vue-router导航守卫keep-alive认识路由什么是路由?说起路由你想起了什么?路由是一个网络工程里面的术语。路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科在生活中, 我们有没有听说过路由的概念呢? 当然了, 路由器嘛. 路由器是做什么的? 你有想过吗? 路由器提供了两种机制: 路由和转送. 路由是决定数据

2021-09-15 16:01:39 584

原创 Vue CLI详解(VueCLI2和VueCLI3)

什么是Vue CLI如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情CLI是什么意思?CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.Vue C

2021-09-14 23:07:09 324

原创 Vue中的webpack详解

内容概述目录认识webpackwebpack的安装#webpack%E7%9A%84%E5%AE%89%E8%A3%85webpack的起步webpack的配置loader的使用webpack中配置Vueplugin的使用搭建本地服务器认识webpack什么是webpack?我们先看看官方的解释: At its core, webpack is a static module bundler for modern JavaScript application.

2021-09-13 15:23:12 8437

原创 Vue的模块化开发

一、为什么需要模块化客户端需要完成的事情越来越多,代码量也是与日俱增。 为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。 但是这种维护方式,依然不能避免一些灾难性的问题。比如小明和小丽在不同的JS文件中都定义了flag变量名称,但是布尔值却不同小明在页面中运行的时候发现布尔值和自己初始设置的不一样那这个时候我们可能会使用我们闭包的函数思想去解决这个问题。但是闭包解决了变量的重名问题却大大降低了我们代码的可复用性如果我们希望在main.js文件中,用.

2021-09-13 01:25:56 648

原创 Vue中的组件化开发

什么是组件化?人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。 但是,我们人有一种天生的能力,就是将问题进行拆解。 如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。 组件化也是类似的思想: 如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。 但如果,我们讲一个页面拆分成一个个小的功能块,每个功能块

2021-09-11 15:56:01 235

原创 Jscript中高阶函数filter、map和reduce的运用

需求,有一个数组[10,30,111,222,444,90,89,77]写出三个函数1、分别对其筛选出100以下的元素2、对筛选出的函数*2操作3、最后得到的数组进行求和常规写法①、const number=[10,30,111,222,444,90,89,77]let newNumber=[];for(let n of number){ if(n <100){ newNumber.push(n) }}②、let newN.

2021-09-09 21:39:00 156

原创 结合Vue的插值操作和绑定操作的书籍购物车案例

书籍购物车案例需求:1、当购买数量为1的时候,减按钮为disabled2、当我们点击移除的时候,本行数据属性全部删除3、使用methods方法使得价格可以显示两个小数点且前面永远保留¥符号4、当全部书籍购物清单被移除的时候,不显示表格,而是显示购物车为空注意事项:1、在实现案例的时候注意分为三个文件实现。分别为CSS,JS,HTML文件2、在HTML文件实现表单显示数据的时候,不要用for循环遍历对象,不然会导致无法操作数量的情况产生代码实现:一、准备工作1、先写出.

2021-09-09 15:36:56 246

原创 Vue的基础知识之绑定操作

绑定属性、v-bind(语法糖的写法就是一个冒号:):动态的绑定属性,例如<img v-bind src='baidu.com'>,可以写成<img :src="属性名字">,这里v-bind动态的绑定了src的属性v-bind绑定class(有两种方法):①:对象语法<div id="app"><h2 :class="{active:isActive}">{{name}}</h2> <h2 :class="getCl

2021-09-09 14:00:13 1419

原创 在学习Vue之前ES6相关知识的补充

相关知识补充:ES6:一、let/var的概念及其作用域事实上var的设计可以看成JavaScript语言设计上的错误. 但是这种错误多半不能修复和移除, 以为需要向后兼容.,我们可以将let看成更完美的var块级作用域S中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关. 针对于其他块定义来说是没有作用域的,比如if/for等,这在我们开发中往往会引起一些问题。 ES5中的var是没有块级作用域的(if/for)ES6中的let是由块级作用的(if/for)

2021-09-09 13:58:06 318

原创 Vue的基础知识之插值操作

1、Vue是一个渐进式框架

2021-09-08 14:39:45 1619

空空如也

空空如也

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

TA关注的人

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