vueにおけるv-text,v-html,v-model,{}}間の異同

まず、vueにはv-text、v-bind、v-model、v-ifなど、v-で始まるカスタムコマンドがたくさんあることを知っています.
これらの命令の中で、一部の命令間は混同されやすいので、今日は以下の類似命令間の異同を自分でまとめることにしました.
1.v-text
v-textは、対応するデータ・オブジェクトの値を表示する代わりに、純粋なテキストを操作するために使用されます.バインドされたデータオブジェクトの値が変更されると、補間先の内容も更新されます.注意:ここでは一方向バインドであり、データオブジェクトの値が変化し、補間が変化します.ただし、補間が変化してもデータオブジェクトの値には影響しません.ここで、v-textは{}}と略記でき、論理演算をサポートします.

  {{ message }}

var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})

注:vueにはv-onceという命令があります.v-onceとv-textを組み合わせることで、使い捨ての補間のみを実行できます.

      msg        : {{ msg }}

2.v-html
v-htmlはhtmlを出力するために使用されます.v-textとは異なり、v-textは純粋なテキストを出力し、ブラウザはhtmlを解析しませんが、v-htmlはhtmlラベルが解析された後に出力します.

let app = new Vue({
        el: "#app",
        data: {
            html: "v-html"
        }
    });

3.v-model
v-modelは、input、selectなど、フォームコンポーネントのバインドに一般的に使用されます.v-textとの違いは、フォームコントロール以外のラベルでは使用できない場合、フォームコンポーネントの双方向バインドを実現することです.

  

var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})

4.{{}}
{{}}はv-textの略記形式である