学习目标：
1、能够说出Vue基本用法；
2、能够说出Vue的模板语法；
3、能够说出Vue的常用特性；
4、能够基于Vue实现案例效果。
目录：
1、Vue概述
2、Vue基本使用
3、Vue模板语法
4、基础案例
5、Vue常用特性
6、综合案例
1、Vue概述
国产框架，作者尤雨溪。渐进式JavaScript框架。
渐进式：
声明式渲染——>组件系统——>客户端路由——>集中式状态管理——>项目构建
优点：
1、易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue;
2、灵活：在一个库和一套完整框架之间自如伸缩；
3、高效：20KB运行大小，超快虚拟DOM。
2、Vue基本使用（实现HelloWord案例）
传统开发模式对比：
1、原生Js
<div id="msg"></div> <script type="text/javascript"> var msg = "Hello World"; var div = document.getElementById("msg"); div.innerHTML = msg; </script>
2、Jquery
<div id="msg"></div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var msg = "Hello World"; $("#msg").html(msg); </script>
3、Vue.js
<div id="app"> <div>{{msg}}</div> <div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ msg:"Hello World" } }) </script>
实例参数分析：
el:元素的挂载位置（值可以是CSS选择器或者DOM元素）；
data:模型数据（值是一个对象）。
插值表达式用法（插值表达式即代码中的{{}}）:
将数据填充到HTML标签中；
插值表达式支持基本的计算操作。
例如：<div>{{1 + 3}}</div>//页面会显示4
Vue代码运行原理分析：
Vue代码——>Vue框架——>原生js代码
3、Vue模板语法
3.1、模板语法概述：
如何理解前端渲染：
把数据填充到HTML标签中；
模板+数据——>前端渲染=静态的HTML内容
前端渲染方式：
1、原生js拼接字符串：
基本就是将数据以字符串的方式拼接到HTML标签中。缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。
2、使用前端模板引擎：
它拥有自己的一套模板语法规则，与拼接字符串相比，代码明显规范了很多。优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期额维护。缺点：没有专门提供事件机制。
3、使用Vue特有的模板语法：
插值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构。
3.2、指令：
什么是指令？
什么是自定义属性
指令的本质就是自定义属性
指令的格式：以v-开始（如：v-cloak）
v-cloak指令用法：
插值表达式存在的问题：“闪动”
如何解决该问题：使用v-cloak指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值
详细使用方法参见api:https://cn.vuejs.org/v2/api/#v-cloak
3.3、数据绑定指令：
v-text 填充纯文本
相比插值表达式更加简洁
详细使用方法参见api:https://cn.vuejs.org/v2/api/#v-text
v-html 填充HTML片段
存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以使用
详细使用方法参见api:https://cn.vuejs.org/v2/api/#v-html
v-pre 填充原始信息
显示原始信息，跳过编译过程
详细使用参见api:https://cn.vuejs.org/v2/api/#v-pre
3.4、数据响应式：
如何理解响应式：
html5中的相应式（屏幕尺寸的变化导致样式的变化）
数据响应式（数据的变化导致页面内容的变化）
什么是数据绑定：
数据绑定：将数据填充到标签中
v-once 只编译一次
显示内容之后不再具有响应式功能
3.5、双向数据绑定：
什么是双向数据绑定：
简单来说就是改变表单输入域中的内容会导致数据的变化，数据的变化又会导致页面显示内容的变化。
双向数据绑定分析：
v-model指令用法：
<input type="text" v-model="username"/>
详细用法参见api:https://cn.vuejs.org/v2/api/#v-model
3.6、MVVM设计思想：
M(model)
V(view)
VM(View-Model)
3.7、事件绑定：
Vue如何处理事件：
v-on指令用法：
<input type="buttom" v-on:click="num++"/>
v-on简写形式：
<input type="buttom" @click="num++"/>
事件函数的调用方式：
直接绑定函数名：
<buttom v-on:click="say">Hello</buttom>
调用函数：
<buttom v-on:click="say()">say Hello</buttom>
事件函数参数传递：
普通参数和事件对象
<buttom v-on:click="say('hi',$event)">say hi</buttom>
事件绑定-参数传递注意点：
1、如果事件直接绑定函数名，那么默认传递事件对象作为事件函数的第一个参数；
2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event。
事件修饰符：
.stop阻止冒泡
<a v-on:click.stop="handle">跳转</a>
.prevent阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
更多事件修饰符参见api：https://cn.vuejs.org/v2/api/#v-on
按键修饰符：
.enter回车键
<input v-on:keyup.enter="submit">
.delete删除键
<input v-on:keyup.delete="handle">
更多的按键修饰符参见api:https://cn.vuejs.org/v2/guide/events.html#按键修饰符
自定义按键修饰符：
全局config.keyCodes对象
Vue.config.keyCodes.f1 = 112
详细使用方法参见api:https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81
3.8、属性绑定：
Vue如何动态处理属性？
v-bind指令用法
<a v-bind:href="url">跳转</a>
缩写形式
<a :href="url">跳转</a>
v-model的底层实时原理分析
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
通过属性绑定和事件绑定来实现v-model
3.9、样式绑定：
class样式处理
对象语法
<div v-bind:class="{active:isActive}"></div>
数组语法
<div v-bind:class="{activeClass,errorClass}"></div>
style样式处理
对象语法
<div v-bind:style="{color:activeColor,fontSize:fontSize}"></div>
数组语法
<div v-bind:style="[baseStyles,overrideStyles]"></div>
3.10、分支循环结构：
分支结构
v-if
v-else
v-else-if
v-show
v-if与v-show的区别
v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到了页面）
循环结构
v-for遍历数组
<li v-for="item in list">{{item}}</li>
<li v-for="(item,index) in list">{{item}}+"---"+{{index}}</li>
key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key="item.id" v-for="(item,index) in list">{{item}}+"---"+{{index}}</li>