Vue.js的使用指南：

vue理论基础：

vue官方网站：https://cn.vuejs.org/v2/guide/

1.MVVM模式是什么？

​ Model:负责数据存储
​ View:负责页面展示
​ View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
​ MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加 简单vue.js是一个MVVM的框架如图所示：

此时vue扮演modelview的功能。

2.vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计
为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用
vue.js。
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发。

3.vue如何使用？

Vue.js的使用
1）在html页面使用script引入vue.js的库即可使用。
2）使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。
大型应用推荐此方案。
3）Vue-CLI脚手架

4.vue.js有哪些功能？

1）声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
比如：使用vue.js的插值表达式放在Dom的任意地方， 差值表达式的值将被渲染在Dom中。
2）条件与循环
dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。
3）双向数据绑定
Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑
定的数据对象，修改数据对象的值自动修改Dom元素中的值。
4）处理用户输入
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的
方法
5）组件化应用构建
vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。

5.vue使用流程：

代码编写步骤：
1、定义html，引入vue.js
2、定义app div，此区域作为vue的接管区域
3、定义vue实例，接管app区域。
4、定义model（数据对象）
5、VM完成在app中展示数据

示例：对应上面的5个流程。

差值表达式

{{ number + 1 }} 数学运算支持

{{ ok ? ‘YES’ : ‘NO’ }} 三目运算符支持

这是语句，不是表达式 {{ var a = 1 }}

流控制也不会生效{{ if (ok) { return message } }}

Vue基本命令：

1、v-model：

在表单控件或者组件上创建双向绑定 2、v-model仅能在如下元素中使用：

input
select
textarea
components（Vue中的组件）

如下图所示：表单控件和模型对象相互绑定，任意一个更改都会改变

2、v-text和v-html

解决插值表达式闪烁问题，使用
v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题

v-text和v-html

document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
innerHTML处理了转义的页面
innerTest原样输出，对应vue如下：
	<div v-text="message"></div>
	<div v-html="message"></div>

3、v-bind

1、作用：
    v‐bind可以将数据对象绑定在dom的任意属性中。
    v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class
  
  2、举例：
      <img v‐bind:src="imageSrc">   
      <div v‐bind:style="{ fontSize: size + 'px' }"></div>
         
  3、缩写形式
      <img :src="imageSrc">
      <div :style="{ fontSize: size + 'px' }"></div>

4、v-on

绑定一个按钮的单击事件，操作事件

V-on:监听dom事件 可以简写：@
	v-on:click绑定点击事件：
		@click使用methods：{functiion}
	v-on:keydown键盘事件
		event.preventDefault() 键盘阻止事件默认行为
		event.keyCode 键盘按下的按键码
	v-on:mouseover 鼠标移动事件
		event.stopPropagation()阻止事件传播行为
vue的事件修饰符
	表单验证必须有一个明确的boolean类型返回值
	在应用验证方法时必须加上 return  方法名称
	比如提交事件：onsubmit=”return checkForm()”
		可以用@submit.prevent来表示上述问题
		也可以用.prevent=event.preventDefault()vue提供事件修饰符来处理
Vue的按键修饰符：
	@keydown.enter=”fun1”按下的是回车       

5、v-if和v-for：

 v-for：	
	遍历数组：根据遍历的数字角标遍历
	遍历对象，对象中包含属性，使用key,value的方式进行取值
	遍历集合方式，集合是一个json字符串数组。
v-if,v-else
	满足展示v-if
	否则展示v-els

Vue的生命周期：

8个生命周期：

创建前 创建后
挂载前 挂载后
更新前 更新后
销毁前 销毁后

3个阶段：

初始化阶段，更新阶段，销毁阶段

常用的生命周期方法异步任务：

beforeDestory(): 做收尾工作, 如: 清除定时器

Vue使用的一些插件：

1. vue-cli: vue 脚手架
2. vue-resource(axios): ajax 请求
3. vue-router: 路由
4. vuex: 状态管理
5. vue-lazyload: 图片懒加载
6. vue-scroller: 页面滑动相关
7. mint-ui: 基于 vue 的 UI 组件库(移动端)
8. element-ui: 基于 vue 的 UI 组件库(PC 端)

Vue核心：

1.计算属性与监视

什么是回调函数：1.你定义的，2.你没有调用，3.但是执行了
关于回调函数应该明白：1.什么时候调用，2.用来做什么
计算：computed:回调函数计算并返回当前函数的值
计算属性：get() ：需要读取当前属性值时，计算并返回当前属性值
Set(value):当属性值发生改变时调用，更新相关的属性数据。
监视：watch:配置监视

计算属性：
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果

监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算

计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算

2.class与style绑定

在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术

class绑定:

:class='xxx'
xxx是字符串
xxx是对象
xxx是数组

style绑定

:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data属性

3.vue的过滤与动画

vue动画的理解
操作css的trasition或animation
vue会给目标元素添加/移除特定的class

基本过渡动画的编码
1). 在目标元素外包裹

<transition name="xxx">

2). 定义class样式

指定过渡样式: transition
	指定隐藏时的样式: opacity/其它
过渡的类名
	xxx-enter-active: 指定显示的transition
 	xxx-leave-active: 指定隐藏的transition
 	xxx-enter: 指定隐藏时的样式

4.vue过滤器

理解过滤器
功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 可是产生新的对应的数据

编码
1). 定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
  // 进行一定的数据处理
  return newValue
})

2). 使用过滤器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

5…vue指令总结

常用内置指令

v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

自定义指令：

注册全局指令

Vue.directive('my-directive', function(el, binding){
 el.innerHTML = binding.value.toupperCase()
 })

注册局部指令

directives : {
'my-directive' : {
    bind (el, binding) {
      el.innerHTML = binding.value.toupperCase()
    }
 }
}

使用指令

v-my-directive='xxx'