vue 基础指令

 vue  指令
1. v-bind 动态绑定
          语法 : v-bind:属性名="vue变量"
          简写 :    :属性名="vue变量"    
     
2. v-on 可以简写@ 
   (1)v-on 事件绑定
           语法 : v-on:事件名="methods中的函数名"
           简写 : @事件名="methods中的函数名"
       
    (2) v-on的是事件修饰符 (直接再事件后面点就好了 例子 :  @click.stop)
                               .stop  阻止事件冒泡
                               .prevent 阻止默认行为
    (3) v-on的按键修饰符
           语法 : @keyup.enter    监测回车按键
                     @keyup.esc        监测返回按键

3.  v-model 双向绑定  只针对表单元素
      (1) 语法 : v-model = "Vue数据变量"
   
    注意(重点) : v-model 复选框绑定时有两种情况
               (1) 非数组 : 一律当成 boolean 处理, 绑定勾选状态
               (2) 数组 : 会将勾选的复选框对应的 value 值放入数组

       (2) v-model 修饰符
                 语法: v-model.修饰符 = "Vue数据变量"
                          .number   以parseFloat 转成数字类型
                          .trim          去除首尾空白字符
                          .lazy           在change时触发而非input时 

4. v-show 和  v-if   控制标签的隐藏或出现
        语法 : v-show="Vue变量"   ---------> 设置元素的 display:none 用于频繁切换 隐藏
                  v-if="Vue变量"  --------> 直接从DOM树上移除 
                     高级用法 : v-else  

5. v-for  列表渲染,所在标签结构,按照数据数量,循环生成 (v-for写在哪就循环创建哪个标签)
         语法: v-for="( 值变量 , 索引值 ) in 目标结构" :key="循环索引"
                                      |             |
                                   item  ,   index