1、VUE基础回顾1

1.v-if和v-show

　　v-if 和v-show均可以显示和隐藏元素；
　区别：（1）v-if初始值为false那么这个元素不会被渲染 ，v-show无论初始值为什么值都会被渲染
　　　　（2）v-if是控制DOM元素是否插入，v-show是控制css的display属性
　　　　（3）v-if适合隐藏还没有加载的内容或切换显示与隐藏频率较低的地方，v-show反之;

　　此外还有两个条件语句和v-if有关：v-else-if ,v-else

1 <div v-if="state==='loading'">加载中。。。</div>
2 <div v-else-if="state==='errr'">出错了。。。</div>
3 <div v-else>个人内容</div>

　　当根据state的值显示不一样的内容

2.v-for循环

　　直接看示例：

<ul>
      <li v-for="（item，index） in state " :key="item.index">{{item.content}}</li>
</ul>

　　该指令可遍历对象也可遍历数组，key为li的惟一标识符，可保证高效渲染，还能够保证标签顺序不会错乱；

3.v-bind属性绑定，简写 “ : ”

　　示例　　　

<button :type="test"></button>

　　该指令能够接收参数，用于将一个值绑定到一个HTML的属性上。上例为button的type参数绑定了一个变量test，该值在data中能够为任何button类型，这个指令对于disabled和checked一样有效，就看为false仍是true，断定是否生效

4.v-on事件绑定，简写 '@事件名'

　　该指令将事件绑定到元素上，将事件名称做为参数，将事件侦听器做为传入值 

<button v-on:click="counter++"></button>
    <!-- 按钮单击counter的值加1 -->
    <button v-on:click="counter"></button>
    <!-- counter也能够做为方法名，调用执行该函数，若是加()可在其中传递参数 -->

　　事件修饰符

　　　　能够根据事件修饰符来修改事件侦听器或者事件自己   例 @click.self

　　　　　　阻止执行事件的默认行为  .prevent修饰符   例如阻止a标签的默认跳转
　　　　　　阻止事件继续传播，避免在父级元素触发   .stop
　　　　　　只让事件执行一次   .once 

　　　　　　事件捕获，事件会传递到当前元素的下级元素前触发（而在冒泡模式中，事件会先在当前元素上触发，而后向上冒泡）  .captrue
　　　　　　只让事件在当前元素触发，而不是在子元素上   .self

　　　　　　也能够只设置事件名+修饰符，修饰符能够进行链式操做  例如该例子会阻止单击事件沿DOM树向下传递，而且只有触发第一次有效，@click.stop.captrue.once

　　绑定键盘事件  @keyup,按下会触发事件，@keyup(test) 在test函数中能够接收参数e,e为键盘上的任何按钮表明的值，强大的vue给咱们了修饰符，修饰符能够做为按键值做为修饰符@keyup.27表明esc键，也为经常使用的按钮提供别名.enter,.tab等等

　　　　　　.exact能够指定按键触发 @keydow.enter.exact  只有enter件可触发