Vueは、3つの主要なWebフロントエンドフレームワークの1つとして非常に人気があり、かつてGitHubで最も人気のあるオープンソースプロジェクトとして選択されました。HTML、CSS、JSの基本を
学び、フロントエンドフレームワークを開始したい場合は、Vueが最適です。しきい値はそれほど高くありませんが、普及率は非常に高くなっています。Webフロントになる-エンドエンジニアはテクノロジースタック1を知っている必要があります。このブログの学習目標は、v-text、v-htmlの説明です。
v-テキスト
この命令の機能は
、補間式{ {}}と非常によく似ています 。
最初にコードを見てください。
<div id="app">
<p>{
{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello!'
}
});
</script>
これは、最も単純な補間式{
{}}の使用法です。
問題ありません。二重角かっこで囲んだpラベルにデータの値を正常に表示しました。
次のコードを見てみましょう。
<div id="app">
<p v-text="message"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello!'
}
});
</script>
今回はv-textコマンドを使ってメッセージの内容を表示します。
問題ありません。2つの方法はまったく同じように見えますが、コードに少し変更を加えると。
<div id="app">
<p>哈哈哈{
{message}}</p>
<p v-text="message">哈哈哈</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello!'
}
});
</script>
違いがわかりますか？Hehe〜
補間式{
{}}は、それ自体のプレースホルダーを置き換えるだけで、要素の他の要素の表示には影響しません。
ただし、v-textは要素の元のコンテンツを完全にカバーします。
これらの2つの方法には、実際の開発シナリオで対応するアプリケーションがあるため、区別する必要があります。
v-html
補間式{
{}}とv-textについてはすでに学習しました。どちらもデータ内の対応する変数の値を表示できますが、取得した変数の値がコード文字列である場合はどうでしょうか。
フロントエンドとバックエンドが分離されていなかった時代には、バックエンドはコード文字列を返すことが多く、処理後にページにレンダリングする必要がありました。補間式{ {}}とv-textを
試して、コード文字列を表示してみましょう。
<div id="app">
<p>{
{code}}</p>
<p v-text="code"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
code:'<h3>我是代码，哈哈，你能把我渲染出来吗</h3>'
}
});
</script>
明らかに、補間式{
{}}もv-textも私たちのニーズを満たすことはできません。
v-htmlの役割は、この要求を満たすことです。
<div id="app">
<p v-html="code"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
code:'<h3>我是代码，哈哈，你能把我渲染出来吗</h3>'
}
});
</script>
非常に完璧な。
ただし、v-htmlは注意して使用するのが最適です。コードを厳密に考慮しないと、ハッカーxssに攻撃されやすくなります。もう1つのポイントは、v-htmlとv-textの両方が要素の元のコンテンツを完全にカバーすることです。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
以下のWeChat公式アカウントに従ってください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
