vue常用指令及循环

回顾：
mvvm

const vm = new Vue({
  el: '#app', //挂载vue 
  data: { // 放数据  data属性 会直接挂载到实例上
    msg: 'xxx'
  },
  methods: { // 用于放置 实例方法 直接挂载到实例上
    changeMsg (){

    }
  }
})

{{}}
渲染数据
  {{}}
  1,js环境  如果写 变量 去实例上找有没有属性或者方法
  2, 渲染数据 要求 模板中 写表达式
  3，如果是全局变量 白名单里面才能运行

常用指令：
  扩展了 组件 的属性的功能
  <组件 v-指令名="值"/>
  值：是js环境 可以写表达式 会找实例上属性和方法
  v-model
  v-text 不重要
  v-html 渲染富文本

vm.$mount(document.querySelector('#app'))

其他常用指令

v-bind:属性
  将标签（组件），的普通属性的值 变成动态的值
  值：变成js环境 里面可以写表达式、如果有变量 会去找实例上的属性和方法
  简写：
    :属性
v-on:事件
  将标签 事件 的事件函数 与 这个指令的 值进行绑定
    值：js环境 找 实例上的方法（只找方法）
  简写：
    @事件
注意：
  <button @click="fn">
  <button @click="fn()">
  绑定事件两种方式
    方式1，fn是事件函数  函数的第一个参数就是事件对象（没有兼容）
    方式2，fn不是事件函数 就是普通方法调用
  问题？
    方式2绑定 如何获取事件对象
    Vue提供了一个构造函数Vue的原型上 提供了一个变量 $event
    方式2绑定的使用场景
      这个函数在调用时需要传参
    
  取消冒泡  e.stopPropagation()
  阻止默认事件 e.preventDefault()

  事件修饰符
    .stop 阻止冒泡
    .prevent 阻止默认事件
    .once 只触发一次
    .capture 在捕获阶段就提前触发
    .self   只能由自己触发方法，后代元素无法触发

条件渲染 v-if v-else-if v-else

v-show 控制元素 显示、消失 功能和v-if比较类似
异同
相同：都是元素的显示、消失状态 值为true显示 false 隐藏
不同：v-show控制元素的display属性 v-if 是 移除元素
使用场景：
1，代码块需要频繁切换状态 此时应该使用v-show(性能消耗更小)
2，代码块初始不显示 且 不频繁切换 v-if(v-if是惰性，初始为false情况下，代码块不加载)

else

<div class="box" v-if="isShow">div1</div>
  
<div class="box2" v-else>div2</div>
当 isShow为true时，div1显示 div2消失
      false时 div2显示 div1消失
注意：
  v-else所在的元素 必须是v-if所在元素的下一个兄弟（除了空格）

v-else-if 使用场景不多

    <div class="box" v-if="num%3==0">div1</div>
    <div class="box2" v-else-if="num%3==1">div2</div>
    <div class="box3" v-else>div3</div>
  num++
    注意：
      v-if v-else-if v-else必须是连续兄弟，且中间没有其他兄弟 v-else放在最后一个 if放到第一个

列表渲染 循环

    <ul>
      <li v-for="el in arr">
        <!-- el作用域是li的内部 -->
        {{ el }}
        
      </li>
    </ul>


    <ul>
      <li v-for="(el,index) in arr"> 
        <!-- 循环同时得到下标 -->
        <!-- el作用域是li的内部 -->
        {{ el }} ==> {{index}}
      </li>
    </ul>

:class

    <div :class="cls1">div1</div>  // 会解析为data中cls1属性的值
    
    <div :class="[...cls2,'box4']"></div> // 数组会解析为多个类
    <div :class="{active:1==1}"></div> // div class = active取决于 对象值是不是真
    <div :class="{active:isActive}"></div>
    <div :class="['box3','box2',cls1,{active:true}]"></div>