Vue介绍

一、Vue是什么

     Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

    Vue目标：通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

     Vue特性：
           1，轻量级的框架；

           2，双向的数据绑定；

           3，指令

           4，插件化，或者称为组件化

二、Vue介绍

      首先，如果要在某一个HTML文本中使用vue，需要先引进vue ： 

 <script src="https://unpkg.com/vue/dist/vue.js"></script>

    

1.Vue指令介绍

 Vue提供了一些特殊的属性，以v-为前缀，称之为指令。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上

1.v-html：可以实现引入的内容以HTML的格式来进行解析

2.v-bind：实现元素属性的动态绑定

另外，如果当v-bind修饰了某个属性的时候，可以在该属性对应值中直接写JS的表达式。v-bind：class 可缩写为 ：class

3.v-on:绑定一个监听事件，用于和我们使用我们vue实例中定义的方法 v-on:click点击绑定,缩写为@click

4.v-model：绑定在元素上面，获取当前元素的值，使其可以动态的随对应变量的改变而改变；

5.v-once：实现一次性的插值，当值改变的时候，不会引起插值出的内容变化。

6.v-for：循环的插入一个数组的内容

7.v-if以及v-show(渲染方式和template)

<template v-if=“ok”></template>

2.Vue计算属性介绍

计算属性和methods的对比：

计算属性是基于它的依赖缓存的，只有当依赖缓存发生改变的时候，它才会进行重新取值，如果没有改变，则值不变。

计算属性和vue的watch方法的比较：

  watch用于观察 Vue 实例上的数据变动，但是在和计算属性相比后，它的代码是命令式的和重复式的。

3.Vue组件

组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

组件里面也是有data数据的，不过在data中的数据不能直接赋值，而是得以函数的形式进行返回

Vue父子组件之间的通信：

三、VUE插件库

  1.vue-resource网络访问

vue-resource是一个vue的关于网络访问的一个库，或者说插件。具体的使用该方法为：

 

 

   vue-router路由

    用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。

2.vue-router之动态路由的匹配

      我们常常要把某种模式匹配到的所有路由，全都映射到同一个组件中去。例如，当不同用户登录的时候，都需要匹配到同一个界面去完成登录，此时我们就可以在vue-router的路由路径中去使用动态路由参数，来实现该效果。

此时，类似于/user/foo , /user/bar都将映射到相同的路由。在路由参数中使用：标记的,会被设置到this.$router.params.id,从而使我们可以在组件中使用的。

3.vue-router之路由嵌套

  路由嵌套后，此时可以分出来的出口就可以分为，最顶层的出口和嵌套中的出口，顶层出口其实就是一个没有嵌套过路由一样的使用，而嵌套的出口中使用组件的时候，需要在VueRouterd的参数中使用children配置；

 

4.vue-router之命名视图

 可以在一个界面拥有多个单独命名的视图（或者说出口），而不是单独的一个出口，如果没有设置名字，那么默认为default。

5.vue-router之重定向和别名 

重定向：在router的对应路径下面可以通过redirect设置重定向路径

别名：在router的对应路径下面可以通过alias设置别名

重定向：当用户访问/a的时候，url会被替换为/b，匹配路由回去找/b

别名：/a别名/b,当用户访问/b的时候，url为/b，但是匹配路由为/a,就和你访问/a一样

四、Vue之vuex

vuex是什么？

  vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

  Vuex 使用 单一状态树 —— 是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个唯一数据源而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

核心概念：在根实例中注册store，子组件调用this.$store

state：用于存放数据，作为一个数据源存在

getters:可以理解为store的计算属性，可以对state中的数据  进行加工

mutations:更改store中的状态的唯一方法就是提交mutations，类似于store的方法，每个方法接受state为第一个参数，必须是同步的函数,this.$store.commit(‘方法名’,[option])

actions:提交的对象是mutation，不是直接更改状态，可异步

modules:可以将一个store分割为几个不同的model，从而使代  码更简洁

五、 Vue与AngularJS的对比

相同点：

  都支持指令：内置指令和自定义指令

  都支持过滤器：内置过滤器和自定义过滤器

  都支持双向数据绑定

  都不支持低端浏览器

不同点：

  1. AngularJS的学习成本较高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。

  2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。

Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说，这个优化差异还是比较明显的。

六、Vue与React的对比

相同点:

  1.React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用 

  2.中心思想相同：一切都是组件，组件实例之间可以嵌套。

  3.都提供合理的钩子函数，可以让开发者定制化地去处理需求

  4.都不内置例如AJAX，Route等功能到核心包，而是以插件的方式加载

  5.在组件开发中都支持mixins的特性。

不同点：

  1.React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

  2. Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM

七、关于MVX框架

MVC/MVP:

MVP是从MVC中演变而来的，他们都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。

    在MVC中。View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。用户User通过控制器Controller来操作模板Model从而达到视图View的变化。

    在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。

并且，Presenter和View是没有直接关联的，是通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。

 MVC开发中遇到的问题

1、开发者在代码中大量调用相同的 DOM API, 处理繁琐 ，操作冗        余，使得代码难以维护。

2、大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户  体验。

3、当 Model 频繁发生变化，开发者需要主动更新到View ；当用户  的操作导致 Model 发生变化，开发者同样需要将变化的数  据同步到Model 中，这样的工作不仅繁琐，而且很难维护复  杂多变的数据状态。

关于MVVM框架

MVVM

MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。

View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。

这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。

1.在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

 

2.ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

不仅View的更改可以反映到Model，Model的更改也可以反映到View，二者实现的前提也就是ViewModel把二者联系起来了。

SPA的了解

八、SPA是什么？

  单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

SPA的特点：

 

·速度：更好的用户体验，让用户在web app感受native app  的速度和流畅，

·ajax：重前端，业务逻辑全部在本地操作，数据都需要通过  AJAX同步、提交。

·路由：在URL中采用#号来作为当前视图的地址,改变#号后的  参数，页面并不会重载。

优点：
1.分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；

2.用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷
3、减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
缺点：
1、SEO问题，现在可以通过Prerender等技术解决一部分；
2、前进、后退、地址栏等，需要程序进行管理；
3、书签，需要程序来提供支持；

4、初次加载耗时相对增多。

九、Vue的项目实例

   Vue开发的环境搭建

Vue环境搭建中用到的内容有：

  node.js以及npm:vue：环境搭建的要求之一，是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用，npm是node下的包管理器

  webpack:为我们的模块去打包，预处理，热加载；它可以帮助我们把多个js文件打包为一个入口文件，并且可以达到按需加载。

  vue-cli:Vue的脚手架，自动生成模板

  环境搭建的步骤以及新建项目

1，首先要确保在电脑上面安装了node.js

  在命令行输入node –v ，回车查看是否有node的安装

2.安装淘宝镜像（安装可能需要等待一段时间）

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装webpack：

  npm install webpack –g（可以以使用cnpm install webpack -g）

4.安装vue-cli:

  npm install vue-cli –g

5.新建项目：

  在某个地方新建一个 文件夹用来存放项目文件，并且在命令行中cd进入该文件夹目录下；然后执行

  1）vue init webpack-simple 工程名字<工程名字不能用中文>

    eg:vue init webpack-simple my-vue

  然后会出现，让你选择项目名称，项目描述，以及作者等信息，一般默认即可，作者需要输一下。

 

2）cd 进入创建的工程目录中，cd my-vue；

3）安装项目依赖，一定要使用npm install，使用官方服务器，可能会很慢，如果用那个cnpm的话会导致后面出现很多依赖库缺失；

  npm install

4）安装vue的路由模块vue-router和网络访问模块vue-resource； 

  npm install vue-router vue-resource –save

5）运行项目 npm run dev

  运行完成后，应该会在浏览器中自动打开

  http://localhost:8080界面，如果没有打开，可以直接手动输入，不要关闭命令行，关闭后会提示无法访问此网站

环境搭建解决办法概述

 遇到：

  Module build failed: Error: Cannot find module '模块名'

 那就安装：

  cnpm install 模块名 --save-dev(关于环境的，表现为npm run dev 启动不了)

  cnpm install 模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)

 比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

十、项目的结构

十一、部署在服务器上

  在命令行中首先进入项目文件的目录下，然后执行

     npm run build

  然后项目文件下会生成一个dist文件，然后将文件下的内容上传给服务器。