概要概要
Vueを学ぶ過程では、指示の学習が不可欠です。以下では、私たち自身の仕事と学習の少しの経験に基づいて、Vue、v-text、v-htmlの補間式の違いについて説明します。
補間式
ページの読み込みはトップダウンであり、jsの読み込みは同期的であることがわかっています。ページが頻繁に更新される場合やインターネットの速度が遅い場合は、補間式ページを使用して最初に「{
{message}}」が表示され、次に「{
{message}}」を実際のデータに置き換えます （この現象をシミュレートすると、 vue .jsの導入は本体の後ろに配置されるか、ネットワーク要求の速度を3Gに調整できます）
<!--这是我们的View-->
<div id="app">
<p>{
{message}}</p>
</div>
new Vue({
el: '#app',
data: {
message:"hello world!",
}
})
上記の問題の解決策はv-cloakです。この命令は、インスタンスの準備ができるまで、コンパイルされていないタグを非表示にすることができます。コンパイルが終了するまで表示されません。
<div id="app">
<p v-cloak>{
{message}}</p>
</div>
<style>
[v-cloak]{
display: none;
}
</style>
このとき、このページにアクセスすると、「{ {message}}」は表示されなくなります 。Vueデータ転送が完了すると、データは正しく表示されます。
v-テキスト
<div id="app">
<p v-cloak>{
{message}}</p>
<p v-text="message"></p>
</div>
表示効果は補間式と同じで、「{ {message}}」のちらつきはありません 。v-textで補間式が必要な理由を尋ねる生徒もいます。次のコードを使用して、2つの違いを全員に伝えます。
<div id="app">
<p v-cloak>你好世界：{
{message}}</p>
<p v-text="message">你好世界：</p>
</div>
演算結果：
結論：補間式はプレースホルダーと同等であり、位置を占めるコンテンツのみを置き換えます。v-textは、Vueオブジェクトによって渡されたデータのみを表示でき、ノード内の既存のコンテンツを置き換えます。
v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<!--这是我们的View-->
<div id="app">
<p v-cloak>{
{message}}</p>
<p v-text="message"></p>
<p v-html="message"></p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:"<h1>Hello World!</h1>",
}
})
</script>
</html>
演算結果：
結論：補間式とv-textはhtmlタグを解析できませんが、v-htmlはhtmlタグを解析できます
総括する
- Vueオブジェクトのデータのみを個別に表示する場合は、「v-text」コマンドを使用することをお勧めします。
- ユーザーの前景データを同時に表示したい場合は、補間式を使用する必要がありますが、「v-cloak」属性と一緒に使用することを忘れないでください（そしてスタイル[v-cloak]を設定する必要があります] {display：none;}）。
- Vueオブジェクトによって渡されるデータにHTMLタグが含まれている場合は、v-htmlを使用します