VUE模板语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_52394366/article/details/142084700

差值表达式

在 Vue.js 中，差值表达式（Interpolation Expressions）是一种非常基础且强大的特性，它允许你在模板中声明式地将数据渲染进 DOM。差值表达式通过双大括号 {{ }} 来标识，Vue 会将这些表达式替换为它们对应的文本内容。

绑定事件监听

在 Vue.js 中，绑定事件监听是一种将用户交互（如点击、输入等）与组件方法关联起来的方式。Vue 提供了 v-on 指令（或其缩写 @）来实现事件的绑定。

v-on 指令用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。你可以将 JavaScript 方法名作为 v-on 的值，或者直接在指令中编写 JavaScript 表达式。

双向数据绑定：表单元素与VM数据的双向绑定

页面数据发生变化，脚本中的数据同时发生变化。

脚本中的数据发生变化，同时页面中数据发生变化。类似于数据联动。

默认事件形参

Vue为事件处理函数提供了一个默认的形参（通常命名为event或e），用于表示触发事件的DOM事件对象。然而，这个默认形参并不是Vue强制要求的，也不是Vue特有的，而是遵循了JavaScript和DOM事件处理的标准做法。

事件修饰符

Vue提供了一系列的事件修饰符，这些修饰符可以附加在 v-on 指令上，用以指示 Vue 应该如何对触发的事件进行响应。事件修饰符可以让我们更方便地处理一些常见的事件场景，比如阻止事件冒泡、阻止默认行为等。

以下是一些常用的事件修饰符：

.stop - 阻止事件冒泡。
- 示例：<button @click.stop="doThis">点击我</button>
- 这会阻止点击事件继续传播到父元素。
.prevent - 阻止默认事件行为。
- 示例：<form @submit.prevent="onSubmit">提交</form>
- 这会阻止表单提交的默认行为，让你能够控制何时提交表单。

阻止冒泡事件

在Vue中，阻止事件冒泡是一种常见需求，特别是在处理嵌套组件或元素时，你可能不希望内部元素的事件触发外部元素的事件处理器。Vue提供了.stop修饰符来方便地阻止事件冒泡。当你使用v-on指令（或其简写@）绑定事件时，可以添加.stop修饰符来阻止事件冒泡。这样，当事件被触发时，它会在当前元素上停止传播，不会继续冒泡到父元素。

还可以在方法中写event.stopPropagation();函数来阻止冒泡事件

绑定元素的文本与html

在Vue中，绑定元素的文本和HTML内容分别有不同的指令和方法。Vue提供了v-text和{{ }}插值表达式来绑定纯文本内容，而使用v-html指令来绑定HTML内容。

class与style绑定

条件渲染

Vue.js 的条件渲染允许你根据组件的状态来控制元素的显示与隐藏。Vue 提供了几种方式来实现条件渲染，包括 v-if、v-else-if、v-else 和 v-show。

1. v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 时被渲染。、

2. v-else

v-else 指令必须紧跟在 v-if 或者 v-else-if 元素之后，否则它将不会被识别。v-else 元素将包含 v-if 条件不满足时渲染的备选内容。

3. v-else-if

v-else-if 顾名思义，充当 v-if 的“否则如果”。可以连续使用。

4. v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样，不同的是 v-show 元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意事项

性能差异：v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
选择使用：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果你需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。