目次
v-text ディレクティブ: --------------- (innerText と同等)
v-html ディレクティブ (使用には注意してください): -------------------- (innerHTML と同等)
一般的なコマンドを学習しました。
v-bind : 一方向バインディング解析式。xxx と省略できます。
v-model : 双方向データ バインディング
v-for : 配列/オブジェクト/文字列をトラバースします
v-on : イベント リスナーをバインドします。@ と省略できます。
v-if : 条件付きレンダリング (ノードが存在するかどうかを動的に制御)
v-else : 条件付きレンダリング (ノードが存在するかどうかを動的に制御)
v-show : 条件付きレンダリング (ノードを表示するかどうかを動的に制御します)
v-text ディレクティブ: --------------- (innerText と同等)
1. 機能: テキスト コンテンツを、それが配置されているノードにレンダリングします。
2. 補間構文との違い: v-text はノード内のすべてのコンテンツを置き換えますが、 補間構文 {{xx}} は置き換えません。
<body> <!-- 准备好一个容器--> <div id="root"> <div>你好，{ {name}}</div> <div v-text="name"></div> <br> <div>{ {str}}</div> <div v-text="str"></div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el: '#root', data: { name: '尚硅谷', str: '<h3>你好啊！</h3>' } }) </script>
v-html ディレクティブ (使用には注意してください): -------------------- (innerHTML と同等)
1. 機能: HTML 構造を含むコンテンツを指定されたノードにレンダリングします。
2. 補間構文との違い:
(1).v-html はノード内のすべてのコンテンツを置き換えますが、補間構文 { {xx}} は置き換えません。
(2).v-html は HTML 構造を識別できます。
3. 重大な注意: v-html にはセキュリティ上の問題があります。！！！
(1). Web サイト上で任意の HTML を動的にレンダリングすることは非常に危険であり、簡単に XSS 攻撃につながる可能性があります。
(2). 信頼できるコンテンツでは常に v-html を使用し、ユーザーが送信したコンテンツでは決して使用しないでください。
Cookie ページ検出のアプリケーションでは、Web サイトにログインした後、Web サイトが存在するデータベースに Cookie が送信されます。この Web サイトで他の人の Cookie を取得する限り、他の人のアカウントにログインできます。
Cookie がすべてのキーと値のキーをインポートするためのプラグイン: Cookie-Edior
v-cloak ディレクティブ (値なし):
1. エッセンスは特別な属性であり、Vue インスタンスが作成されてコンテナーを引き継いだ後、v-cloak 属性は削除されます。
2. v-cloak で CSS を使用すると、ネットワーク速度が遅いときにページに表示される解析されていないテンプレート { {xxx}}の問題を解決 できます。
[v-cloak] { 表示: なし; }
遅延読み込みでは、先頭に配置するとブロックされて以降はすべて読み込まれません。ページの最後に配置する
と、上のテンプレートが最初に読み込まれます。 このとき必要なものは、ページが表示されないように v-cloak を使用して非表示にするには、テンプレート変数が読み込み待機中に表示され、
Vue インスタンスに読み込まれると、v-cloak は自動的に削除されます。<style> /* 联用css，静态资源没有加载完毕时，把标签隐藏起来，就不会出现没有经过解析的模板了 */ [v-cloak] { display: none; } </style> <body> <!-- 准备好一个容器--> <div id="root"> <!-- v-cloak 是没有值的 --> <h2 v-cloak>{ {name}}</h2> </div> <!-- 延迟加载，如果放上最上面，那么会发生堵塞，下面全部不会加载，如果放在这里，会先加载上面的模板，这个时候，我们需要用v-cloak来隐藏它，使页面不会在加载等待中出现模板变量一旦加载到Vue实例，就会自动把v-cloak去掉 --> <!-- 假如下面的链接，延迟5s回应页面 --> <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script> </body> <script type="text/javascript"> new Vue({ el: '#root', data: { name: '尚硅谷' } }) </script>
v-once ディレクティブ (値なし):
1. v-once が配置されているノードの最初の動的レンダリングの後、それは静的コンテンツとみなされます。つまり、後でどう変化するかというと、v-once の設定は変わりません。
2. 将来のデータ変更によって v-once 構造が更新されることはなく、パフォーマンスを最適化するために使用できます。
3. それは無価値です
v-pre ディレクティブ (値なし):
1. それが配置されているノードのコンパイルプロセスをスキップします。
2. スキップするために使用できます。命令構文または補間構文を使用しないノードはコンパイルを高速化します。
3. つまり、タグを追加した後、Vue はコンパイルを高速化するためにタグを解析しません。
