一些vue的基本操作

MVVM

Vue中是如何体现MVVM

参考:https://cn.vuejs.org/v2/guide/instance.html

指令

作用:取代dom操作

{{}}
v-text & v-html
v-on 事件修饰符 @keyup.13="处理函数"
v-bind 绑定 缩写 v-bind: 缩写成 `:`
v-model 双向绑定 将来用在表单操作中
v-if & v-show https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
v-for 
	(item,index) in 数组 :key="唯一的"

---

过渡和动画

前提

1、我们被动画的元素(div,p,span)，一定要包裹在Vue给我们提供的一个标签内(transition)

2、我们被动画的元素，只有在下列情况下，才会有过渡效果
	条件渲染 (使用 v-if)
	条件展示 (使用 v-show)
	动态组件
	组件根节点

通用的特点

1、动画整体分进入和离开两个阶段

根据它定义好的类名，来自己写过渡

注意:
	Vue在动画进入或是离开的时候，给我们分别提供了
	三个它实现定义好的类名给我们用，我们就可以通过
	它提供好的类型，来写我们自己的样式

在Vue中使用有名的第三方动画库 animate

参考:
	https://daneden.github.io/animate.css/
	
1、导入animate

2、在被动画的元素上，我们通过自定义类名，来使用animate.css
提供好的类名(animated fadeInRight)

3、我们的行内元素在使用一个类名的时候fadeInRight可能会有问题，把它变成块级元素

JavaScript 钩子(函数) 来实现动画

1、我们在transtion上面，注册我们进入或是离开时候的事件

2、在methonds中写好对应的处理函数

3、在beforeEnter中，写进入开始的状态【以进入为例】

4、在enter中，写进入阶段的持续时间【以进入为例】

5、在afterEnter中，写进入结束的状态【以进入为例】

注意点:
	1、我们的进入结束状态，可以写在afterEnter中，也可以写在
	enter中，如果我们后面要考虑使用第三方的动画库，来替代我们自己手写，这个时候，建议把结束状态放在enter中来写
	
	2、我们自己手写js代码来实现动画，必须在进入阶段，刷新动画帧

Velocity.js来操作动画

参考:http://velocityjs.org/

1、导入velocityjs

2、在enter，leave中使用velocityjs，会大大简化
我们js代码的书写

工作中如何抉择?

1、如果自己写css代码，建议能使用Animate.css就是用它
实在没有提供再自己写

2、如果自己写js代码，建议能使用velocityjs，就先使用它
如果实在不能满足，再自己写

---

computed & watch

参考:https://cn.vuejs.org/v2/guide/computed.html

计算属性:
	当我们需要计算某些值的时候，我们就可以使用它
	
	特点:
		1、他本质是一个函数
		2、它必须要有返回值
		3、计算属性相比于普通的方法来说，是有缓存的
		4、计算函数中所以来的模型值，发生变化了，它会重新计算
		https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95
	
侦听器:
	需要监听某个值的变化的时候，就可以使用它
	watch:{
		模型的属性:处理函数(新值,旧值)
	}
	
	watch 和 data同级

---

组件【重要】

组件的作用:
	最重要的作用就是复用
	
全局组件的写法:
	前四种:【学会之后，能看懂Vue的文档】
		1、先定义，再注册，最后使用
		2、定义注册一步到位，最后使用
		3、对组件定义的优化1，对template写法的优化1
		4、对组件定义的优化2，对template写法的优化1
		
	第五种:
		单文件组件
		
注意点:
	1、组件要想被使用，必须得注册
	2、组件的template必须有且只有唯一一个根元素
	3、组件中的data必须是一个函数，并且该函数要返回一个字面量对象

---