Vue の組み込み命令のコンポーネントは何ですか?

16 個の組み込み命令があります: v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v- bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is; v-memo は 3.2 で新しく追加され、v-is は 3.1.0 で廃止されました。 v-show は要素の表示と非表示を制御するために使用され、v-if は式の true または false 値に基づいて要素を条件付きでレンダリングするために使用されます。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

1. Vue コマンドとは何ですか?

Vue では、コマンドは実際には特別な属性です。

Vue は舞台裏で何かを行います。コマンドに基づいて、具体的に何をするかというと、Vue はさまざまな命令に従ってさまざまな操作を実行します。 # 命令については後述します。特徴は何ですか

#Vue 命令の明らかな特徴は、すべて v- で始まることです (例: v-text

<span v-text="msg"></span>

##)。 #2、組み込み命令

2.1 Vue の組み込み命令とは何ですか?

組み込み命令Vue に付属しており、そのまま使用できる手順を参照してください

Vue には、#v-text、v-html、v など、合計 16 個の組み込み命令があります。 -show、v-if、v-else、v-else-if、v-for、v -on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v -memo、v-is、v-memo は 3.2 で新しく追加され、v-is は 3.1 で追加されました。 .0 では廃止されました。

これらの組み込み命令の基本的な使用法について学びましょう

2.2 16 の組み込み命令の基本的な使用法を理解する

2.2.1 v-text

の役割v-text は要素の textContent を更新します。例:

<h1 v-text="msg"></h1>

h1 要素の内容は最終です msg

の値に依存します

2.2.2 v-html

は v-text とよく似ていますが、v-html は要素の innerHTML の更新に使用する点が異なります (例:

<div v-html="&#39;<h1>Hello LBJ</h1>&#39;"></div>

#)。

##内部のコンテンツは通常の HTML

2.2.3 v- show

v-show として挿入する必要があることに注意してください。要素の表示と非表示を制御するために使用される式の true または false 値に従って、要素の表示値を切り替えます。例:

#You条件が変化すると、このコマンドが表示または非表示のトランジション効果をトリガーすることがわかります。

注: v-show は

もサポートしていません。

2.2.4 v-if

v-if は、式の true または false の値に基づいて要素を条件付きでレンダリングするために使用されます。

v- との比較show より、 v-if は、単に表示および非表示にするのではなく、切り替え時に要素を破棄または再構築します。

#式が false の場合、v- if は要素を直接破棄しますが、v-show は要素を視覚的に非表示にするだけです。

v-if は

2.2.5 v-else

v-else には式は必要ありません。これは、「else ブロック」を追加することを意味します。これは、次の要素を表示するのと同じです。 v-if が条件を満たしている場合は v-if、それ以外の場合は v-else 要素を表示します。例:

注: v-else の前の兄弟要素には v-if が必要です。または v-else-if

2.2.6 v-else-if

同様に、v-if の「else if ブロック」を表します。それ以外の場合、前の兄弟要素には v -if または v-else-if が必要です。例:

#2.2.7 v-for

v-for one for Iterative 命令では、ソース データに基づいて要素またはテンプレート ブロックを複数回レンダリングできます。例:

配列インデックスのエイリアスを指定することもできます。またはオブジェクトのキー

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

2.2.8 v-on

v-on は、イベントを要素にバインドするために使用されます。@ と省略できます。 Modifier

.stop -event.stopPropagation()を呼び出します

.prevent -event.preventDefault()

#を呼び出します##.capture - イベント リスナーを追加するときにキャプチャ モードを使用します。

.self - イベントが対象となる要素自体からトリガーされた場合にのみコールバックをトリガーします。リスナーはバインドされています

• .{keyAlias} - イベントが特定のキー

• .once からトリガーされた場合にのみ、コールバックがトリガーされます -コールバックは 1 回だけトリガーされます。

• .left - マウスの左ボタンがクリックされた場合にのみ起動します。

• .right - マウスの右ボタンがクリックされた場合にのみ起動します。マウス ボタンがクリックされた場合

• . middle - マウスの中ボタンがクリックされた場合にのみ発生します

• .passive - { passive: true } 模式添加侦听器

例如：

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

需要注意，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件

2.2.9 v-bind

v-bind用于绑定数据和元素属性，可以缩写为: 或.(当使用 .prop 修饰符时)，比如

<div :someProperty.prop="someObject"></div>
<!-- 相当于 -->
<div .someProperty="someObject"></div>

v-bind的3个修饰符

• .camel - 将 kebab-case attribute 名转换为 camelCase

• .prop - 将一个绑定强制设置为一个 DOM property。3.2+

• .attr - 将一个绑定强制设置为一个 DOM attribute。3.2+

2.2.10 v-model

v-model限制于：

components

v-model的3个修饰符：

• .lazy - 惰性更新，监听 change 而不是 input 事件

• .number - 输入字符串转为有效的数字

• .trim - 输入首尾空格过滤

在表单控件或者组件上可以创建双向绑定，例如：

2.2.11 v-slot

v-slot用于提供具名插槽或需要接收 prop 的插槽

可选择性传递参数，表示插槽名，默认值default

2.2.12 v-pre

v-pre指令用于跳过这个元素及其子元素的编译过程，例如:

可以看到里头的东西没有被编译

2.2.13 v-cloak

v-cloak指令主要用于解决插值表达式在页面闪烁问题

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

[v-cloak] {
  display: none;
}

这样div只会在编译结束后显示

2.2.14 v-once

v-once指令用于表示只渲染一次，当要重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过

2.2.15 v-memo 3.2+

用于缓存一个模板的子树

该指令接收一个固定长度的数组作为依赖值进行记忆比对。如果数组中的每个值都和上次渲染的时候相同，则整个该子树的更新会被跳过

<div v-memo="[valueA, valueB]"></div>

在重新渲染时，如果 valueA 与 valueB 都维持不变，那么对这个

以及它的所有子节点的更新都将被跳过

2.2.16 v-is

已在 3.1.0 中废弃，改用:is

<component :is="currentView"></component>

相关推荐：vue.js视频教程

以上がVue の組み込み命令のコンポーネントは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。