Vue框架学习
1. 概述
Vue只关注视图层，Soc（关注度分离原则）。
前端三要素：HTML（结构）+ CSS（表现）+ JS（行为）
Vue是一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点
学习教程参考
1.1 MVVM模式
MVVM (Model-View-ViewModel) 是一种软件架构设计模式。MVVM的核心是
ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用为：该层向上与视图层进行双向数据绑定；向下与Model层通过接口请求进行数据交互。
MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：
低耦合，可复用，独立开发，可测试
Vue是MVVM模式的实现者，核心是
DOM监听和
数据绑定
1.2 第一个Vue程序
数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性（通过操作vm.message)，界面可以实时更新。
注：这里我把<script>内容放到<head>里面浏览器界面只会显示{{message}}，不会显示内容，而放到<body>里就能正常显示，和网上所描述的相反？
2. Vue基本语法
2.1 V-bind
可以使用V-bind绑定元素属性
2.2 V-if，V-else-if，V-else
2.3 V-for
用
in遍历元素
2.4 V-on
可以用V-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。方法必须定义在Vue的methods属性中。
2.5 双向绑定 V-model
Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，应该通过JavaScript在组件的data选项中声明。
2.6 Vue组件
组件是可复用的Vue实例，就是一组可以重复使用的模板。通过props属性向子组件传递数据。
2.7 Axios通信
Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API [JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF (跨站请求伪造)
data属性里的info可自动绑定response的各个属性值
2.8 Vue的生命周期
2.9 计算属性
就是一个能够将计算结果缓存起来的
属性(将行为转化成了静态的属性)，可以想象为缓存！
- methods：定义方法，调用方法使用currentTime1()，需要带括号
- computed：定义计算属性，调用属性使用currentTime2，不需要带括号；调用后会将结果缓存，再次调用显示的值不会发生变化，若方法中值发生了变换，则缓存就会刷新。this.message是为了能够让 currentTime2观察到数据变化而变化，可以在控制台使用vm.message=&#34;beijing&#34; ,改变下数据的值，再次测试显示会发生变化。
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。
2.10 内容分发
在Vue中我们使用元素作为承载分发内容的出口，称为插槽，可以应用在组合组件的场景中。通过<slot>元素实现，可以
动态拔插
2.11 自定义事件内容分发
以上代码中，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题。
通过使用 this.$emit(&#39;自定义事件名&#39;,参数)
2.12 入门小结
核心：数据驱动，组件化
优点∶借鉴了AngulaJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Dom操作放到内存中执行
常用的属性：
- v-if, v-else-if, v-else
- v-for
- v-on 绑定事件，简写 @
- v-model 数据双向绑定
- v-bind 给组件绑定参数，简写 :
组件化:
- 组合组件slot插槽
- 组件内部绑定事件需要使用到this.$emit(&#34;事件名&#34;,参数)
- 计算属性的特色,缓存计算数据
遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios 框架做异步通信
3. vue-cli
3.1 什么是vue-cli
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板，预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速。
主要功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
3.2 需要的环境
- Node.js ：http://nodejs.cn/download/
- Git : https://git-scm.com/downloads 镜像:https://npm.taobao.org/mirrors/git-for-windows/ （暂未用到）
npm是 JavaScript 软件包管理工具,并且是 Node.js （会自动安装npm）平台的默认包管理工具。通过npm可以安装、共享、分发代码,管理项目依赖关系。
在命令行分别可通过 node -v 和 npm -v 查看版本号
安装 Node.js 淘宝镜像加速器（cnpm）下载会快很多（尽量少用）
安装vue-cli
vue list 查看可以基于哪些模板创建vue应用程序，通常我们使用webpack
第一个vue-cli应用程序
使用管理员身份打开命令行进入一个文件夹，然后创建一个基于webpack模板的vue应用程序
然X行一些初始化操作就能安装成功，以下3步为进入该目录，在该目录安装npm，运行该程序，可以使用idea接管
3.3 webpack
3.3.1 webpack介绍
webpack 是一款
模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LЕSS、图片等
都作为模块来处理和使用。
安装：
打印版本号：
本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LЕSS等。
3.3.2 webpack使用
先创建一个文件夹交给idea接管，会自动生成一个 .idea 文件夹
在目录下创建一个moudles包，创建hello.js，在里面使用exports暴露方法，可以被导入使用（类似于类）
在moudles包下创建main.js当作是js主入口 , main.js 使用require导入hello.js 调用sayHi()方法（类似于实例化类）
在主目录下创建webpack-config.js , 这个相当于webpack的配置文件，其中enrty请求main.js的文件，output是输出的位置和名字
在idea命令台输入webpack命令（idea要使用管理员身份启动）
完成上述操作之后会在主目录下生成一个dist文件夹， 生成的js文件路径为/ dist/js/bundle.js
在主目录创建index.html 导入bundle.js
3.4 vue-router路由
3.4.1 vue-router介绍
vue-router 是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的CSS class的链接
- HTML5历史模式或hash 模式,在IE9中自动降级
- 自定义的滚动条行为
3.4.2 安装vue-router
vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令
安装成功之后去在项目的node_modules路径下会出现vue-router文件夹
3.4.3 vue-router demo实例
首先在src下建立components文件夹，里面代表一个个的组件，例如我们新建两个vue文件，Main.vue, Content.vue
然后在src下建立router文件夹，新建一个 index.js 文件，导入上面写好的组件，然后配置导出路由，需要导入路由插件（以后要使用什么插件，都需要导入），类似于导包
然后在src目录下的 main.js 中导入路由，并配置路由，这个一般写实，不需要再修改
最后在src目录下的 APP.vue(程序的唯一入口) 中进行跳转
3.5 vue + ElementUI
首先使用webpack模板新建一个vue项目
ElementUI组件使用：
然后安装依赖，我们需要安装 vue-router, element-ui, sass-loader 和 node-sass 四个插件
npm 命令解释
引入Element
3.6 嵌套路由
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。组件的内部使用组件
3.7 参数传递
首先在组件 Main.vue 中写入传递的参数
然后第一种方法：在 index.js 中写入接收参数，再在 Profile.vue 中显示参数，注意template中只能有一个根元素
第二种方法（建议用这种）：先在 index.js 中增加 props：true 属性，然后在显示的组件 Profile.vue 中接收参数
重定向
Vue 中的重定向是作用在路径不同但组件相同的情况下
在需要跳转的地方放置路由即可
3.8 路由模式与404
路由模式有两种
- hash：路径带 # 符号，如 http://localhost/#/login
- history：路径不带 # 符号，如 http://localhost/login
默认第一种，第二种可通过修改路由配置实现：
页面404
首先创建一个NotFound.vue视图组件
然后在 index.js 中导入并配置
3.9 路由钩子与异步请求
beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行
参数说明：
- to：路由将要跳转的路径信息
- from：路径跳转前的路径信息
- next：路由的控制参数
- next() 跳入下一个页面
- next(&#39;/path&#39;) 改变路由的跳转方向，使其跳到另一个路由
- next(false) 返回原来的页面
- next((vim)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例
在钩子函数中使用异步请求，通过使用Axios
vue-axios|axios中文网
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126958.html
starterknow