MVVM的基本概念：
- M指的是数据（model），V是视图，VM是视图模型，将数据绑定视图上（双向绑定），viewModel 将数据模型 和视图层连接起来，不会再去操作原生的DOM，只需要关心数据的流向
差值表达式：
使用大括号(Mustache 语法) “{{ }}”是最基本的文本插值方法，它会自动将我们双向绑定的实时数据显示出来，实现数据的双向绑定。
Vue常用系统指令
- v-text : 将一段文本渲染到指定的元素元素中
- v-html : 与差值表达式和 v-text不同，v-html会将数据渲染为html页面
- v-bind : 可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和class.
可以用来绑定元素的属性,(如：title, href , title , 自定义属性，name, class等)，写法： 可以省略v-bind, 直接写为 : 属性名 - 作用：可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和clas
- 举例:
<div :class="[classA, classB]">classA, classB</div>
<div v-bind:class="{ red: isRed }">isred</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>
<div v-bind:style="{ fontSize: size + 'px' }">size22</div>
<img v-bind="{src:imageSrc+'?v=1.0'}" >
<div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>
- v-for： 遍历数组或对象； 用法：
item in Array ...... {{ item }}
(item, index) in Array ....{{item}}
value in Object ..... {{value}}
(value, key, index) in Object ..............{{index}}.{{key}}.{{value}}
- v-model:
- 在表单控件或者组件上创建双向绑定
- v-model仅能在如下元素中使用：
input
select
textarea
components（Vue中的组件）
- v-on: 绑定事件
- 作用：绑定事件监听，表达式可以是一个方法的名字或一个内联语句，
如果没有修饰符也可以省略，用在普通的html元素上时，只能监听 原生 DOM 事件。
用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
写法：v-on:事件名 , 简写写法： @事件名 - 常用事件：
v-on:keydown v-on:keyup v-on:mousedown v-on:mouseover v-on:submit ....- 按键修饰符
触发像keydown这样的按键事件时，可以使用按键修饰符指定按下特殊的键后才触发事件,可以给和按键相关的事件添加按键修饰符 常用的有 .enter
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
.tab .delete // (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right - 作用：绑定事件监听，表达式可以是一个方法的名字或一个内联语句，
- 通过执行函数中添加event参数传递事件对象，注意只能是event,并且不能加引号
- 事件修饰符可以给事件添加特殊功能 .stop .prevent
控制元素的显示和隐藏
- v-if ： v-if="布尔值" , 通过dom来控制元素显示和隐藏,
作用：根据表达式的值的真假条件来决定是否渲染元素，如果条件为false不渲染（达到隐藏元素的目的），为true则渲染。在切换时元素及它的数据绑定被销毁并重建.
<h1 v-if="isShow">Yes</h1>
// 也可以用 v-else 添加一个 “else” 块：
<h1 v-if="isShow">Yes</h1>
<h1 v-else>No</h1>
// v-else 元素必须紧跟在 v-if 元素否则它不能被识别。
- v-show ： v-show="布尔值",通过控制样式display:none来控制元素显示和隐藏
- v-if 和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中.
v-show是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的 - v-cloak : 指令保持在元素上直到关联实例结束编译后自动移除，v-cloak和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
