leva的博客

在实际开发中，或多或少都会进行网络数据的交互，一般都是使用工具来完成任务。现在比较流行的就是axios库。axios是一个基于Promise的HTTP库，可以用在浏览器和Node.js中。axios具有以下特性：（1）从浏览器中创建XMLHttpRequests。（2）从Node.js创建HTTP请求。（3）支持Promise API。（4）拦截请求和响应。（5）转换请求数据和响应数据。（6）取消请求。（7）自动转换JSON数据。（8）客户端支持防御XSRF。

在设计网页的过程中，合理地添加过渡和动画效果，可以提高用户的体验，帮助用户更好地理解页面中的功能。Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡和动画效果，包括在CSS过渡和动画中自动应用class、使用第三方动画库、在过渡钩子函数中操作DOM等。本章将重点学习创建过渡和动画效果的方法和技巧。常用的过渡都是使用CSS过渡。下面是一个没有使用过渡效果的示例，通过一个按钮控制p元素显示和隐藏。Vue提供了transition的封装组件，可以给元素和组件添加进入／离开的过渡效果。

因为每次查询DOM几乎都需要遍历整个DOM树，如果建立一个与DOM树对应的虚拟DOM对象，也就是JavaScript对象，以对象嵌套的方式来表示DOM树及其层级结构，那么每次DOM的修改就变成了对JavaScript对象的属性的操作，由于操作JavaScript对象比操作DOM要快得多，从而大幅度减少性能的开支。在谷歌浏览器中运行程序.由于锚点标题的使用非常频繁，考虑到标题的级别包括h1～h6，可以将标题的级别定义成组件的prop，在调用组件时，可以通过该prop动态设置标题元素的级别。

【例】传递多个值--使用blog-content组件-->// 使用blog-title组件，并传递content',return{name:“洗衣机”,price:“6880元”,city:“上海”});在谷歌浏览器中运行程序，效果如图所示。图　传递多个值但是，通常希望每个prop属性都有指定的值类型。props: {

它是一个简洁、易用且高效的代码封装库。通俗地讲，它是当前比较流行的一种Ajax框架，可以使用它发起HTTP请求接口功能，它是基于Promise的，相比较Ajax的回调函数能够更好地管理异步操作。$ route.path、$ route.params、$ route.name、$ route.query这几个属性很容易理解，主要用于接收路由传递的参数。（2）route是一个跳转的路由对象，每一个路由都会有一个route对象，它是一个局部的对象，可以获取对应的name、path、params、query等。

所以Vue官方推出一款Chrome插件Vue-devtools，Vue-devtools是一款基于Chrome浏览器的插件，用于调试Vue应用，这可以极大地提高调试效率。当添加完Vue-devtools扩展程序之后，在调试Vue应用的 时候，打开F12，在Chrome开发者工具中会看一个Vue栏，单击之后就可以看见当前页面Vue对象的一些信息，如图7-22所示。步骤1：首先安装全局的serve，在命令行输入命令npm install-g serve，Vue-devtools的安装步骤如下。

NPM的全称是Node Package Manager，它是一个Node.js包管理和分发工具，已经成为非官方的发布Node模块（包）的标准。Node.js的安装比较简单，大家需要在Node.js官网（https://nodejs.org/en/download/）下载并安装Node.js环境，Windows系统推荐下载Windows Installer（.msi）。NPM最初用于管理和分发Node.js的依赖，它自动化的机制使得层层嵌套的依赖管理变得十分简单，因此后来被广泛应用于前端依赖的管理中。

当子组件需要向父组件传递数据时，就要用到自定义事件。v-on指令除了监听DOM事件外，还可以用于组件之间的自定义事件。在子组件中用$emit（）来触发事件以便将内部的数据传递给父组件，如例所示。子组件向父组件传递数据解析上面示例中代码的执行步骤：this.$ emit('myclick','这是我传递出去的数据','这是我传递出去的数据2')·　第一个参数是自定义事件的名字。

在正式介绍组件前，先看一个Vue组件的简单示例感受一下，代码如下：组件是可复用的Vue实例，且带有一个名字，在这个示例中组件名字是button-counter。可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义标签来使用，代码如下：Web的组件其实就是页面组成的一部分，好比是计算机中的每一个硬件（如硬盘、键盘、鼠标等），它具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，从而变成一个完整的应用。

Vue提供了v-on指令来监听DOM事件，在事件绑定上，类似原生JavaScript的onclick事件写法，也是在HTML上进行监听。

当我们获取后台数据之后，会按照一定的规则加载到前端写好的模板中，并显示在浏览器中，这个过程称为渲染。

运行后打开console可以看到打印出来的内容。

可以用v-model指令在表单input 、textarea 及select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以便更新数据，并对一些极端场景进行一些特殊处理。注意：v-model会忽略所有表单元素的value、checked、selected attribute的初始值而总是将Vue实例的数据作为数据来源，所以应该通过JavaScript在组件的data选项中声明初始值。

Vue通过构造函数来实例化一个Vue对象：var vm=new Vue（{}）。在实例化时，我们会传入一些选项对象，包含数据选项、属性选项、方法选项、生命周期钩子等常用选项。而且Vue的核心是一个响应式的数据绑定系统，建立绑定后，DOM将和数据保持同步，这样无须手动维护DOM，就能使代码更加简洁易懂，从而提升效率。

前端框架很多，无论选择哪个框架，对于前端处理的事情依旧是模板渲染、处理用户数据交互、事件的绑定等，只不过每个框架的理念和写法不同而已。Vue通过声明一个唯一的页面实例new Vue（{…}）来标记当前页面的HTML结构、数据展示及相关事件的绑定。

使用关键字new调用Vue构造器创建一个新的Vue实例，在实例中需要传入一些选项对象，选项对象包括el（挂载元素）、data（数据）、methods（方法）、template（模板）、生命周期钩子函数等。例2-1演示创建Vue实例的过程。

MVP（Model-View-Presenter）是MVC的改良模式，由IBM的子公司Taligent提出。和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责显示。另外将Controller改名为Presenter，同时改变了通信方向。在MVP模式中，View不再负责同步逻辑，而是由Presenter负责。Presenter既负责业务逻辑也负责同步逻辑。View需要提供操作界面的接口供Presenter调用。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当然这些事ViewModel已经帮我们完成了，它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。微软公司的WPF带来了新的技术体验，如Silverlight、声频、视频、3D、动画……这导致了软件UI层更加细节化、可定制化。

Web早已进入2.0时代，如今的网页大有向系统应用级别方向发展的趋势，再也不是以前简单展示信息的界面了。如今很多Web App已经做到了原生应用的功能，并且运用自身的优。

大前端时代是Web统一的时代，利用HTML5不但可以开发传统的网站，实现炫酷的网页动态效果，还可以采用BS架构开发应用程序、手机端Web应用、移动端Native应用程序、智能设备（例如可穿戴智能手表、可穿戴智能衣服）等。大前端时代的最大特点是一次开发便可同时适用于所有平台。再也不用为一个App而需为安卓和iOS两大平台分别开发而忧心了，大前端已经支持非常多的开发语言，例如Java、PHP等，连使用JavaScript制作后台都显得那么简单。

首先，需要新建一个HTML格式的文件。打开VS Code，依次点击左上角的File→New File，新建一个文件，如图。

Highcharts是用JavaScript编写的图表库，支持各种常用的可视化。作为同类可视化产品，ECharts与Highcharts的对比如下。

ECharts作为一种商业级数据图表，是一个开源的数据可视化工具，可在PC端和移动端的大部分浏览器上使用，由JavaScript实现，底层依赖轻量级的矢量图形库ZRender，在提供多种可视化图表的基础上，让用户可以个性化定制所需图表。除了百度，使用ECharts的机构和企业还有很多，包括国家统计局、国家电网、中国石化、新华社、阿里巴巴、腾讯、小米、凤凰网、网易、新浪、华为、联想、用友、携程、滴滴、唯品会等。

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是传统上只能使用字符串作为键，这给它的使用带来了很大的限制。它类似于对象，也是键值对的集合，但其“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。ES6是ES5的升级版，解决了ES5语法中存在的一些问题，而且使用起来相对比较简单，在流行框架中使用较多。如果删除失败，返回 false。

css-loader!./style.css”，再输入打包命令，发现还是报错，提示缺少css-loader、style-loader这两个文件。可以使用“cnpm install css-loader style-loader --save-dev”命令将文件添加到package.json文件中，如果在后期打包部署时还是提示文件缺失，可以使用此命令添加文件；代码修改完成之后输入“webpack ./src/index.js build.js”命令，再打开页面显示出index2.js文件中输入的内容。

在原始开发的时候都会遇到以上问题，从这些问题中又发现了使用前端框架的重要性，有些人或多或少地接触过框架，但是对前端框架的认知还不够。大觅项目使用分层架构设计（把功能相似、抽象级别相近的实现进行分层，使逻辑变得清晰，容易理解和维护，也称作多层架构或N层架构），在这里使用的是类MVVM的分层架构方式，但还不完全是 MVVM 的分层架构方式。Visual Studio Code具备优秀的性能，完备的特性，加之针对于Web开发的优化和方便的调试，被评价为最好用的集成开发环境。首先看一下原始开发存在的以下问题。

在以后安装依赖包之后，可以通过 --version或者简写 -v来查看对应的版本号，如果能显示对应版本号，则说明安装成功。Node.js的包管理器NPM是全球最大的开源库生态系统，它集成在Node.js中，在安装Node.js的时候就已经自带了NPM包管理工具。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。安装CNPM成功之后，输入“cnpm -v”，如图1.11所示，可以查看到当前CNPM版本，所有用到NPM的地方便可以全部替换为CNPM，这样就成功切换到淘宝NPM镜像上了。

这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?类名active依赖于数据isActive，当其为true时，div会拥有类名active的样式，为false时，则没有，所以“对象语法”存在1px的黑色边框。大多数情况下，直接写一长串的样式不便于阅读和维护，因此实际的开发中往往是写在data或者computed计算属性里。特别强调一点，动态绑定的 class 可以与普通的class共存，在浏览器中运行，显示效果。