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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

一个新手

Oct 16, 2017 am 09:49 AM

内部命令とは

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7723

Java チュートリアル

1643

CakePHP チュートリアル

1396

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

ccsvchst.exe はどのようなプロセスですか? Feb 19, 2024 pm 11:33 PM

ccsvchst.exe は、Symantec Endpoint Protection (SEP) ソフトウェアの一部である共通プロセスファイルです。SEP は、有名なネットワークセキュリティ会社 Symantec によって開発されたエンドポイント保護ソリューションです。ソフトウェアの一部として、ccsvchst.exe は SEP 関連のプロセスの管理と監視を担当します。まず、SymantecEndpointProtection(

Terrariaでコマンドを使用してアイテムを取得するにはどうすればよいですか? -Terrariaでアイテムを集めるにはどうすればよいですか？ Mar 19, 2024 am 08:13 AM

Terrariaでコマンドを使用してアイテムを取得するにはどうすればよいですか? 1. Terraria でアイテムを与えるコマンドは何ですか? Terraria ゲームでは、アイテムにコマンドを与えることは非常に実用的な機能です。このコマンドにより、プレイヤーはモンスターと戦ったり、特定の場所にテレポートしたりすることなく、必要なアイテムを直接入手できます。これにより、時間が大幅に節約され、ゲームの効率が向上し、プレイヤーは世界の探索と構築により集中できるようになります。全体として、この機能によりゲーム体験がよりスムーズで楽しいものになります。 2. Terraria を使用してアイテムコマンドを与える方法 1. ゲームを開き、ゲームインターフェイスに入ります。 2. キーボードの「Enter」キーを押してチャットウィンドウを開きます。 3. チャットウィンドウにコマンド形式「/give[プレイヤー名][アイテムID][アイテム数量]」を入力します。

VUE3 クイックスタート: Vue.js 命令を使用してタブを切り替える Jun 15, 2023 pm 11:45 PM

この記事は、初心者が Vue.js3 をすぐに使い始めて、簡単なタブ切り替え効果を実現できるようにすることを目的としています。 Vue.js は、再利用可能なコンポーネントの構築、アプリケーションの状態の簡単な管理、ユーザーインターフェイスの操作の処理に使用できる人気の JavaScript フレームワークです。 Vue.js3 はフレームワークの最新バージョンであり、以前のバージョンと比較して大きな変更が加えられていますが、基本原理は変わっていません。この記事では、読者が Vue.js に慣れることを目的として、Vue.js の命令を使用してタブ切り替え効果を実装します。

デュアルコアブラウザとは何ですか? Feb 20, 2024 am 08:22 AM

デュアルコアブラウザは、2つの異なるブラウザコアを統合したブラウザソフトウェアです。カーネルはブラウザの中核部分であり、Web コンテンツのレンダリング、Web スクリプトやその他の機能の実行を担当します。従来のブラウザは通常、Trident カーネルを使用する IE ブラウザ、WebKit/Blink カーネルを使用する Chrome ブラウザ、Gecko カーネルを使用する Firefox ブラウザなど、単一のカーネルのみを使用します。デュアルコアブラウザは 2 つの異なるコアを 1 つのブラウザに統合しており、ユーザーは必要に応じてそれらを自由に切り替えることができます。デュアルコアブラウザの登場

CPU とは何ですか? CPU には何が含まれていますか? Feb 22, 2024 pm 05:55 PM

cpuは中央処理装置です。分析 1 中央処理装置 [CPU、Central Processing Unit] は、コンピュータの計算コアおよび制御コアである非常に大規模な集積回路であり、その主な機能はコンピュータ命令を解釈し、コンピュータソフトウェア内のデータ情報を処理することです。補足: CPU には何が含まれますか? 1 CPU には、計算的思考コンポーネント、レジスタコンポーネント、制御コンポーネントなどが含まれます。計算と変換。概要/注意事項 CPU は主にコンピュータの命令を説明し、コンピュータソフトウェア内のデータ情報を処理します。

MC コマンドの入力方法の無限の可能性を探る (完璧なゲーム体験を生み出す革新的なツール - MC コマンドの入力方法) May 02, 2024 pm 03:01 PM

モバイルデバイスは現代社会において人々の生活に欠かせないものとなっています。ゲームはまた、人々の余暇の主要な娯楽形式の 1 つとなっています。ゲームプレイを最適化し、ゲーム体験を向上させるための新しいツールやテクノロジーの開発に常に取り組んでいる人々がいます。独自の MC コマンドによる入力方法は、目を引く革新の 1 つです。そして、それがどのようにしてプレイヤーにより良いゲーム体験をもたらすことができるのか、この記事では、組み込みの MC コマンド入力方法の無限の可能性を掘り下げていきます。内蔵 MC コマンド入力メソッドの紹介内蔵 MC コマンド入力メソッドは、MC コマンドの機能とインテリジェントな入力メソッドを組み合わせた革新的なツールです。これにより、モバイルデバイスに入力メソッドをインストールすることで、プレイヤーはゲーム内でさまざまなコマンドを簡単に使用できるようになります。コマンドを素早く入力してゲーム効率を向上

アリスコインとは何ですか？ Feb 23, 2024 am 09:28 AM

アリスコインとは何ですか？ ALICEコインは、クリエイターのユニークな創造性と想像力を象徴する英語の「ALICE」からインスピレーションを得たデジタル暗号通貨です。 ALICEカレンシーは、ブロックチェーン技術をベースにした仮想通貨として、ユーザーに安全、便利、かつプライバシーが保護された取引環境を提供することを目指しています。ブロックチェーン技術の応用 ALICE通貨は取引の記録と検証を実現するためにブロックチェーン技術を使用しています。ブロックチェーンは、トランザクション情報を時系列にリンクして不変のチェーンを形成する分散データベースです。このテクノロジーにより、取引情報のセキュリティが大幅に向上すると同時に、第三者機関を信頼する必要がなくなり、取引コストが削減されます。ブロックチェーンの分散型の性質により、トランザクション参加者は次のことが可能です。

WEBコインウェブチェーンとは何ですか？ Feb 21, 2024 pm 06:28 PM

ウェブコインとウェブチェーンとは何ですか? Webcoin と Webchain は、世界中のユーザーに安全で匿名のデジタル通貨取引体験を提供することを目的とした 2 つの密接に関連した暗号通貨プロジェクトです。 Webcoin はブロックチェーン技術に基づく暗号通貨であり、Webchain は Webcoin の運用をサポートする基盤となるブロックチェーンプラットフォームです。これら 2 つのプロジェクトを組み合わせることで、ユーザーは匿名性が保証された効率的かつ安全なデジタル通貨取引を実行できるようになります。 WebcoinWebcoin は、ブロックチェーン技術を使用した分散型デジタル通貨で、世界中のユーザーに安全で効率的な取引環境を提供することを目的としています。オープンソース設計により、トランザクションの記録と検証がより透明性と信頼性を高めます。 W

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック