#Vue2.0

##Vue2.0特点

特点：MVVM框架,响应式原理（声明式）， 支持组件化（自己封装的组件），丰富的指令，基于选项的（template,data, computed , watch, methods.这些选项在Vue框架中都有固定的位置），Vue文档集中（在Vue官网中，是最好的教程），Vue生态（丰富且简单），渐进式的（项目可大可小）

##思想

JQ思想：（DOM）我们需要在事件交互中改变视图时，通过事件使用DOM选择器，选中目标节点，再使用DOM方法直接改变视图。

Vue开发思想：我们需要在事件交互中改变视图时，先在Data选项中声明一个合适的变量，然后再在交互事件中改变这个声明式变量即可，视图也随着自动更新，这是一种间接的操作

##创建组件

挂载：1. 可以通过 el:'#id变量挂在到真实DOM（响应式系统）

            2.还可以通过 变量名.$mount('#变量名'）来挂载

通过data： {}  来声明变量 

变量特点：响应式的，所以变量变化，视图自动更新。

通过methods来定义函数

##指令

指令都是以 ‘v-’开头 的，通过视图节点动态绑定变量的，实际上是DOM功能的抽象，所以指令实际上也是DOM的操作。“指令的‘值’是表达式”

1.文本类指令（进行文本操作的）

文本指令有：{{}}， v-text, v-once,v-cloak,v-html

{{}}: 是一个文本差值，一般变量是写在中间的大挎号里面，如 {{msg}},这样写的格式，它用于绑定文本的节点，与v-text功能一样，区别是会出现一闪而过的问题。解决这个问题是在属性中加入一个v-cloak,然后在<style>中写[v-cloak] {display:none}.

v-text:'变量'，它用于绑定节点的文档，在大多数的时候可以与{{}}进行相互替换。

v-once  跟文本差值一起使用，只更新一次。它是用于指定节点的动态内容只绑定一次，当前节点中所对应的变量发生变化，视图不更新。

v-once与v-cloak都不需要接受表达式来做值。v-cloak一般用来解决闪烁问题，

v-html   用于绑定动态html节点，相当于DOM中的innerHTML，同时默认已经做了防注入攻击XSS的处理

2.动态属性指令（bind）

v-bind 用于动态绑定节点的属性（如 title, value, class,style等）v-bind用的非常多，所以可以简写为 ‘ ：’

v-bind  class基本语法格式：

字符串 动态class语法（一）：<div :class = '变量'> </div>

数组   动态class语法（二）： <div ：class= '[表达式1，表达式2，.....]> </div>

对象  动态class语法（三）： <div : calss = '{ 类名1：布尔值1，类名2：布尔值2，...}'> </div>

v-bind   style基本语法格式：

动态style语法（1）： <div : style='` color: red`'> </div>

动态style语法（2）： <div :style ='[ { css键值对}]'> </div>

动态style语法（3）： <div style =' { css键值对}'></div>

3.动态事件绑定v-on 用于给视图节点绑定JS事件（如 click, mouseenter, biur,keyup等）

v-on 用的比较多，所以也可以简写  '@'

基本语法： <div @事件名.事件修饰符 = '事假处理器'></div>

如：   <div class="inner" @click.stop='innerClick'></div>

v-on 可以使用的事件修饰符  .stop 阻止冒泡  .prevent 阻止事件默认  .enter绑定键盘Enter键盘....

4.表单绑定 （v-model）

v-model  用于表单取值（可以进行双向绑定）（如 input, select,texttarea）

基本语法： <input type='text' v-model.表单修饰符 = '变量' />

如：<input type="number" v-model.number='age2' />

表单的三个修饰符 ： .trim 自动去除文本收尾空格  .number 隐式类型转换成number  .lazy用于性能，当表单失焦时再进行双向绑定

5.列表渲染（v-for  ）

 v-for 用于渲染列表、对象、Number变量等等.

当v-for渲染列表时 ，语法： <div v-for ='(item,index) in array'> </div>

当v-for渲染对象时， 语法： < div v-for = '(value ,key ,index) in obj'> </div>

当v-for 渲染number时 ， 语法： <div v-for ='(num,index) in 5'

6.条件指令

v-show 用于显示或者隐藏视图节点，背后使用display： block/none来实现

v-if/v-else-if/v-else 用于显示隐藏视图节点，背后是真正的移出或插入视图节点

说明：v-if是因为节点插入与移出比较耗费性能，v-show 只是通过样式来实现显示与隐藏，性能开销更小，需要显示与隐藏比较频繁用v-show 。v-if与v-for不建议一起使用，如果一定要在同一个节点使用v-if和v-for ，v-for优先级更好。

7.其他指令

v-pre 用于调试，可以阻止vue 编辑器对指令的编辑，生产工作一般很少使用

8.自定义指令

在vue 开发中，除了可以使用这些内置指令以外，我们还可以用Vue.directive()或directives选项来自定义自定

指令相关问题

1.常用的vue 指令有哪些？你怎么理解指令

v-bind  v-show  v-if 和 v-else v-else-if v-for  v-on  v-html  v-cloak和v-text  v-once:  v-pre   v-model

专门在HTML中也能实现分支、循环等程序功能的特殊的自定义属性

2.v-if与v-for 有什么区别？

v-for优先级高于v-if，

用法：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名

渲染：在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

3.v-for可以循环哪些数据类型？v-for列表渲染时为什么加key？

数据类型： 数字，字符串，数组，对象

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

4.v-model 有哪些修饰符？

.lazy  .number .trim

5.vue 中怎么阻止冒泡？ 怎么阻止默认事件？ 怎么监听键盘enter键？

<div @click.stop="doSomething($event)">vue取消事件冒泡</div>

<div @click.prevent="doSomething($event)">vue阻止默认事件</div>

@keyup.enter:   监听