すべてのテンプレート ノード宣言、属性設定、イベント登録を含む、HTML 構文の拡張として Vue.js のテンプレート構文を直接理解できます。などは、HTML の構文に従って拡張されるように設計されています。公式声明によると、「すべての Vue テンプレートは文法的に正しい HTML であり、仕様に準拠するブラウザおよび HTML パーサーで解析できます。」
Vue は、コンポーネント インスタンスのデータをレンダリングされた DOM
v-tex t 命令を使用して、空の要素にプレーン テキストのデータを入力します
// 组合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '<h4>我是来自中国的小朋友！</h4>'
})
</script>
<template>
<!-- 使用v-text指令，将数据采用纯文本方式填充其空元素中 -->
<div v-text="student.name"></div>
<!-- v-text：以纯文本的方式显示数据 -->
<div v-text="student.desc"></div>
<!-- 下面的代码会报错：div 元素不是空元素 -->
<!-- <div v-text="student.name">这是原始的div数据</div> -->
</template>要素内の特定の位置にデータをプレーン テキストとしてレンダリングします
// 组合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '<h4>我是来自中国的小朋友！</h4>'
})
</script>
<template>
<!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->
<div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div>
</template>Usev-html 命令、 HTML 構文
// 组合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '<h4>我是来自中国的小朋友！</h4>'
})
</script>
<template>
<!-- 使用v-html指令，将数据采用HTML语法填充其空元素中 -->
<div v-html="student.name"></div>
<!-- v-html：以 HTML 语法显示数据 -->
<div v-html="student.desc"></div>
<!-- 下面的代码会报错：div 元素不是空元素 -->
<!-- <div v-html="student.name">这是原始的div数据</div> -->
</template>v -model 双方向のデータ バインディング命令、ビュー データとデータ ソースの同期<br/>通常、v-model 命令はフォーム要素で使用されます。
テキスト型の 要素と