Vue学习-1-入门
Vue
狂神说
1. 概述
-
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层View,方便与第三方或既有项目整合;
-
遵循SoC原则关注点分离原则;
-
HTML + CSS + JS :视图,给用户看,刷新后台给的数据;
-
网络通信:Axios;
-
页面跳转:Vue-router
-
状态管理:Vuex
-
Vue-UI:ICE,Element UI
2. 前端知识体系
2.1 前端三要素
- HTML(结构)
- CSS(表现)
- JavaScript(行为)
2.2 结构层HTML
2.3 表现层CSS
- CSS层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说就是不具备任何语法支持,它主要缺陷如下:
- 语法不够强大,比如无法嵌套书写,导致模块化开发中需要写很多重复的选择器;
- 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护;
- 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题,前端开发人员会使用一种称之为CSS预处理器的工具,提供CSS缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了前端在样式上的开发效率。
- CSS预处理器:
- CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作;
- 转化成通俗易懂的话来说就是,用一种专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的CSS文件,以供项目使用;
- 常用的CSS预处理器:
- SASS:基于Ruby,通过服务端处理,功能强大。解析效率高。需要学习Ruby语言,上手难度高于LESS。
LESS
:基于NodeJS,通过客户端处理,使用简单。功能比SASS简单,解析效率也低于SASS,但在实际开发中足够了,所以后台人员如果需要的话,建议使用LESS。
2.4 行为层JavaScript
-
JavaScript一门弱类型脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行;
-
Native 原生 JS 开发
-
原生JS开发,也就是让我们按照ECMAScript 标准的开发方式,简称是ES,特点是所有浏览器都支持。截止到当前,ES 标准已发布如下版本:
-
ES3
-
ES4 (内部,未征式发布)
-
ES5 (全浏览器支持)
-
ES6 (常用,当前主流版本: webpack打包成为ES5支持! )
-
ES7
-
ES8
-
ES9 (草案阶段)
-
-
区别就是逐步增加新特性。
-
-
TypeScript 微软的标准
- TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程;
- 该语言的特点就是除了具备ES的特性之外,还纳入了许多不在标准范围内的新特性,所以会导致很多浏览器不能直接支持TypeScript语法,需要编译后(编译成JS) 才能被浏览器正确执行。
-
JavaScript框架
- JQuery:大家熟知的JavaScript库,优点就是简化了DOM操作,缺点就是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6,7,8;
- Angular:Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用了TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如1代–>2 代,除了名字,基本就是两个东西;截止发表博客时已推出了Angular6)
- React:Facebook出品,一款高性能的JS前端框架;特点是提出了新概念 虚拟DOM用于减少真实DOM操作,利用内存,在内存中模拟DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门【JSX】语言;
- Vue:一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular(模块化)和React(虚拟 DOM) 的优点;
- Axios:前端通信框架;因为 Vue 的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery 提供的AJAX 通信功能;
- 前端三大框架:Angular、React、Vue
-
UI 框架
-
Ant-Design:阿里巴巴出品,基于React的UI框架
-
ElementUI、 iview、 ice: 饿了么出品,基于Vue的UI框架
-
Bootstrap:Twitter推出的一个用于前端开发的开源工具包
-
AmazeUI:又叫"妹子UI",一款HTML5跨屏前端框架
-
-
JavaScript 构建工具
- Babel: JS编译工具,主要用于浏览器不支持的ES新特性,比如用于编译TypeScript
- WebPack: 模块打包器,主要作用是打包、压缩、合并及按序加载
2.5 三端统一
混合开发 Hybrid App
- 主要目的是实现一套代码三端统一——PC、Android:.apk、iOS:.ipa,并能备够调用到底层件,如传感器、GPS、 摄像头等,打包方式主要有以下两种:
- 云打包: HBuild -> HBuildX,DCloud出品;API Cloud
- 本地打包: Cordova (前身是PhoneGap)
微信小程序
- WeUI
2.6 后端技术
- 前端人员为了方便开发也需要掌握一定的后端技术, 但Java后台知识体系极其庞大复杂,所以为了方便前端人员开发后台应用,就出现了NodeJS这样的技术;
NodeJS
的作者已经声称放弃NodeJS (架构做的不好再加上笨重的node_ modules),开始开发全新架构的Deno;- 既然是后台技术,那肯定也需要框架和项目管理工具,NodeJS 框架及项目管理工具如下:
- Express:NodeJS框架
- Koa: Express简化版
- NPM:项目综合管理工具,类似于Maven
- YARN:NPM的替代方案,类似于Maven和Gradle的关系
2.7 主流的前端框架
Vue.js
iView
Element UI
- Element是饿了么前端开源维护的Vue UI组件库, 组件齐全,基本涵盖后台所需的所有组件,文档讲解详细, 例子也很丰富。主要用于开发PC端的页面, 是一个质量比较高的Vue UI组件库。
- vue-element-admin
- 官网地址:https://panjiachen.github.io/vue-element-admin-site/zh/
- Github:https://github.com/PanJiaChen/vue-element-admin
- 属于前端主流框架,选型时可考虑使用,主要特点是桌面端支持较多
ICE
VantUI
AtUI
CubeUI
混合开发
Flutter
lonic
mpvue
WeUI
3. 前后端分离演变史
3.1 后端为主的MVC时代
-
为了降低开发的复杂度, 以后端为出发点, 比如:Struts、Spring MVC等框架的使用, 就是后端的MVC时代;
-
优点:
- MVC是一个非常好的协作模式, 能够有效降低代码的耦合度从架构上能够让开发者明白代码应该写在哪里。为了让View更纯粹, 还可以使用Thyme leaf、Frree marker等模板引擎, 使模板里无法写入Java代码, 让前后端分工更加清晰。
-
缺点:
-
前端开发重度依赖开发环境,开发效率低,这种架构下,前后端协作有两种模式:
- 第一种是前端写DEMO,写好后, 让后端去套模板。好处是DEMO可以本地开发,很高效;不足是还需要后端套模板,有可能套错,套完后还需要前端确定,来回沟通调整的成本比较大;
- 另一种协作模式是前端负责浏览器端的所有开发和服务器端的View层模板开发。好处是UI相关的代码都是前端去写就好,后端不用太关注,不足就是前端开发重度绑定后端环境,环境成为影响前端开发效率的重要因素。
-
前后端职责纠缠不清:模板引擎功能强大,依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样,只要前端弱势一点,往往就会被后端要求在模板层写出不少业务代码,还有一个很大的灰色地带是Controller,页面路由等功能本应该是前端最关注的, 但却是由后端来实现。Controller本身与Model往往也会纠缠不清,看了让人咬牙的业务代码经常会出现在Controller层;
-
对前端发挥的局限性:性能优化如果只在前端做空间非常有限,于是经常需要后端合作,但由于后端框架限制,很难使用Comet、Big Pipe等技术方案来优化性能。
-
3.2 基于Ajax带来的SPA时代
-
Ajax,Asynchronous JavaScript And XML,异步JavaScript和XML,即老技术新用法。自2005年被提出,并开始使用CDN作为静态资源存储,于是出现了JavaScript王者归来的SPA(Single Page Application)单页面应用时代。
-
这种模式下的优点在于:前后端分工清晰,前后端的关键协作点是Ajax接口。
-
但是,这好像与JSP时代区别不大,复杂度从服务端的JSP移到了浏览器的JavaScript,使得浏览器端变得复杂。
-
因此,类似Spring MVC,开始出现浏览器端的分层结构:
-
但这种模式也存在一下缺点:
- 前后端接口的约定:如果后端的接口一塌糊涂,后端的业务模型不够稳定,那么前端开发会很痛苦;不少团队也有类似尝试,通过接口规则、接口平台等方式来做。有了和后端一起沉淀的接口规则,还可以用来模拟数据,使得前后端可以在约定接口后实现高效并行开发。
- 前端开发的复杂度控制:SPA应用大多以功能交互型为主,JavaScript代码过十万行很正常。大量JS代码的组织,与View层的绑定等,都不是容易的事情。
3.3 前端为主的MV*时代
-
此处的MV*模式如下:
- MVC(同步通信为主) :Model、View、Controller
- MVP(异步通信为主) :Model、View、Presenter
- MVVM(异步通信为主):Model、View、View Model
-
为了降低前端开发复杂度,涌现了大量的前端框架,比如:Angular JS、React、Vue.js、Ember JS等,这些框架总的原则是先按类型分层,比如Templates、Controllers、Models, 然后再在层内做切分,如下图:
-
优点:
- 前后端职责很清晰:前端工作在浏览器端,后端工作在服务端。清晰的分工,可以让开发并行,测试数据的模拟不难, 前端可以本地开发。后端则可以专注于业务逻辑的处理, 输出RESTful等接口;
- 前端开发的复杂度可控:前端代码很重,但合理的分层,让前端代码能各司其职。简单如模板特性的选择,就有很多很多讲究。并非越强大越好,限制什么,留下哪些自由,代码应该如何组织,所有这一切设计,得花一本书的厚度去说明;
- 部署相对独立:可以快速改进产品体验。
-
缺点
- 代码不能复用。比如后端依旧需要对数据做各种校验,校验逻辑无法复用浏览器端的代码。如果可以复用,那么后端的数据校验可以相对简单化;
- 全异步, 对SEO(Search Engine Optimization,搜索引擎优化)不利。往往还需要服务端做同步渲染的降级方案;
- 性能并非最佳,特别是移动互联网环境下;
- SPA不能满足所有需求, 依旧存在大量多页面应用。URL Design需要后端配合,前端无法完全掌控。
3.4 Node JS带来的全栈时代
-
前端为主的MV*模式解决了很多很多问题, 但如上所述, 依旧存在不少不足之处。随着Node JS的兴起, JavaScript开始有能力运行在服务端。这意味着可以有一种新的研发模式,如下图所示。
-
在这种研发模式下,前后端的职责很清晰。对前端来说,两个UI层各司其职:
Front-end Ul layer
处理浏览器层的展现逻辑。通过CSS渲染样式, 通过JavaScript添加交互功能, HTML的生成也可以放在这层, 具体看应用场景。Back-end Ul layer
处理路由、模板、数据获取、Cookie等。通过路由, 前端终于可以自主把控URL Design,这样无论是单页面应用还是多页面应用,前端都可以自由调控。后端也终于可以摆脱对展现的强关注,转而可以专心于业务逻辑层的开发
-
通过Node,WebServer层也是JavaScript代码, 这意味着部分代码可前后复用,需要SEO的场景可以在服务端同步渲染,由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足,通过这种模式几乎都能完美解决掉。
-
与JSP模式相比,全栈模式看起来是一种回归,也的确是一种向原始开发模式的回归,不过是一种螺旋上升式的回归。
-
基于Node JS的全栈模式, 依旧面临很多挑战:
- 需要前端对服务端编程有更进一步的认识。比如TCP/IP等网络知识的掌握。
- Node JS层与Java层的高效通信。Node JS模式下, 都在服务器端, RESTful HTTP通信未必高效, 通过SOAP等方式通信更高效。一切需要在验证中前行。
- 对部著、运维层面的熟练了解,需要更多知识点和实操经验。
- 大量历史遗留问题如何过渡。这可能是最大最大的阻力。
3.5 总结
综上所述,模式也好,技术也罢,没有好坏优劣之分,只有适合不适合;前后端分离的开发思想主要是基于SoC
(关注度分离)原则,上面这种模式,都是让前后端的职责更加清晰,分工更加合理高效。
4. MVVM模式和第一个VUE程序
4.1 MVVM模式
MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silverlight(类似于Java Applet,简单说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters开发,是一种简化用户界面的事件驱动编程方式。由John Gossman(也是WPF和Sliverlight的架构师)与2005年在他的博客上发表。
MVVM源自于经典的MVC(Model-View-Controller)
模式。其核心是ViewModel
层,负责转换Model
中的数据对象来让数据变得更容易管理和使用。其作用如下:
- 该层向上与视图层View进行双向数据绑定;
- 向下与Model层通过接口请求进行数据交互。
4.2 为什么使用MVVM
MVVM模式和MVC模式一样,主要目的是分离视图View和模型Model,有以下好处:
-
低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变;
-
可复用:可以把一些视图逻辑放在一个ViewModel里面,让很多View重复使用这段视图逻辑;
-
独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计;
-
可测试:界面素来是比较难以测试的,而现在测试就可以针对ViewModel来写。
-
View
View是视图层,也就是用户界面。前端主要由HTML和CSS来构建,为了更方便地展现vi eu to del或者Hodel层的数据,已经产生了各种各样的前后端模板语言,比如FreeMarker、Thymeleaf等等,各大MVVM框架如Vue.js、Angular JS、EJS等也都有自己用来构建用户界面的内置模板语言。
-
Model
Model是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。难点主要在于需要和前端约定统一的接口规则。
-
ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的Model数据进行转换处理,做二次封装,以生成符合View层使用预期的视图数据模型。
需要注意的是,ViewModel所封装出来的数据模型包括视图的状态和行为两部分,而Model层的数据模型是只包含状态的。
- 比如页面的这一块展示什么、那一块展示什么这些都属于视图状态(展示)
- 页面加载进来时发生什么、点击这一块发生什么、这一块滚动时发生什么等这些都属于视图行为(交互)
视图状态和行为都封装在了ViewModel里。这样的封装使得ViewModel可以完整地去描述View层。由于实现了双向绑定,ViewModel的内容会实时展现在View层,这是激动人心的, 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
MVVM框架已经把最脏最累的一块做好了,开发者只需要处理和维护ViewModel,更新数据视图就会自动得到相应更新,真正实现事件驱动编程。
需要理解的是,View层展现的不是Model层的数据, 而是ViewModel层的数据, 由ViewModel负责与Model层交互,获取和更新数据, 这就完全解耦了View层和Model层, 这个解耦是至关重要的, 它是前后端分离方案实施的重要一环。
4.3 Vue特点
-
Vue是MVVM模式的实现者
- Model:模型层, 在这里表示JavaScript对象
- View:视图层, 在这里表示DOM(HTML操作的元素)
- ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而View Model就是定义了一个Observer观察者:
- ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
- ViewModel能够监听到视图的变化,并能够通知数据发生改变
综上,即Vue.js就是一个MVVM的实现者,其核心是实现了DOM监听与数据绑定。
-
轻量级、体积小。Vue.js压缩后只有20+Kb
-
移动优先,更适合移动端
-
易上手,学习曲线平稳,文档齐全
-
吸取了Angular模块化和React虚拟DOM的长处,并拥有自己独特的功能,如计算属性
-
开源、社区活跃度高
4.4 第一个Vue程序
-
在IDEA中安装Vue.js插件
-
下载
-
编写代码
创建一个HTML文件
demo01.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><!--View层:模板--> <div id="app">{{message}} </div><!--1.导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script>var vm = new Vue({/*绑定元素*/el : "#app",//Model层:数据data : {message:"Hello,Vue!"}}); </script> </body> </html>
-
测试
运行该Vue应用程序,此时就可以在控制台直接输入
vm.message
来修改值,中间是可以省略data的,在这个操作中,并没有主动操作DOM,就让页面的内容发生了变化,这就是借助了Vue的数据绑定功能实现的;MVVM模式中要求ViewModel层就是使用观察者模式来实现数据的监听与绑定,以做到数据与视图的快速响应。
5. 基础语法指令
根据上述创建的第一个Vue应用程序,看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。在控制台操作对象属性,界面可以实时更新!
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于上述例子是 #app
) 然后对其进行完全控制。那个 HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。
5.1 v-bind
除了文本插值,还可以使用v-bind
来绑定元素attribute!
- 代码示例:
<div id="app2"><span v-bind:title="message">鼠标悬停几秒查看此处动态绑定的提示信息</span></div>
var vm2 = new Vue({el : "#app2",data : {message : "Hello"}
})
v-bind
attribute 被称为指令。指令带有前缀v-
,以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:将这个元素节点的title
attribute 和 Vue 实例的message
property 保持一致。- 如果再次打开浏览器的控制台,输入
app2.message = 'new message'
,就会再一次看到这个绑定了title
attribute 的 HTML 已经进行了更新。
5.2 v-if, v-else
-
v-if
-
v-else
-
代码示例
demo02.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--view层 模板-->
<div id="app"><h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
</div><!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>var vm = new Vue({el : "#app",//Model层:数据data : {ok: true}});</script>
</body>
</html>
- 测试
5.3 v-for
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--for循环获取数据-->
<div id="app"><li v-for="(text,index) in allTexts">{{text.message}}---{{index}}</li></div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>var vm = new Vue({el:"#app",data : {allTexts : [{message : "1"},{message : "2"},{message : "3"},]}});
</script></body>
</html>
- 测试
5.4 v-on监听事件
v-on
指令可以监听DOM事件,并在触发时运行一些JavaScript代码。
- 代码示例1:监听事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><button v-on:click="counter += 1">Add 1</button><p>The button above has been clicked {{counter}} times.</p></div><!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>var vm = new Vue({el : "#app",data : {counter : 0}})
</script></body>
</html>
-
测试
-
代码示例2:事件处理方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head><body> <!--事件绑定--> <div id="app"><button v-on:click="sayHi()">点我</button> </div><!--1.导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>let vm = new Vue({el : "#app",data : {message : "ano"},//方法必须定义在vue的methods对象中methods : {sayHi : function() {alert(this.message);}}}); </script></body> </html>
-
测试
6. Vue双向绑定
6.1 什么是双向数据绑定
Vue.js是一个MVVM框架,即数据双向绑定:**当数据发生变化时,视图也发生变化;当视图发生变化时,数据也随之同步变化。**这也算是Vue.js的精髓之处。
值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提,如果我们使用vuex
,那么数据流也是单向的,这时就会和双向数据绑定又冲突。
6.2 为什么要实现数据的双向绑定
在Vue.js中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI空间来说,对于处理表单,Vue.js的双向数据绑定用起来就特别舒服了。即两者并不排斥,在全局性数据流使用单向,方便跟踪;局部性数据流使用双向,简单易操作。
6.3 v-model指令创建双向数据绑定
使用v-model
指令在表单<input>、<textarea>、及<select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
注意:v-model
会忽略所有表单元素的value、checked、selected特性的初始值而总将Vue实例的数据作为数据来源,因此,应该通过JavaScript在组件的data选项中声明初始值。
-
代码示例1:单行文本/多行文本
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app">输入的文本<input type="text" v-model="message"> {{message}}<textarea v-model:id="message"></textarea> {{message}} </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script>var vm = new Vue({el:"#app",data : {message:""}}); </script></body> </html>
-
测试
-
代码示例2:单选框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app">性别:<input type="radio" name="gender" value="man" v-model="checked">男<input type="radio" name="gender" value="women" v-model="checked">女<p>选中的是:{{checked}}</p></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script>var vm = new Vue({el:"#app",data : {checked:''}}); </script></body> </html>
-
测试:
-
代码示例3:下拉框
注意:如果
v-model
表达式的初始值未能匹配任何选项,<select>
元素将被渲染为“未选中”状态,在IOS中,这会使得用户无法选择第一个选项,因为这样的情况下,IOS不会触发change事件。因此,推荐如下这样提供一个值为空的禁用选项作为第一个。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app">下拉框:<select v-model="selected"><option value="" disabled>--请选择--</option><option>A</option><option>B</option><option>C</option><option>D</option></select><span>value:{{selected}}</span> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script>var vm = new Vue({el:"#app",data : {selected:''}}); </script></body> </html>
-
测试:
-
代码示例4:复选框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><!--复选框-->爱好:<input type="checkbox" name="hobbies" value="sing" v-model="checked">唱歌<input type="checkbox" name="hobbies" value="running" v-model="checked">跑步<input type="checkbox" name="hobbies" value="basketball" v-model="checked">篮球<input type="checkbox" name="hobbies" value="football" v-model="checked">足球<input type="checkbox" name="hobbies" value="coding" v-model="checked">编程<p>选择的爱好:{{checked}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script>var vm = new Vue({el:"#app",data : {checked:[]}}); </script></body> </html>
-
测试:
7. Vue组件
7.1 什么是组件
组件是可复用的Vue
实例,即是一组可以重复使用的模板,跟JSTL的自定义标签、Thymeleaf的tg:fragment
等框架有着异曲同工之妙。通常一个应用会以一颗嵌套的组件树的形式来组织:
例如,有页头、侧边栏、内容区等组件,每个组件又包含了其他的像导航链接、博文之类的组件。
7.2 Vue.component()方法注册组件
为了能在模板中使用,这些组件必须先注册以便Vue能够识别。通过Vue.component
全局注册:
Vue.component('my-component-name', {// ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue
) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。
因为组件是可复用的 Vue 实例,所以它们与 new Vue
接收相同的选项,例如 data
、computed
、watch
、methods
以及生命周期钩子等。仅有的例外是像 el
这样根实例特有的选项。
可以将组件进行任意次数的复用。
-
一个简单的代码示例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><demo></demo><demo></demo><demo></demo> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>Vue.component('demo',{data:function() {return {count : 0}},template:'<button v-on:click="count++">clicked {{count}} 次</button>'});new Vue({el:"#app",data : {}}) </script></body> </html>
-
测试:
-
注意:
- 当点击按钮时,每个组件都会各自独立维护它的
count
。因为每用一次组件,就会有一个它的新实例被创建。 - 一个组件的
data
选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。
- 当点击按钮时,每个组件都会各自独立维护它的
7.3 通过Prop向子组件传递数据
Prop是可以在组件上注册的一些自定义attribute。当一个值传递给一个prop attribute的时候,它就变成了那个组件实例的一个property。
一个组件默认可以拥有任意数量的prop,任何值都可以传递给任何prop。
-
代码示例1:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><!--组件:传递给组件中的值:props--><ano v-for="item in items" v-bind:course="item"></ano> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script>//定义一个Vue组件,"ano"为自定义组件名称Vue.component("ano",{//使用props属性传递参数;template为组件的模板props:['course'],template: '<li>{{course}}</li>'});var vm = new Vue({el:"#app",data:{items:["Java", "Linux", "Web"]}}); </script></body> </html>
-
说明:
v-for="item in items"
:遍历Vue实例vm
中定义的数组items
,并创建同等数量的组件;v-bind:course="item"
:将遍历的数据item绑定到组件中props
定义的名为course
的属性上。
-
测试:
-
代码示例2:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>Vue.component('blog-post',{props:['title'],template: '<h3>{{title}}</h3>'})var vm = new Vue({el:"#app",data : {posts:[{id:1,title:"One"},{id:2,title:"Two"},{id:3,title:"Three"},]}}); </script></body> </html>
-
测试:
7.4 单根元素
以上述代码示例2为例,当构建一个<blog-post>
组件时,其模板最终包含的东西不止一个title,至少还需要包含博文的正文content:
<h3>{{ title }}</h3>
<div v-html="content"></div>
但是如果在模板template
中尝试像以上这样写,Vue会显示一个错误every component must have a single root element
。因此,需要将模板的内容包裹在一个父元素内来修复这个问题,代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><blog-postv-for="post in posts"v-bind:key="post.id"v-bind:post="post"></blog-post>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>Vue.component('blog-post',{props:['post'],template: `<div class="blog-post"><h3>{{post.title}}</h3><div v-html="post.content"></div></div>`})var vm = new Vue({el:"#app",data : {posts:[{id:1,title:"One",content:"----one content----"},{id:2,title:"Two",content:"----two content----"},{id:3,title:"Three",content:"----three content----"},]}});
</script></body>
</html>
8. Axios异步通信
8.1 什么是Axios
Axios是一个开源的、可以用在浏览器端和NodeJS的异步通信框架,其主要作用就是实现Ajax异步通信,特点如下:
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Supports the Promise API
- Intercept request and response
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Client side support for protecting against XSRF(跨站请求伪造)
8.2 为什么使用Axios
由于Vue.js
是一个视图层框架,并且作者(尤雨溪) 严格准守SoC(关注度分离原则),所以Vue.js
并不包含AJAX的通信功能;
为了解决通信问题,作者单独开发了一个名为vue-resource
的插件,不过在进入2.0版本以后停止了对该插件的维护并推荐了**Axios
**框架。尽量少用jQuery, 因为它操作Dom太频繁!
8.3 Vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程,称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,即生命周期。
在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册JS方法,可以让我们用自己注册的JS方法控制整个大局,在这些事件响应方法中的this直接指向的是Vue的实例。
8.4 第一个Axios应用程序
-
模拟一段JSON数据如下:
data.json
{"name": "TOP","url": "https://baike.baidu.com/item/T.O.P/12000579?fr=aladdin","page": 1,"isNonProfit":true,"address": {"street": "YG","city": "首尔","country": "韩国"},"links": [{"name": "baidu","url": "https://baike.baidu.com/item/T.O.P/12000579?fr=aladdin"},{"name": "kpopping","url": "https://kpopping.com/profiles/idol/T-O-P"},{"name": "wikipedia","url": "https://zh.wikipedia.org/wiki/T.O.P."}]}
-
代码示例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--解决模板闪烁问题--><style>[v-clock]{display: none;}</style> </head> <body><div id="app"><div>{{info.name}}</div><div>{{info.address.city}}</div><div>{{info.links}}</div><a v-bind:href="info.url">click me</a> </div><!--使用cdn引入JS文件--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",data:function() {return {//请求的返回参数格式,必须和JSON字符串一样info : {name:null,address:{street:null,city:null,country:null},url:null,links:[]}}},mounted(){//钩子函数 链式编程 ES6新特性axios.get('../data.json').then(response=>(this.info=response.data));}}) </script></body> </html>
-
测试
-
说明
- 在这里使用了
v-bind
将a:href
的属性值与Vue实例中的数据进行绑定; - 使用
axios
框架的get()
方法请求Ajax,并自动将数据封装进了Vue实例的数据对象中; - 在data中的数据结构必须和Ajax响应回来的数据格式匹配!
- 在这里使用了
9. 计算属性、内容分发、自定义事件
9.1 计算属性computed
计算属性的重点突出在属性两个字上,首先它是一个属性,其次这个属性有计算的能力,这里的计算就是一个函数;简单点说,就是一个能够将计算结果存起来的属性,即将行为转化成了静态的属性,可以想象为缓存!
-
代码示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><p>currentTime1 {{currentTime1()}}</p><p>currentTime2 {{currentTime2}}</p> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script>var vm = new Vue({el:"#app",data:{message:"Hello,Ano!"},methods:{currentTime1:function() {return Date.now();//返回当前时间戳}},computed:{//计算属性:methods、computed方法不能重名,重名后只会调用methods中的方法currentTime2:function() {this.message;//这里的数据刷新后会重新计算时间戳,类似于缓存return Date.now();//返回当前时间戳}}}) </script></body> </html>
-
测试
-
说明:
methods
:定义方法,调用方法使用currentTime1(),注意需要带括号;computed
:定义计算属性,调用属性使用currentTime2,注意不需要带括号;- 在console中使用
vm.message="hello"
更新数据,再次测试观察变化!
-
结论:
调用方法时,每次都需要讲行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销。
9.2 内容分发slot
在Vue.js
中,使用<slot>
元素承载分发内容的出口,作者称其为插槽,可以应用在组合组件的场景中。
-
代码示例:
场景:制作一个待办事项组件(todo) ,该组件由**待办标题(todo-title)和待办内容(todo-items)**组成,但这三个组件又是相互独立的,该如何操作呢?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="todoList"><todo><todo-title slot="todo-title" v-bind:title="title"></todo-title><todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items></todo> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> <script>/*待办事项todo组件*/Vue.component("todo", {//slot:插槽template: `<div><slot name="todo-title"></slot><ul><slot name="todo-items"></slot></ul></div>`});/*待办标题组件*/Vue.component("todo-title",{props:['title'],template: `<div>{{ title }}</div>`});/*待办内容组件*/Vue.component("todo-items",{props:['item'],template: `<li>{{ item }}</li>`});let vue = new Vue({el : "#todoList",data : {title:"书籍列表",todoItems:['Java','Linux','Python']}}); </script></body> </html>
-
说明:
上述代码示例中,组件
todo-title
和todo-items
分别被分发到了组件todo
中的插槽todo-title
和todo-items
中。 -
测试:
9.3 自定义事件this.$emit
-
场景:在上述代码示例中,增加一个功能:在待办内容组件中添加删除按钮,实现删除功能。
-
解析:数据项在Vue的实例中,但删除操作需要在组件中完成,而组件只能调用自身的方法。因此,Vue提供了自定义事件功能,从而解决这个问题。
this.$emit('自定义事件名称',参数)
-
代码如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="todoList"><todo><todo-title slot="todo-title" v-bind:title="title"></todo-title><!--自定义事件remove绑定Vue实例中的removeItem方法--><todo-items slot="todo-items" v-for="(item,index) in todoItems"v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index)"></todo-items></todo> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> <script>/*待办事项todo组件*/Vue.component("todo", {//slot:插槽template: `<div><slot name="todo-title"></slot><ul><slot name="todo-items"></slot></ul></div>`});/*待办标题组件*/Vue.component("todo-title",{props:['title'],template: `<div>{{ title }}</div>`});/*待办内容组件*/Vue.component("todo-items",{props:['item','index'],//只能绑定当前组件的方法template: `<li>{{index}}----{{ item }} <button v-on:click="remove">删除</button></li>`,methods : {remove:function (index){//调用Vue实例中的删除方法,通过this.$emit()实现自定义事件分发this.$emit('remove', index)}}});let vue = new Vue({el : "#todoList",data : {title:"书籍列表",todoItems:['Java','Linux','Python','Web']},methods:{//通过index删除removeItem:function(index) {console.log("删除了"+this.todoItems[index]+"OK");//一次只删除一个元素,删除当前元素this.todoItems.splice(index,1);}}}); </script> </body> </html>
-
说明:
-
测试:
9.4 Vue入门小结
-
核心:数据驱动、组件化
-
优点:借鉴了Angula JS的模块化开发和React的虚拟DOM,虚拟DOM就是把DOM操作放到内存中执行。
-
常用属性:
- v-if
- v-else-if
- v-else
- v-for
- v-on 监听事件,简写
@
- v-model 数据双向绑定
- v-bind 给组件绑定参数,简写
:
-
组件化:
-
Vue.component('my-component-name', {props:['attribute1','attribute2'],template:`...` })
-
组合组件
slot
插槽 -
组件内部绑定事件需要使用
this.$emit("事件名",参数)
-
计算属性的特性,缓存计算数据
-
-
Vue遵循SoC关注度分离原则,是纯粹的视图框架,并不包含如Ajax之类的异步通信功能,为了解决通信问题,需要使用Axios框架做异步通信。
-
说明:
Vue的开发都是要基于NodeJS,实际开发采用
vue-cli
脚手架开发,vue-router
路由,vuex
做状态管理;Vue UI界面一般使用ElementUI
或者ICE
来快速搭建前端项目。
10. vue-cli
10.1 什么是vue-cli
vue-cli
是vue.js
的一个脚手架,用于快速生成一个vue.js+webpack
的项目模板。
预先定义好的目录结构及基础代码,就好比在创建Maven项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,使得开发更加的快速。
- 主要功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
10.2 环境
- Node.js
- 官网下载链接
- 无脑安装即可,参考博客
- Git
- 官网下载
-
确认Node.js安装成功:
node -v#npm,就是一个软件包管理工具,类似于Linux下的apt软件安装 npm -v
-
安装Node.js淘宝镜像加速器(
cnpm
)# -g 就是全局安装 npm install cnpm -g# 或使用如下语句解决npm速度慢的问题 npm install --registry=https://registry.npm.taobao.org
-
安装
vue-cli
cnpm instal1 vue-cli-g #测试是否安装成功#查看可以基于哪些模板创建vue应用程序,通常选择webpack vue list
10.3 第一个vue-cli项目
-
创建一个Vue项目,首先在电脑上建立一个空的文件夹;
-
创建一个基于webpack模板的vue应用程序;
#进入到对应的目录中 cd /d E:\JavaAno\code\Vue #创建vue应用程序,这里的myvue是顶日名称 vue init webpack myvue
创建完成查看对应目录:
-
初始化并运行
#进入到vue项目的目录下 cd myvue #初始化,安装所有依赖环境 npm install #运行 npm run dev
使用IDEA打开该Vue项目,并在Terminal运行它:
-
访问:
-
Ctrl+C停止应用程序
11. Webpack
11.1 什么是Webpack
- 本质上, webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph), 其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle;
- Webpack是当下最热门的前端资源模块化管理和打包工具, 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到实际需要时再异步加载。通过loader转换, 任何形式的资源都可以当做模块, 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等;
- 伴随着移动互联网的大潮, 当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里,使用HTML5、CSS3、ES6等新的技术来开发丰富的功能,网页已经不仅仅是完成浏览器的基本需求;WebApp通常是一个SPA(单页面应用) ,每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的JS代码,这给前端的开发流程和资源组织带来了巨大挑战;
- 前端开发和其他开发工作的主要区别,首先是前端基于多语言、多层次的编码和组织工作,其次前端产品的交付是基于浏览器的,这些资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源,并且保证他们在浏览器端快速、优雅的加载和更新,就需要一个模块化系统,这个理想中的模块化系统是前端工程师多年来一直探索的难题。
11.2 模块化的演进
Script标签
<script src = "module1.js"></script>
<script src = "module2.js"></script>
<script src = "module3.js"></script>
这是最原始的Javascript文件加载方式,如果把每一个文件看作是一个模块,那么它们的接口通常是暴露在全局作用域下,也就是定义在window对象中,不同模块的调用都是一个作用域。
这种原始的加载方式存在一些显而易见的弊端:
- 全局作用域下容易造成变量冲突;
- 文件只能按照
<script>
的书写顺序进行加载; - 开发人员必须主观解决模块和代码块的依赖关系;
- 在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪。
CommonsJS
服务器端的NodeJS遵循CommonsJS规范,该规范的核心思想是,允许模块通过require
方法来同步加载所需依赖的其他模块,然后通过exports
或module.exports
来导出需要暴露的接口。
优点:
- 服务器端模块便于重用;
- npm中已经有超过45w个可以使用的模块包;
- 简单易用。
缺点:
- 同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的;
- 不能非阻塞的并行加载多个模块。
实现:
- 服务端的NodeJS
- Browserify,浏览器端的CommonsJS实现,可以使用NPM的模块,但是编译打包后的文件体积较大
- modules-webmake,类似Browserify,但不如Browserify灵活
- wreq,Browserify的前身
AMD
Asynchronous Module Definition规范其实主要一个主要接口define(id?,dependencies?,factory);它要在声明模块的时候指定所有的依赖dependencies,并且还要当做形参传到factory中,对于依赖的模块提前执行。
define("module",["dep1","dep2"],functian(d1,d2){return someExportedValue;
});
require(["module","../file.js"],function(module,file){});
优点:
- 适合在浏览器环境中异步加载模块;
- 可以并行加载多个模块。
缺点:
- 提高了开发成本,代码的阅读和书写比较困难,模块定义方式的语义不畅;
- 不符合通用的模块化思维方式,是一种妥协的实现
实现:
- RequireJS
- curl
CMD
Commons Module Definition规范和AMD很相似,尽保持简单,并与CommonsJS和NodeJS的Modules规范保持了很大的兼容性。
define(function(require,exports,module){var $=require("jquery");var Spinning = require("./spinning");exports.doSomething = ...;module.exports=...;
});
优点:
- 依赖就近,延迟执行;
- 可以很容易在NodeJS中运行;
缺点:
- 依赖SPM打包,模块的加载逻辑偏重
实现:
- Sea.js
- coolie
ES6模块
EcmaScript 6标准增加了JavaScript语言层面的模块体系定义。ES6模块的设计思想,是尽量静态化,使编译时就能确定模块的依赖关系,以及输入和输出的变量。Commons JS和AMD模块,都只能在运行时确定这些东西。
import "jquery"
export function doStuff(){}
module "localModule"{}
优点:
- 容易进行静态分析;
- 面向未来的Ecma Script标准。
缺点:
- 原生浏览器端还没有实现该标准;
- 全新的命令,新版的Node JS才支持
实现:
- Babel
11.2 安装Webpack
- 安装
npm install webpack -g
npm install webpack-cli -g
#查看安装是否成功
webpack -v
webpack-cli -v
-
配置:创建 webpack.config.js配置文件
- entry:入口文件, 指定Web Pack用哪个文件作为项目的入口
- output:输出, 指定WebPack把处理完成的文件放置到指定路径
- module:模块, 用于处理各种类型的文件
- plugins:插件, 如:热更新、代码重用等
- resolve:设置路径指向
- watch:监听, 用于设置文件改动后直接打包
-
直接运行
webpack
命令打包
11.3 使用Webpack
-
创建项目
创建一个空文件夹,用IDEA open即可。
-
新建一个Directory,命名为modules,用于放置JS模块等资源文件;
-
在modules目录下创建模块文件,用于编写JS模块相关代码,如下:
hello.js
//使用exports暴露一个方法 exports.sayHi = function () {document.write("Hello,Webpack!") }
main.js
//require导入一个模块,就可以调用这个模块中的方法了 let hello = require("./hello"); hello.sayHi();
-
在项目目录下创建
webpack.config.js
配置文件webpack.config.js
module.exports = {entry:"./modules/main.js",output: {filename:"./js/bundle.js"} }
-
使用
webpack
命令打包
-
在项目目录下创建一个HTML页面,导入上述步骤打包后的js文件
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Webpack-study</title> </head> <body><script src="./dist/js/bundle.js"></script> </body> </html>
-
运行
index.html
查看效果: -
实现热部署,命令如下:
webpack --watch
12. vue-router
12.1 说明
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成, 让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于
Vue js
过渡系统的视图过渡效果 - 细粒度的导航控制
- 带有自动激活的CSS class的链接
HTML5
历史模式或hash模式,在IE 9中自动降级- 自定义的滚动行为
12.2 安装vue-router
-
基于第一个vue-cli项目
myvue
进行测试学习,首先 先查看node_modules目录中是否存在vue-router
; -
vue-router是一个插件包,所以还是需要用npm/cnpm来进行安装。打开命令行工具,进入项目目录,输入下面命令:
npm install vue-router --save-dev
-
在模块化工程中使用,必须通过
Vue.use(VueRouter)
显示安装路由功能:import Vue from "vue"; import VueRouter from "vue-router";Vue.use(VueRouter);
12.3 测试
-
components
目录下存放编写的组件;Content.vue
<template><h1>内容页</h1> </template><script> export default {name: "Content" } </script><!--作用域--> <style scoped></style>
Main.vue
<template><h1>首页</h1> </template><script> export default {name: "Main" } </script><style scoped></style>
-
在src目录下,新建目录
router
存放路由,新建index.js
配置路由;index.js
import Vue from "vue"; import VueRouter from "vue-router";import Content from "../components/Content"; import Main from "../components/Main";//安装路由 Vue.use(VueRouter);//配置导出路由 export default new VueRouter({routes: [{//路由路径path : '/content',name:'content',//跳转的组件component:Content},{path : '/main',name: 'main',component : Main}] })
-
在
main.js
中配置路由;import Vue from 'vue' import App from './App' //自动扫描里面的路由配置 import router from './router'Vue.config.productionTip = falsenew Vue({el: '#app',//配置路由router,components: { App },template: '<App/>' })
-
在
App.vue
中使用路由;<template><div id="app"><h1>THIS IS T.O.P</h1><router-link to="/main">首页</router-link><router-link to="/content">内容页</router-link><!--展示template内容--><router-view></router-view></div> </template><script>export default {name: 'App',} </script><style> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>
-
测试结果:
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 21天好习惯第十二期-12
中央处理器 运算器组成: 算术逻辑单元(ALU)通用寄存器组(R1 ~Rn)多路选择器(Mn)标志寄存器(FR) 控制器组成: 时标发生器(TGU)主脉冲振荡器(MF)地址形成器(AGU)程序计数器(PC)指令寄存器(IR)指令译码器(ID) 总线: 数据总线(DBUS)地址总线(ABUS)控制总线(CBUS) CPU运行原理图…...
2024/4/15 22:42:38 - (自用笔记,慎点)C语言程序设计习题(一)
文章目录第一题:P14第二题:P18第三题:P19第四题:P24第五题:P25第六题:P27第七题:P29第八题:P30第九题:P34提前小练习第九题习题第十题:P40第十一题࿱…...
2024/4/26 13:22:00 - darkfi:Layer 1 for 隐私合约
1. 引言 代码实现参见: https://github.com/darkrenaissance/darkfi 参考资料 [1] darkfi官网 [2] DarkFi Liscon Announcement - Anonymous Smart Contracts...
2024/4/25 8:33:42 - UVM实战 卷I学习笔记9——UVM中的sequence(4)
目录sequence进阶应用嵌套的sequence*在sequence中使用rand类型变量*transaction类型的匹配*p_sequencer的使用*sequence的派生与继承sequence进阶应用 嵌套的sequence 一个新的sequence可以交替产生两种包: class case0_sequence extends uvm_sequence #(my_tra…...
2024/4/24 19:45:11 - 数据库分表
纵向分表 假设我们本来有一张表存放了博客信息,字段包括作者,博客内容,发布时间,浏览量,点赞数,收益等等。 对于博客系统来说,作者,博客内容,发布时间这些信息是属于查询…...
2024/4/27 10:27:28 - 记录本人第一次去面试Java开发岗位~ 是否 GG ?
记录今天校招的一次面试经历 人生第一次去面试Java开发岗位 !!! 是否 GG ?!? 我参加的是学校安排的校招 从几百家企业最终选出了 6 家我比较心仪的企业 结果去了发现 能找到的企业 从 6家 变成了 2家 … 挺麻的当时 说这个麻,其…...
2024/4/27 14:05:14 - golang 普通数据转换成 string
第二种方式 Itoa :int转成string string 转化成其他格式 bool int64 float64 需要其他格式只能在格式转化...
2024/4/27 4:53:57 - python --Numpy详解(科学计算)
安装 pip install numpy什么是Numpy:Numeric Python NumPy系统是Python的一种开源的数值计算扩展 一个强大的N维数组对象Array比较成熟的(广播)函数库用于整合C/C和Fortran代码的工具包实用的线性代数、傅里叶变换和随机数生成函数numpy和…...
2024/4/15 5:29:43 - JAVA之时间复杂度和空间复杂度(图解)
文章目录1、算法效率2、时间复杂度2.1 时间复杂度的概念2.2 大O的渐进表示法2.3 常见时间复杂度计算举例3、空间复杂度1、算法效率 算法效率分析分为两种:第一种是时间效率,第二种是空间效率。时间效率被称为时间复杂度,而空间效率被称作空间…...
2024/4/25 15:14:09 - 【PyQt5】QMainWindow的tabifyDockWidget函数,使其整合两个DockWidget后显示最后一个标签页
在PyQT5中,正常情况下使用QMainWindow的tabifyDockWidget整合两个QDockWidget,形成标签页,一般会显示最后一个标签页。但是,当tabifyDockWidget是在某个菜单的trigger函数中时,使用tabifyDockWidget后,会显…...
2024/4/24 12:40:23 - Java的类
Java的类 Java面向对象的三条主线: 1.Java类及类的成员:属、方法、构造器、代码块、内部类 2.面向对象三大特性:封装,继承,多态,(抽象性) 3.其他关键字 面向对象的两个要素: 1、对…...
2024/4/24 19:07:57 - Matlab代码实现绘制趋势图
2021年美赛A题趋势图绘制Matlab代码实现 clearvars; clc; % decomposition_rate_trend target_path D:\SJTU大三(上)总\杂项\科研项目\2021MCM\regulation_test\figures\tendency_chart\matlab_fig\DR_tendency_chart.png; decomposition_rate_data_ma…...
2024/4/20 19:54:16 - 详解机器学习基础--线性回归算法
线性回归解决了什么? 线性回归算法可以帮助解决回归问题,对处理回归问题有着天然的优势,线性回归算法虽然简单,但是对于处理回归问题还是有着比较好的作用 线性回归算法思想简单,实现容易,结果具有较好的…...
2024/4/15 5:30:24 - org.apache.zookeeper.KeeperException$ConnectionLossException: KeeperErrorCode = ConnectionLoss for /
idea连hbase报错 Exception in thread "main" java.net.SocketTimeoutException: callTimeout1200000, callDuration1229322: java.io.IOException: org.apache.zookeeper.KeeperException$ConnectionLossException: KeeperErrorCode ConnectionLoss for /hbase/ma…...
2024/4/20 15:39:17 - 二分搜索函数
int search(char key, char a[]) {int mid0, begin0, endstrlen(a);//printf("key%c\n", key);while (begin<end){mid (begin end)>> 1;if (a[mid] > key) end mid;else begin mid 1;}if (a[begin] key) return 1;return 0; }...
2024/4/19 13:21:20 - 挂载硬盘 加入sudoers用户 调整文件权限 2021-11-03
调整文件权限 chmod 777 sudoers 加入到 sudoers vim sudoers 加入 chengweimin ALL=(ALL) ALL 挂载 硬盘: sudo fdisk -l sudo mount /dev/sdd1 /mnt/cheng sudo umount /mnt/cheng 结果如下:Disk /dev/sda: 931.51 GiB, 1000204886016 bytes, 1953525168 sectors D…...
2024/4/15 5:30:39 - conda安装scikit-learn报错
在win7下安装scikit-learn会报错 ERROR conda.core.link:_execute(701): An error occurred while installing package defaults::scikit-learn-1.0.1-py37hf11a4ad_0. Rolling back transaction: doneLinkError: post-link script failed for package defaults::scikit-learn…...
2024/4/24 1:53:29 - 数据库的数据在硬盘上吗
数据库是管理数据的,它的目的是让用户可以快速可靠地分类/查询数据,以文件的形式存储在计算机硬盘上。从广义上说用于存储文件的文件系统也是一种数据库。 打个比方,一本书的内容是保存在纸上的,但是它也可以算成数据库࿰…...
2024/4/15 5:30:19 - Hadoop 2分布式集群环境搭建
一台Ubuntu主机作Master,一台Ubuntu主机做slave01,一台Ubuntu主机做slave02。三台主机机器处于同一局域网下。 修改三台机器的/etc/hosts文件,添加同样的配置: sudo vim /etc/hosts 192.168.0.10 master 192.168.0.11 slave01 192.168.0.12 slave02 配置ssh无密码…...
2024/4/26 1:47:10 - redis 备份策略
redis 备份策略 : 1、写 Crontab 定时调度脚本,每小时定时备份一份RDB快照或者AOF日志到指定的目录下,仅仅保留最近48小时的备份 2、每天保留有一份当日的数据到指定的目录下,保留最近一个月的备份 3、每次copy备份时ÿ…...
2024/4/21 14:58:03
最新文章
- 【免费题库】华为OD机试 - 会议室占用时间(Java JS Python C C++)
须知 哈喽,本题库完全免费,收费是为了防止被爬,大家订阅专栏后可以添加客服微退款。感谢支持 文章目录 须知题目描述输入描述输出描述解题思路:题目描述 现有若干个会议,所有会议共享一个会议室,用数组表示各个会议的开始时间和结束时间,格式为: [[会议1开始时间, 会…...
2024/4/27 14:22:11 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 2024年第八届人工智能与虚拟现实国际会议(AIVR 2024)即将召开!
2024年第八届人工智能与虚拟现实国际会议(AIVR 2024)将2024年7月19-21日在日本福冈举行。人工智能与虚拟现实的发展对推动科技进步、促进经济发展、提升人类生活质量等具有重要意义。AIVR 2024将携手各专家学者,共同挖掘智能与虚拟的无限可能…...
2024/4/15 12:47:49 - Oracle备份和还原的几种方式
1、使用数据泵方式 exp demo/demoorcl buffer1024 filed:\back.dmp fully demo:用户名、密码 buffer: 缓存大小 file: 具体的备份文件地址 full: 是否导出全部文件 ignore: 忽略错误,如果表已经存在,则也是覆盖 exp demo/de…...
2024/4/23 6:25:47 - 使用阿里云试用Elasticsearch学习:1.3 基础入门——搜索-最基本的工具
现在,我们已经学会了如何使用 Elasticsearch 作为一个简单的 NoSQL 风格的分布式文档存储系统。我们可以将一个 JSON 文档扔到 Elasticsearch 里,然后根据 ID 检索。但 Elasticsearch 真正强大之处在于可以从无规律的数据中找出有意义的信息——从“大数…...
2024/4/23 6:25:50 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/26 18:09:39 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/26 20:12:18 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/26 23:05:52 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/27 4:00:35 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/25 18:39:22 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/26 21:56:58 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/27 9:01:45 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/26 16:00:35 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/25 18:39:16 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/25 18:39:16 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/26 22:01:59 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/25 18:39:14 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/26 23:04:58 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/25 2:10:52 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/25 18:39:00 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/26 19:46:12 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/27 11:43:08 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/27 8:32:30 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57