介绍
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
一、基础特性
vue实例常用到的构造选项
选项 说明 el 唯一根标签，决定Vue实例会管理哪一个DOM节点 data Vue实例对应的数据对象 methods 定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用 computed 定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号 components 定义Vue实例的子组件 filters 定义Vue实例的过滤器 watch 监听数据变化，观察和响应 Vue 实例上的数据变动 在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。
使用el 绑定DOM元素
1、常用指令
概述
指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。
Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。
①、v-text
v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。
②、v-html
v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。
③、v-bind
v-bind指令用于实现单向动态数据绑定。
前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。
④、v-on
v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。
小结：
Vue.js为v-bind和v-on这两个最常用的指令提供了语法糖(语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，以便于程序开发，也称为糖衣语法，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会)，也可以说是缩写或简写。
⑤、v-for
v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for， 它需要结合着in或者of来使用。
for循环普通数组
for循环对象数组
for循环对象
⑥、v-model
v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。
v-model修饰符
v-model有3个修饰符，分别是lazy、number、trim
1、lazy
v-model默认是在input事件中同步输入框中的内容，也就是一旦数据发生改变，对应的data中的数据也会发生改变。如果使用lazy修饰符，可以让数据在失去焦点或者回车时才会更新。
<input type="text" placeholder="搜索" v-model.lazy='keyword' />
2、number
默认情况下，在输入框输入数字的时候，默认会把输入的内容当作字符串类型处理，如果加上number修饰符，就可以让你在输入数字的时候将内容转为number类型。
<input type="text" placeholder="搜索" v-model.number='keyword' />
3、trim
trim修饰符可以去除输入内容左右两边的空格。
<input type="text" placeholder="搜索" v-model.trim='keyword' />
⑦、v-if和v-else
v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。
v-if的使用一般有两个场景：
1.通过条件判断展示或者隐藏某个元素或者多个元素；
2.进行视图之间的切换。
v-if
v-else
⑧、v-show
v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。
带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else。
v-if和v-show的区别
v-if和v-show都可以用来动态地控制DOM元素的显示和隐藏，但是，二者是有区别的。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-if 也是“惰性”的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
2、事件修饰符
v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修饰符会产生不同的功能，通常配置v-on指令来使用，写在事件之后，用“.”号连接，如“v-on:click.once”表示点击事件只触发一次。
常用的事件修饰符：
事件修饰符
说明 .stop 阻止事件冒泡 .prevent 阻止默认事件 .capture 添加事件监听器时使用事件捕获模式 .self 将事件绑定到该元素本身，只有自身才能触发 .once 事件只触发一次
键盘事件的修饰符：
在我们的项目中，经常需要监听一些键盘事件来触发程序的执行，例如键盘的按下（keydown）和键盘的松开(keyup)事件等等。这些事件我们往往可以给其添加一些修饰符来进行修饰，比如：
.enter 监听enter回车键的触发 .tab 监听tab键的触发 .up、.down 、.left、 .right 监听上、下、左、右键的触发 ctrl 监听ctrl键的触发 ... ...
3、计算属性与监听属性
概述
为了让模板的语法看起来更加的简洁，同时不影响代码和内容的可用性，Vue.js框架提出了计算属性和监听属性。
①、计算属性 computed
一般我们是可以在模板内使用表达式的，但是建议只用于一些简单的运算，在执行一些复杂的运算逻辑时，一般不建议在模板中实现，这样会让模板过重难以维护。
计算属性和方法的区别
Vue实例中的methods也可以完成计算的功能，与计算属性的作用相同。那么为什么在做计算的时候通常选择计算属性而不选择方法呢？因为计算属性是基于他的依赖缓存的，所以只有当其依赖的数据发生改变的时候，才会重新求值。这就意味着，只要依赖的数据没有发生改变，多次访问计算属性就会立即返回之前的计算结果，不必再次执行函数。而methods不同，他每调用一次就执行一次函数，所以computed 和 methods相比，computed有缓存，性能开销小。
②、监听属性 watch
Vue.js中的事件处理方法可以根据用户的需要自定义，能通过单击事件、鼠标事件等触发，但是不能自动监听当前Vue实例对象的状态的变化。为了解决上述问题，Vue.js提供了watch状态监听功能，只要监听到当前Vue实例中数据的变化，就会调用当前数据所绑定的事件处理方法。
二、组件
概述
组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。
为什么使用组件
①、方便重复使用
②、减少代码重复冗余
③、便于多人协同开发
④、有助于提高开发效率
⑤、提升整个项目的可维护性
Tip:通常，代码中一些没有见过的自定义标签，如<my-component>等，就是组件。每一个标签代表一个组件，组件一旦注册成功，就可以复用，可以在很多需要的地方直接使用即可。
1、组件之间的通信
组件是是Vue.js中最强大的功能之一。组件实例的作用域是相互独立的，这就意味着不同组件之间的数据是无法共享的。一般组件之间的关系如图所示。
A和B，B和C、B和D都是父子关系，C和D是兄弟关系，A和C、A和D是隔代关系（可能隔多代）。
组件通信时，根据组件之间的关系的不同，有着不同的通信方式。一般通信分为3种情况：父组件向子组件通信、子组件向父组件通信、非父子组件之间的通信。针对不同的场景，需要使用不同的通信方式。
1、父组件向子组件传递数据，需要props属性来实现。
2、子组件向父组件传值，需要用到自定义事件，整个通信的过程为：
2.1、子组件使用this.$emit('事件名','需要传输的数据')来触发事件，父组件使用$on()来监听子组件的事件。
三、路由
概述
其实就是指向的意思，当点击页面的Home按钮时，页面就显示Home页面的内容，点击about按钮时，就显示about页面的内容，这可以说是一种映射。
问题：点击按钮之后，如何做到正确的响应呢？例如点击home,显示home页面的内容，点击about，显示about页面的内容。这就要涉及到三个基本的概念了，分别是route、routes、router。
① route ：指一条路由，单数形式，比如 点击Home-->显示home页面的内容，这是一条路由，点击About-->显示about页面的内容，这是另一条路由。
② routes : 指一组路由，把多个单条路由组合起来，就形成一组路由。
[
{点击Home-->显示home页面的内容},
{点击About-->显示about页面的内容}
]
③ router是一个机制，相当于一个管理者，主要是来管理路由的，比如：
在routes里定义了一组路由，他是静止的，没有任何效果的，当真正进行页面的路由请求的时候，需要router来起到作用，当点击路由跳转时，他会到routes里面去查找相对应的path,从而显示对应页面的内容。
三、axios插件
1、总结
2、跨域
①、为什么出现跨域
一般浏览器会有同源策略的限制。同源策略是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受影响。所谓同源（同一个域）就是指两个页面具有相同的协议（protocol）、主机（host）和端口号（port）
②、什么是跨域
当一个请求的url的协议、域名、端口号三者之间任意一个与页面当前的url不同即为跨域。
PS:一般跨域会出现如下报错：
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
