浅谈一波Vue模板语法

尔东尘
138 阅读3分钟

一、vue模板语法分为2大类

  • 插值语法

  • 指令语法

二、插值语法

作用：用于解析标签体内容，可以把vue变量直接显示在标签内，在domo标签的中间使用，将vue的变量插入到模板中，帮我们获取到元素。 

语法：{{js表达式}},可以直接读取到data中的所以属性。 

演示：

<template>
//只能有一个根标签
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age >18 ? '成年' : '未成年'}}</h3>
  </div>
</template>

<script>
export default {
  data(){ //格式固定，定义vue数据之处
    return{ //key相对于变量名
    //变量名：变量值
      msg:"hello, vue",
      obj:{
        name:"小vue",
        age:5
      }
    }
  }
}
</script>

<style>

</style>

注意：data必须是一个函数，在函数里面 需要 return 一个对象

三、指令语法

作用：用于解析标签（包括：标签属性、标签体内容、绑定事件...）

指令：

1.数据绑定语法：

1.1 v-text

作用：更新元素的 textContent

演示：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

1.2 v-html

作用：更新元素的 innerHTML

注意：因为容易导致 XSS 攻击，不建议使用

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

2.条件渲染

2.1 v-show

根据表达式之真假值，切换元素的 display CSS property。

当条件变化时该指令触发过渡效果。

2.2 v-if

有条件地渲染元素

当 v-for 和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

2.3 v-else

不需要表达式

限制：前一兄弟元素必须有 v-if 或 v-else-if。

<div v-if="Math.random() > 0.5">
  成功
</div>
<div v-else>
  失败
</div>

2.4 v-else-if

限制：前一兄弟元素必须有 v-if 或 v-else-if。

表示 v-if 的“else if 块”。可以链式调用。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

3.v-for

作用：

基于源数据多次渲染元素或模板块。

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

当 v-for 和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

4.v-on

作用：

绑定事件监听器，事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

可以监听子组件触发的自定义事件。

修饰符：

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。
  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

5.v-bind

单向数据绑定

修饰符：

  • .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。
  • .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
  • .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

用法：

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

6.v-model

双向数据绑定

在表单控件或者组件上创建双向绑定

修饰符：

  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为有效的数字
  • .trim - 输入首尾空格过滤

7.v-slot

缩写：#

提供具名插槽或需要接收 prop 的插槽。

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

8.v-pre

不需要表达式

用法:

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

9.v-cloak

不需要表达式

<div v-cloak>
  {{ message }}
</div>

10.v-once

只能渲染组件和元素一次

四、什么时候用插值语法，什么时候用指令语法

插值语法用于解析标签体内容

指令语法用于解析标签

avatar
文章
阅读
粉丝