Vue模板语法

---

前言

在Vue中，模板语法 的使用是频繁的。

---

一、插值

1.插值语法

插值语法用于文本的插入，数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。也就是数据的动态绑定。
值得注意的是插值语法中可以使用JavaScript的表达式。
主要用于解析标签体内容。

2.指令语法

用于解析标签（标签属性、标签体内容、绑定事件…）

（1）数据绑定指令

v-bind:(单向数据绑定)

v-bind指令可以用于响应式地更新 HTML attribute。
data中的数据改变可以影响页面数据，但反过来不行。

<a v-bind:href="url">...</a>

其中href为参数，url是绑定的值，该指令也可以简写为“：”

<a :href="url">...</a>

v-model:双向数据绑定)

该指令只能用于表单类元素（input、select等），也就是拥有value的标签，v-model实际上是通过标签value值来控制标签内容。

<input type=‘button' v-model:value='name'/>

也可以简写为：

<input type=‘button' v-model='name'/>

改变输入框的值也会 影响data中的值，反过来也可以。

（2）事件监听指令

v-on:(事件监听）

用于事件的触发监听来执行对应的JS表达式。

<input type=‘button' v-on:click='num++'/>

监听了点击事件使num每点击一下+1，也可以是一个函数

<button v-on:click='say()'>Say hi</button>

该指令也可以简写为“@”

<input type=‘button' @click='num++'/>

（3）条件渲染指令

v-if、v-else-if、v-else

和判断相同根据表达式值在DOM中渲染或销毁元素或组件
v-else是没有判断条件的，如果你加上去不会影响得到的结果

  <p v-if="flag===‘晴’">今天大晴天</p>
  <p v-else-if="flag==='多云'">今天多云</p>
  <p v-else>今天下雨</p>

v-show

和v-if类似，根据表达式的值控制标签或者组件的显示与隐藏。

  <p v-show="flag">今天要下雨</p>
  <p v-show="!flag">今天不要下雨</p>

（4）内容渲染指令

v-text

v-text用法简单，只能用来渲染纯文本内容，如下：

<p v-text="username"></p>

他的缺点是他会直接覆盖掉原来标签里的内容。

---

v-html

如果要渲染带包含html标签的内容，可以使用v-html

<div v-html="content"></div>

const vm = new Vue({
            el: "#app",
            data: {
                content: "<h1>你好</h1>"
            }
        })

（5）列表渲染指令

v-for

需要生成多个某个标签，就可以在该标签上加入v-for进行动态生成,v-for可以遍历数组、对象、字符串以及指定次数（将in或of后边换成数字即可）,v-for可以接收两个参数，其中第一个为每一项，第二个是当前索引值。
具体语法如下：

<ul>
<li v-for="（item,inex） in 某个数据集合" :key="index">
{{形参.数据集合的属性}}
</li>
</ul>

in也可以换成of，某些版本可能不行
对于绑定的key（标识符）的使用存在着一些问题，后面可能会在其它文章中体现。

指令间的小tips

1.v-if和v-show

（1）v-if和v-show的区别：

• v-if控制元素是否渲染到页面（是否创建）
• v-show控制元素是否显示（已经创建，是否显示）

（2）v-if和v-show如何选择：

• 当频繁的切换显隐时使用v-show
• 只有一次的切换时使用v-if

2.v-if和v-for

v-if的优先级是没有v-for的高的，也就是说将两个指令用在同一个标签上时，会先进行循环，再进行判断。
这样做会导致性能受到影响。
在源码中可以发现，他判断的顺序是：once–>for–>if(也就不难理解为什么for的优先级会比if高了)

export function genElement(el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre
  }
  if (el.staticRoot && !el.staticProcessed) {
    return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
    return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {
    return genSlot(el, state)
  } else {
    // component or element
    let code
    if (el.component) {
      code = genComponent(el.component, el, state)
    } else {
      let data
      const maybeComponent = state.maybeComponent(el)
      if (!el.plain || (el.pre && maybeComponent)) {
        data = genData(el, state)
      }

      let tag: string | undefined
      // check if this is a component in <script setup>
      const bindings = state.options.bindings
      if (maybeComponent && bindings && bindings.__isScriptSetup !== false) {
        tag = checkBindingType(bindings, el.tag)
      }
      if (!tag) tag = `'${el.tag}'`

      const children = el.inlineTemplate ? null : genChildren(el, state, true)
      code = `_c(${tag}${
        data ? `,${data}` : '' // data
      }${
        children ? `,${children}` : '' // children
      })`
    }
    // module transforms
    for (let i = 0; i < state.transforms.length; i++) {
      code = state.transforms[i](el, code)
    }
    return code
  }
}

如果想一起使用，可以在标签外层嵌套一层，将v-if绑定在外层。

3.v-on事件修饰符

事件修饰符可以多个一起用（如：事件.prevent.stop）。

• @事件.prevent:阻止默认事件
• @事件.stop:阻止事件冒泡（在包含关系中不同标签上有相同的触发函数，导致这两个被关联起来）
• @事件.once:事件只触发一次
• @事件.capture：使用事件捕获模式
• @事件.self：只有event.target是当前操作的元素才触发事件
• @事件.passive：事件的默认行为立即执行，无需等待事件回调执行

3.v-on键盘事件

@keyup:按键放开触发
@keydown：按键按下触发

几个按键也可以同时使用（如：@keyup.ctrl.y）。

根据按键触发:
@keyup.按键别名

常用按键别名：

• 回车：enter
• 删除：delete
• 退出：esc
• 空格：space
• 换行：tab（只能配合@keydown中使用）
• 上：up
• 下：down
• 左：left
• 右：right

---

获取按键名称或者编码：

show(e){//事件调用函数
e.key;//按键名称
e.keyCode;//按键编码
}

---

系统修饰键（特殊）：ctrl、alt、shift、meta
配合keyup使用时必须同时按下其它键，释放后才会触发，keydown中正常。

---

Vue自定义别名按键
Vue.config.keyCodes.自定义键名=键码；

总结

以上就是今天要讲的内容，本文简单介绍了Vue的模板语法，以及常用的指令语法