Vueにはいくつかのデータレンダリング方法と関連する指示があります。以下は1つずつ紹介されます。
まず、補間式
補間式は2つの中括弧{{}}で囲まれ、属性属性はVueインスタンスで定義されます
。Vueが提供する命令は、DOM要素を手動で操作しなくても、ページ上のデータを簡単にレンダリングできます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
</body>
</html>
補間式の構文は{{}}であるため、口ひげ口ひげ式とも呼ばれます
二、v-clock
補間式にはちらつきの問題があります。
ネットワークスピードカードの場合、補間式が読み込まれると、ページに{{xxx}}が表示されます。コンテンツは、ページが読み込まれた後にのみ表示されます
このとき、v-cloak属性を追加して、補間された式{{}}のちらつきの問題を解決できます。
<div id="app">
<!-- 解决插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
</div>
次に、CSSスタイルをv-clockに追加します。
<style>
[v-cloak]
{
display: none;
}
</style>
このように、ネットワークスピードカードの場合、補間式は表示されず、表示によって非表示になります：なし。ページが読み込まれると、コンテンツが直接表示されます。
3、v-text
v-textと{{}}補間式の効果は、ほとんどすべての表示データです
<div id="app">
<h4 v-text="msg"></h4>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
v-textと内挿式の違いは次のとおりです
。v-textは
式に記述されていないが属性に追加されているため、ちらつきの問題はありません。
ただし、補間式には利点もあります。
補間式は前後に任意のコンテンツを追加できます。
たとえば、次のようになります。
<p v-cloak>---{{msg}}---</p>
補間式は独自のプレースホルダーを置き換えるだけで他のコンテンツには影響せず
、v-textは要素の元のコンテンツを上書きするため
四、v-html
HTMLタグをレンダリングするには、v-textは適切ではありません。
これは、v-textがHtmlタグをエスケープしないためです。これにより、Htmlタグがページに表示されます。
利用には、このポイントが必要で、V-HTML：
目の同様のThymeleaf：のutextプロパティのHTMLタグがエスケープされます
<!-- v-html可以转义html标签 -->
<div v-html="msg"></div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
