vue3+ts学习（二）：vue的基础指令

基础指令，不常用：

v-once:该标签及子标签只渲染一次（用于性能优化）

v-text:用的比较少 等价于{{ }}

v-html:对html进行解析

v-pre:跳过该标签及子标签对{{ }}的解析

常用指令：

v-bind：缩写 : 动态绑定属性，与class和style可以实现对象语法和数组语法

      <!-- class对象语法 isRedColor为true则存在该类-->
      <h2 :class="{'redColor':isRedColor,'bigSize':isBigSize}">{{message}}</h2>
      <!-- 默认class可与动态class结合 -->
      <!-- <h2 class="aaa" :class="{'redColor':isRedColor,'bigSize':isBigSize}">{{message}}</h2> -->
      <!-- 可直接传一个类对象，也可传一个函数的返回值，也可以传一个计算属性 -->
      <!-- <h2 :class="classObj">{{message}}</h2> -->
      
      <!-- class数组语法 bigSize为类名-->
      <h2 :class="['redColor',bigSize]">{{message}}</h2>
      <!-- 可用三元表达式 -->
      <!-- <h2 :class="['redColor',isBigSize? 'bigSizeData':'']">{{message}}</h2> -->
      <!-- 也可结合对象语法 -->
      <!-- <h2 :class="['redColor',{'bigSizeData':isBigSize}]">{{message}}</h2> -->
      
      <!-- style对象语法-->
      <!-- 属性名用横线连接的话必须加单引号，不然用驼峰fontSize也可以 -->
      <div :style="{color:'red','font-size':'15px'}">{{message}}</div>
      <!-- 也可用表达式拼接 -->
      <div :style="{color:'red',fontSize:number+ 'px'}">{{message}}</div>
      <!-- 也可直接放入对象 -->
      <div :style="styleObj">{{message}}</div>
      
      <!-- style数组语法-->
      <!-- 比较少用，用于多个动态样式对象 -->
      <div :style="[styleObj1,styleObj2]">{{message}}</div>

还能用于动态绑定属性名

      <!-- 用于组件开发 this.name = "shuai" 则最终显示 shuai="message"-->
      <div :[name]="message">{{message}}</div>
      
      <!-- 用于封装高阶组件 this.propObj.name/age等 均会动态绑定属性名在该组件上-->
      <div v-bind="propObj">{{message}}</div>

v-on: 缩写@ 动态绑定方法

    <!-- 语法糖 -->
    <div class="area" @mousemove="mouseMove">{{message}}</div>
    <!-- 可加入表达式 -->
    <button @click="number++">{{number}}</button>
    <!-- 绑定一个对象 -->
    <div class="area" v-on="{click:btn1Click,mousemove:mouseMove}"></div>
    <!-- 不传参数vue默认会传event -->
    <button @click="btn1Click">按钮1</button>
    <!-- 传参数时要获取event要传$event -->
    <button @click="btn2Click($event,'shaui',18)">按钮2</button>

v-if,v-else-if,v-else

惰性的条件渲染，性能损耗较大，会销毁标签而不是显示和隐藏，不适于频繁切换

多个标签的条件渲染可以通过template包裹

v-show

只针对css显示隐藏元素，标签一直存在于页面上，适用于频繁切换

不支持template使用，不与v-else使用