Vue简单指令

Vue.js：是一套用于构建用户界面的渐进式javascript框架。当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue版本发布的时间
- Vue 1.x 2014
- Vue 2.x 2016
Vue是MVVM框架【MVVM是MVC的衍生框架】
MVC

• MVC是一个软件架构思维，它将一个软件分为三个部分
  • M Model 数据
  • V View 视图
  • C Controller 控制器
• MVC衍生
  • mvc backbone 【 前端框架 】
  • mvp
  • mvvm Vue Angular.ts 【 Angular2.0】 ember

MVVM

• M Model 数据
• V View 视图
• VM ViewModel 视图模型
  V的变化会反应到VM上，反之同理，也就是vm的改变也会影响V

vue简单使用演示：
通过script标签引入Vue.js

el的作用
1. 为实例vm规定一个使用范围，只能在#app范围内使用
2. 为实例vm提供一个模板
data的作用
1. 规定一个数据
2. data的数据使用范围必须在 #app 内
data 中定义的数据在模板中相当于全局变量，直接使用 .
数据改变，视图也会跟着改变，页面不会刷新。

Vue中为了能够让我们在模板中使用js语法，它提供了一个语法糖，这个语法糖叫做 mustache，别名： 【 双大括号语法 】

Vue有指令和组件系统两个大功能
指令：

• 使用形式：
  • 绑定在dom的属性身上
  • 为了区别自定义属性，vue提供的指令都携带 v-
• 数据展示
  • v-html 非转义输出 ， 可以解析 xml类型数据
  • v-text
• 条件渲染
  • v-if
  • v-else-if
  • v-else
• 条件展示
  • v-show
  • v-if vs v-show
    • v-if是真正的控制dom的存在与否，v-show 是控制dom的display:none属性
    • 如果初始条件都为false,v-if会惰性渲染【 不渲染 】，但是v-show不管条件是什么都会渲染，所以v-show的初始渲染开销较高
    • 如果我们要频繁的切换flag,使用 v-show ， 反之，使用v-if

简单演示：
数据展示：
- v-html 非转义输出 ， 可以解析 xml类型数据
- v-text
- 条件渲染
- v-if
- v-else-if
- v-else

v-bind：单项数据绑定通过操作数据就可以改变V中dom的样式，相当于操作了dom。
1.- 类名的绑定 v-bind【 两种写法 】
- 数组的写法 【推荐 】
- 对象的写法
- 样式的绑定
- 数组的写法 【 推荐 】
- 对象的写法
类名绑定写法：

样式绑定写法：

2.v-model 【 双向数据绑定 】

3.v-on 事件