vue3个人心得---（指令初解）指令书写规范

指令书写规范

一、指令概念

vue专属的标签属性，这些属性采用v-标识，用于实现DOM的功能，称为指令。

一、指令书写规范

指令的标准写法：'v-指令' + '：参数' + '.修饰符' = "值",如v-on:click.prevent="XXX"

1、指令

vue有8个指令，分别为：
v-text与v-html 文本指令
v-if与v-show 条件渲染/显示指令
v-bind 属性绑定指令
v-for 列表渲染指令
v-on 事件处理指令
v-model 表单属性绑定指令

2、参数

有些指令必须配备参数以进一步明确指令的作用方式。参数以帽号前缀的形式跟在指令的后面。如：v-on:keydown="yi"
v-on的参数用于明确触发的具体事件，v-bind的参数用于明确绑定的属性名。

• 动态参数
  参数可以是一个变量，以实现动态控制。
  变量须以[]包裹。
  变量的值如为null（意为显式移除该指令）。

• 对象参数
  参数可以是一个对象量，以实现多条指令。
  对象参数需放置在指令值的位置，也就是写在 ‘=’ 号后面。
  参数必须与指令值一一配对，参数为对象属性名，指令值为对象属性值。
  动态参数与对象参数如下：

  <template>
  <button :[op]="tp" @.a="{click:yy,keydown:yi}">
  5555
  </button>
  </template>
  <script setup>
  import { ref } from 'vue';
  const op =ref('style')
  const tp='color:red;font-size:20px'
  function yy(){op.value=''}
  function yi(){console.log('uuu')}
  </script>

3、修饰符

有一此指令需要对执行方式进行限制或补充，修饰符以圆点前缀的形式加到参数后面。如：@keydown.a="yi"

4、指令值

单个指令值
值是指令执行时需使用的数据，值需用引号括起。值的类型有4种，如下：

• 常量类型：数字、字符串、布尔、null、undefined。如果是字符串需要再在引号内加引号以与变量加以曲别，不加再加引号会被当成变量类型处理。（布尔值转换：0、-0、NaN、""、null、undefined 转换为布尔值是false，其它转换布尔为true。
• 变量类型：变量类型​的值不需在引号内加引号。
  函数型变量：函数变量要在函数名后加小括号调用才会生效。

这会使函数在组件每次更新时都会被调用，如果函数体内有自增计算，如count++会导致不停循还递归。因此不建议值里调用函数，推荐使用计算属性。
特例：在v-on指令值只会在触发事件时函数才会调用，无循还递归风险。v-on指令使用函数不需加小括号调用。
v-bind:ref标识属性也无循还递归风险。v-bind:ref指令使用函数也不需加小括号调用。

• 复杂表达式：数字、字符串、布尔、null、undefined、变量、函数、对象、数组是字面量表达式；由一个或多个运算符（算术符、关系符、逻辑符、赋值符等）与字面量表达式组成的表达式叫复杂表达式。详见表达式完全功略。

多个指令值
指令值可以有多个，按使用方式分为3种

• 逐一使用式数组式： 每个值从前开始使用，每个值都会使用一次， 逐一使用式需要把值放在数组[]内。v-on指令在[]内不可省略小括号。
• 配对使用对象式： 每个值配对参数对应使用，应用了相应的参数才能使用与参数配对的值。配对使用式需要把参数与值放在对象{}内。配对使用式只适用于有参数的v-on与v-bind指令。
• 判断使用三元表达式： 依据“表达式”选择使用指令值。如:class="OK ? a : b"或:class="OK && a||b"
  当第三元为空时&&方式可简写成OK && a ；？方式不可简写必须用空字符串占位，如OK ? a : ''