一. vue简介
- 传统前端开发模式（MVP）
MVP 全称：Model-View-Presenter ；MVP 是从经典的模式MVC演变而来
- Model：模型层，负责提供数据
- View：视图层，负责显示。
- Controller/Presenter：控制器，负责逻辑的处理
-
Vue 的MVVM模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。
MVVM模式.png
二. Vue 简单了解
- 组件创建
通过new Vue({})接管元素，进行Vue处理。
通过Vue.component({})创建组件 - 简单的组件间传值和函数处理。
父组件向子组件传值，通过v-bind传值
子组件接受父组件的传值，通过props接受
通过methods进行事件处理。
v-model //数据的双向绑定
v-on //处理用户输入
v-for //条件与循环
v-if //条件与循环
v-bind //声明式渲染
三. Vue的生命周期函数
- 生命周期函数，就是vue实例在某一个时间点会自动执行的函数。
- vue 的模板语法
v-text //和{{}}一样
v-html //不会转义 <h1/>等标签
四. vue基础语法
1. 模板语法
插值
- 文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
v-once //执行一次性的插值 - 原始HTML
v-html //绝不要对用户提供的内容使用插值，容易导致XSS攻击
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。
- 参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
v-bind
v-on
- 动态参数
- 缩写
v-bind:herf="url" //缩写 :href="url"
v-on:click="doSomething" //缩写 :@click="doSomething"
2. 计算属性和侦听器
计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
所以，对于任何复杂逻辑，你都应当使用计算属性。
- 计算属性缓存vs方法
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。 - 计算属性vs侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。 - 计算属性的
setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
3. Class与Style绑定
绑定HTML Class
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
- 对象语法
v-bind:class="{ active: isActive, 'text-danger': hasError }" - 数组语法
<div v-bind:class="[activeClass, errorClass]"></div> - 用在组件上
当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。
绑定内联样式
- 对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名： - 数组语法
- 自动添加前缀
- 多重值
4. 条件渲染
v-if
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
- 在
<template>元素上使用v-if条件渲染分组 v-elsev-else-if- 用
key管理可复用的元素
v-show
v-show 只是简单地切换元素的 CSS 属性 display。
v-if 和v-show
有本质的区别：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if 和v-for
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
不推荐同时使用。
5. 列表渲染
v-for
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法。
在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。<div v-for="(item, index) in items"></div>
在v-for里使用对象
你也可以用 v-for 来遍历一个对象的属性。
<div v-for="(value, name, index) in object"></div>
维护状态
只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
数组更新机制
- 变异方法
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。
push() //返回新长度
unshift(） //返回新长度
pop() //返回删除的元素
shift() //返回删除的元素
splice()
sort()
reverse()
- 替换数组
变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
- 注意事项
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
四. vue 简单使用
- 计算属性和侦听器
（1）、 计算属性
computed:{} //缓存机制，提高执行效率
当模板渲染中遇到带有逻辑计算的显示，可以考虑使用计算属性。
缓存机制举例：a = b + c; a依赖于b和c，只有在b和c变更的时候，a才会变。
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
（2）、侦听器
watch:{}
- vue 的样式绑定
1、对象
2、数组 - vue条件渲染
v-if
v-else
v-else-if
v-show
- v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
- Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换
vue列表渲染
1、变异方法//针对数组
2、改变引用//针对数组和对象
3、templete占位符vue的
set方法用于对象数据更新
Vue.set(vm.userInfo, 'name', '李四')
五. vue 高级使用
- 组件使用注意点
- 在使用
<ul></ul>,<tr></tr>,<select></select>等元素时，如果需要在这些标签里嵌套子组件使用。html5编码规则不允许在这些标签写其他组件，恰当使用is="row"可以解决。 - 关于vue实例中。vue的
data使用。vue根实例的data类型为对象，子组件中的data必须为函数。目的：子组件可能为多个地方使用，data函数返回单独的数据，而非多个组件共用同一个data。 - vue的ref的使用。vue不建议直接操作dom，需要的时候可用ref。可用在标签和组件上。
- 父子组件数据传值
- 父组件向子组件传递数据，通过属性的形式。和
react一样，都是单向数据流。 - 子组件向父组件传值，通过事件的形式，
this.$emit(evn, params)
- 组件参数校验与非props特性
- 组件参数校验：子组件接受父组件的传值，通过
props可以限制传值的类型。或者更复杂的，长度等等。属性值不会显示在最外层标签之上。 - 非props特性：子组件没有
props接受，不能使用。属性值会显示在最外层标签之上。
- 给组件绑定元素事件
- 可以和
react一致的只有。在组件名称上定义事件，组件内部使用。不方便。 - 可以使用
@click.native="handleClick"，直接调用组件内部的原生dom函数。
- 非父子组件之间的传值
- vuex等数据管理框架
- Bus/总线/发布订阅模式/观察者模式
- vue中使用插槽（slot）
可以更方便的向子组件中插入dom元素 - vue的作用域插槽
slot-scope -
动态组件与v-once指令
vue动画.png
六. vue 实战
- 路由
路由：就是根据网址的不同，返回不同的内容给用户。
