Vue 2.0 の内部ディレクティブとは何ですか-jsチュートリアル-php.cn

Vue 2.0 の内部ディレクティブとは何ですか

一个新手

リリース： 2017-10-16 09:49:10

オリジナル

1504 人が閲覧しました

1. Vue.js の概要

現在、主流のフロントエンドフレームワークは Angular、React、Vue の 3 つです。少し前の React のライセンス論争により、Vue の人気が高まっています。さらに、Vue のわかりやすい API ドキュメントも大きな特徴です。 Vue.js は非常に軽量なツールで、MVVM フレームワークというよりも js ライブラリに似ています。 Vue.js は、応答性の高いプログラミングとコンポーネント化を特徴としています。リアクティブプログラミングとは、状態とビューを同期させることを意味し、そのコンポーネント化の概念は React と同じであり、「すべてがコンポーネントである」ということです。コンポーネント化の考え方はモジュール開発に便利です。フロントエンドこの分野の主要なトレンド

2. 内部命令

2-1. v-if v-else v-show: 最初の 2 つは通常一緒に使用され、v の効果は次のとおりです。 -show は v-if に似ています。

例は次のとおりです。

<body>
    <div id="app">
       <p v-if="flag">if</p>
       <p v-else>else</p>
       <p v-show="flag">show</p>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
            flag:true
        }
    });
</script>

ログイン後にコピー

DOM 構造では、3 つの p タグ内のコンテンツがページに表示されるかどうかは、flag の boolean 属性によって決まります。 flag が true の場合、if と show の両方が表示されますが、else は DOM 構造内に存在しません。 v-if と v-show の違いは次のとおりです。 v-if は条件の値に基づいてロードするかどうかを決定します。これにより、サーバーへの負荷が軽減されますが、条件の値が変更されると、条件の値が true であるかどうかに関係なく、v-show を再度ロードする必要があるという欠点があります。条件が true の場合、表示属性はデフォルトの属性に設定され、それ以外の場合は none に設定されます)

2-2.v-for ループコマンド

例は次のとおりです:

<body>
    <div id="app">
     <ol>
         <li v-for="b in b">{{b}}</li>
     </ol>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
          b:[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,1,2]
        }
    });
</script>

ログイン後にコピー

ページには 5 li が表示されます。補間の効果は、li が配列 b に対応する要素を 1 対 1 で表示することです。

2-3 v -text v-html text (html 文字列) コマンド

<body>
    <div id="app">
     <p v-text="msgText"></p>
     <p v-html="msgHtml"></p>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
          msgText:"China",
          msgHtml:"<span>中国</span>"
        }
    });
</script>

ログイン後にコピー

は、jquery の text() と html() に関連付けることができます。これまでのコマンドでは補間演算、つまり {{}} が使用されていることがわかります。

2-4 v-on イベントリスナーのバインディング

例は次のとおりです:

<body>
    <div id="app">
     <button v-on:click="Hi()">Button</button>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        methods:{
            Hi:function(){
                alert("Hello World!")
            }
        }
    });
</script>

ログイン後にコピー

jquery の on() メソッドと同様に、特定のイベントに対してバインディングします。この例では、-on:click は @click と省略できます。Click は、mouseout、mouseover などの他のマウス操作に置き換えることができます。

2-5 v-bind コマンドの例は次のとおりです。

<body>
    <div id="app">
        <a v-bind:style="{color:&#39;red&#39;}" :src="message">{{message}}</a>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

ログイン後にコピー

その効果は、a タグが赤色で表示され、その src 属性が vm.message であることです。 v-bind ディレクティブは、主に html タグの属性を設定するために使用されます。その略称は v-bind:——> です。 ;:

2-6 v-model データの双方向バインディング命令

例は次のとおりです:

<body>
    <div id="app">
        <p>{{message}}</p>
        <p v-pre>{{message}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

ログイン後にコピー

input の値が変化すると、p タグに含まれる内容も変化し、前者と一致します。 2-7 v-pre 命令

例は次のとおりです:

<body>
    <div id="app">
        <p>{{message}}</p>
        <p v-pre>{{message}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

ログイン後にコピー

最初の p タグは「フロントエンドエンジニア」を出力し、2 番目の p タグは vue のコンパイルと出力をスキップします。元の値、つまり {{message}}

2-8 v-cloak コマンド

v-cloak コマンドの機能は、DOM ツリーが構築され、ページがレンダリングされた後に実行することです。 CSS と一緒に使用する必要があります

2-9 v-once コマンド

v-once コマンドは、DOM ツリーが初めてレンダリングされるときにのみ機能します。

以上がVue 2.0 の内部ディレクティブとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。