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层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下:
1. 语法不够强大，比如无法嵌套书写，导致模块化开发中需要写很多重复的选择器；
2. 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护;
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为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代码，让前后端分工更加清晰。
缺点：
- 前端开发重度依赖开发环境，开发效率低，这种架构下，前后端协作有两种模式：
  1. 第一种是前端写DEMO，写好后，让后端去套模板。好处是DEMO可以本地开发，很高效；不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大；
  2. 另一种协作模式是前端负责浏览器端的所有开发和服务器端的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第十一题&#xff1…...
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/16 8:49:12
记录本人第一次去面试Java开发岗位~ 是否 GG ？
记录今天校招的一次面试经历人生第一次去面试Java开发岗位 !!! 是否 GG ？！？ 我参加的是学校安排的校招从几百家企业最终选出了 6 家我比较心仪的企业结果去了发现能找到的企业从 6家变成了 2家 … 挺麻的当时说这个麻，其…...
2024/4/25 6:37:13
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
数据库的数据在硬盘上吗
数据库是管理数据的，它的目的是让用户可以快速可靠地分类/查询数据，以文件的形式存储在计算机硬盘上。从广义上说用于存储文件的文件系统也是一种数据库。打个比方，一本书的内容是保存在纸上的，但是它也可以算成数据库&#xff0…...
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备份时&#xff…...
2024/4/21 14:58:03

Vue学习-1-入门

Vue

1. 概述

2. 前端知识体系

2.1 前端三要素

2.2 结构层HTML

2.3 表现层CSS

2.4 行为层JavaScript

2.5 三端统一

2.6 后端技术

2.7 主流的前端框架

3. 前后端分离演变史

3.1 后端为主的MVC时代

3.2 基于Ajax带来的SPA时代

3.3 前端为主的MV*时代

3.4 Node JS带来的全栈时代

3.5 总结

4. MVVM模式和第一个VUE程序

4.1 MVVM模式

4.2 为什么使用MVVM

4.3 Vue特点

4.4 第一个Vue程序

5. 基础语法指令

5.1 v-bind

5.2 v-if, v-else

5.3 v-for

5.4 v-on监听事件

6. Vue双向绑定

6.1 什么是双向数据绑定

6.2 为什么要实现数据的双向绑定

6.3 v-model指令创建双向数据绑定

7. Vue组件

7.1 什么是组件

7.2 Vue.component()方法注册组件

7.3 通过Prop向子组件传递数据

7.4 单根元素

8. Axios异步通信

8.1 什么是Axios

8.2 为什么使用Axios

8.3 Vue的生命周期

8.4 第一个Axios应用程序

9. 计算属性、内容分发、自定义事件

9.1 计算属性computed

9.2 内容分发slot

9.3 自定义事件this.$emit

9.4 Vue入门小结

10. vue-cli

10.1 什么是vue-cli

10.2 环境

10.3 第一个vue-cli项目

11. Webpack

11.1 什么是Webpack

11.2 模块化的演进

11.2 安装Webpack

11.3 使用Webpack

12. vue-router

12.1 说明

12.2 安装vue-router

12.3 测试

相关文章

最新文章