テキスト表現
- 補間式{}
- V-テキスト
- V-HTML
- Vワンス
Vueの初期の経験
新しい宇宙プロジェクト、vue.jsファイルの導入。以下のコードを書きます：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1、导入Vue的包-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
{{name}}
</div>
</body>
<script>
// 2、创建一个Vue的实例
//new出来的对象就是MVVM中的 View Module（调度者）
var myVue = new Vue({
el: '#div1', //当前vue对象将接管上面的div1区域
data: {//data就是MVVM中的 module
name: 'smyhvae'
}
});
</script>
</html>
私たちは、コンソールで入力するとmyVue.$data.name = 'haha'、ページがします自動的に更新された値の名前を。私たちは、データにデータを直接変更すると平均は、ページには、DOMを操作することなく、自動的に更新されます。
補間式{}
データは、最も一般的に使用される構文{{}}のいずれかのページを表示します
<p>{{msg}}</p>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
})
たびに、データはMSG、MSGのPラベルれる変更時に自動的にアップデートを
{{}}JavaScript式にサポート（式は値を生成します）補間式は、文を置くことができません
{{ num +1 }}
{{ ok ? 'YES' : 'NO' }} // 三目运算符
{{ name == 'a' ? 'true' : 'false' }}
エラーデモステートメント
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
V-テキスト
V-textが指定された要素へのデータ変数をレンダリング
<p v-text='msg'></p>
補間とvテキストの表現の違い
<!-- 差值表达式 -->
<p>content:++++++{{name}}------</p>
<!-- v-text -->
<p v-text="name">------++++++</p>
1との違い：補間式は、自分のこのプレースホルダに置き換えられます、要素の内容全体をカバーしますが、ネットワークは、ちらつきの問題が遅くなります場合は、V-マントの修正フリッカ使用する必要はありません。
違い2：V-テキストの上書きを全体の要素の内容が、彼は財産であるため、ちらつきの問題は、ありません
実際には、コードの2行目は、限りブラウザはまだに解決されていないとしてv-text="name"、時間、表示されます------++++++。構文解析あればv-text="name"時間、直接名前の値を置き換えます------++++++。
V-HTML
v-textレンダリングは、プレーンテキストの内容は、あるv-htmlHTML要素のに解析されます
。注：V-HTMLを使用してレンダリング、それは簡単に{{}を使用することができるよう、注意する時間を使って、XSS（クロスサイトスクリプティング）攻撃につながることができますので、データは非常に危険なことができます} VテキストまたはV-HTMLを使用して実装されていません。
<p v-html="msg"></p>
data: {
msg: '<h1>我是一个大大的h1标题</h1>'
}
V-htmlの注意：スコープのスタイルが要素に作用していない持っては、処理されたVUEテンプレートコンパイラの一部ではないHTML、ので、単一のアセンブリ内のV-htmlファイルを持って解决办法置き換えCSS Modulesまたは追加の使用全局 style 元素マニュアル戦略同様のBEMの範囲を設定します。
Vワンス
一度だけの要素およびコンポーネントをレンダリングします。その後の再レンダリングされた要素/構成要素およびそのすべての子ノードが静的コンテンツとして扱われ、スキップされます。この更新は、（低い周波数を使用して）パフォーマンスを最適化するために使用することができます
<p v-once> {{ msg }}</p>
