【Vue全家桶】模板语法
创始人
2025-05-31 05:55:32

【Vue全家桶】模板语法

文章目录

  • 【Vue全家桶】模板语法
  • 写在前面
  • 一、Mustache语法
  • 二、事件处理
    • 2.1事件修饰符
    • 2.2键盘事件
  • 三、常见的基本指令
    • 3.1 v-once
    • 3.2 v-text
    • 3.3 v-html
    • 3.4 v-pre
  • 四、Vue绑定属性
    • 4.1 v-bind
    • 4.2 v-on
    • 4.3 v-model
  • 五、列表渲染
    • 5.1 v-for
      • 5.1.1 `v-for`与数组
      • 5.1.2 `v-for`与对象
      • 5.1.3 在`v-for`里使用范围值
    • 5.2 VNode与虚拟DOM
    • 5.3. v-for中key属性的作用
  • 六、条件渲染
    • 6.1 v-if、v-show
    • 6.2 v-show和v-if的区别

写在前面

这里是前端程序员小张🫡

创作不易，希望各位大佬支持一下🌟

一、Mustache语法

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

  • 基本使用
    • 双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
Message: {{ msg }}
  • 表达式
计数双倍: {{ counter * 2 }}
  • 三元运算符
{{ age >= 18? "成年人": "未成年人" }}
  • 调用methods中的函数
{{ formatDate(time) }}
  • 但是不能定义语句

二、事件处理

2.1事件修饰符

  • .prevent：阻止默认事件

  • .stop：阻止事件冒泡

  • .once：事件只触发一次

  • .capture：使用事件的捕获模式

  • .self：只有event.target是当前操作的元素时才触发事件

  • .passive：事件的默认行为立即执行，无需等待事件回调执行完毕

2.2键盘事件

  • vue中常用的按键别名：
    • ​ 回车 => enter
    • ​ 删除=> delete
    • ​ 退出=> esc
    • ​ 空格=> space
    • ​ 换行=> tab （特殊，必须配合keydown去使用）
    • ​ 上下左右=> up down left right
  • vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

三、常见的基本指令

3.1 v-once

v-once指令：

  • v-once所在节点在初次动态渲染后，就视为静态内容了
  • 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

3.2 v-text

v-text 用于更新元素的 textContent

3.3 v-html

默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。

  • 如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；

在这里插入图片描述

3.4 v-pre

v-pre指令：

  • 跳过其所在结点的编译过程
  • 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

四、Vue绑定属性

  • 除了内容需要动态决定外，某些属我们也希望动态来绑定
    • 比如动态绑定a元素的href属性
    • 比如动态绑定img元素的src属性

Vue中有两种数据绑定的方法：

  1. 单向绑定（v-bind）：数据只能从data流向页面
  2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

4.1 v-bind

  • 缩写：：
  • 预期：any（with argument）|object（without argument）
  • 参数：attOrProp（optional）
  • 用法：动态的绑定一个或多个attribute，或一个组件prop到表达式
    • 图片的链接src、网站的链接href、动态绑定一些类、样式等等

举个栗子：点击按钮切换图片






const app = Vue.createApp({data: function() {return {imgUrl: "http://p1.music.126.net/ZFbOIU8B4pgb9vGi6BB89A==/109951168476332689.jpg?imageView&quality=89"}},methods: {switchImage:function() {this.imgUrl ="http://p1.music.126.net/bm5wMgi70vLvrfnB_WKgiA==/109951168476319139.jpg?imageView&quality=89"}}
})
app.mount("#app")

举个栗子：v-bind直接绑定对象

hello world

4.2 v-on

  • 缩写：@
  • 期望的绑定值类型：Function | Inline Statement | Object (不带参数)
  • 参数：event（使用对象语法则为可选项）
  • 修饰符：
    • .stop ——调用 event.stopPropagation()。
    • .prevent ——调用 event.preventDefault()。
    • .capture ——在捕获模式添加事件监听器。
    • .self ——只有事件从元素本身发出才触发处理函数。
    • .{keyAlias} ——只在某些按键下触发处理函数。
    • .once ——最多触发一次处理函数。
    • .left ——只在鼠标左键事件触发处理函数。
    • .right ——只在鼠标右键事件触发处理函数。
    • .middle ——只在鼠标中键事件触发处理函数。
    • .passive ——通过 { passive: true } 附加一个 DOM 事件。

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

  • 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
  • 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
  • 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

4.3 v-model

在表单输入元素或组件上创建双向绑定。

期望的绑定值类型：根据表单输入元素或组件输出的值而变化

仅限