Vue で一般的に使用される命令は何ですか?-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

Vue で一般的に使用される命令は何ですか?

青灯夜游

Nov 25, 2020 am 11:32 AM

vue命令

Vue の共通命令には、v-once 命令、v-show 命令、v-if 命令、v-else 命令、v-else-if 命令、v-for 命令、v-html 命令、v- text命令、v-bind命令、v-on命令、v-model命令など。

Vue で一般的に使用される命令は何ですか?

vue.js は、それ自体をデータテンプレートエンジンとして正式に定義し、データをレンダリングするための一連の命令を提供します。

Vue.js ディレクティブは v- で始まります。これらは HTML 要素に作用します。ディレクティブはいくつかの特別な機能を提供します。ディレクティブを要素にバインドするとき、ディレクティブは追加します。いくつかの特別な動作については、命令を考えることができます。特別な HTML 属性として。

ディレクティブの目的は、式の値が変化したときに、それに応じて特定の動作を DOM に適用することです。

vue の共通命令の概要

1.v-once

1 回実行可能補間では、データが変更された場合、補間時の内容は更新されません。ただし、これはノード上の他のデータバインディングに影響することに注意してください:

<div id="app">
        <p v-once>原始值: {{msg}}</p>
        <p>后面的: {{msg}}</p>
        <input type="text" v-model="msg">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
       el: &#39;#app&#39;,
        data: {
           msg: &#39;今天的天气很好!&#39;
        }
    });

v-once コマンドを追加した後は変更されません

2.v-show

v-if と同じですが、違いは、if がコメントアウトされていて、v-show には display:none 属性が与えられることです。表示されないとのこと！使用方法については、次の v-if ディレクティブを参照してください。

v-show と v-if の違い:

v-if は真の条件付きレンダリングです。これは、条件ブロックが切り替え中に条件ブロック内のイベントリスナーとサブコンポーネントを適切に破棄および再構築することを保証するためであり、v-show は単純に CSS に基づいて切り替えます。

v-if はスイッチングコストが高く、v-show は初期レンダリングコストが高くなります。したがって、

頻繁な切り替えが必要な場合は、v-show を使用することをお勧めします。実行中に条件が変化する可能性が低い場合は、v-if を使用することをお勧めします。

3.v-if

v-if に続くのは、true または false を返す式です。そして値がtrueでfasle falseの場合はコメント化されます v-showは表示されないようにdisplay:none属性を与えることです！ true の場合は正常に表示されます。

<div id="app">
<p v-if="show">要显示出来!</p>
<p v-if="hide">不要显示出来!</p>
<p v-if="height > 1.55">小明的身高: {{height}}m</p>
<p v-if="height1 > 1.55">小明的身高: {{height1}}m</p>
<p v-if="3>2">打死你: {{height1}}m</p>
</div>
<script src="js/vue.js"></script>
<script>
   new Vue({
                   el: &#39;#app&#39;,
                 data: {
                           show: true,
                            hide: false,
                           height: 1.68,
                            height1: 1.50
                           }
});
</script>

4.v-else

v-if と一緒に使用する必要があります。単独で使用することはできず、下の中央にある必要があります。 v-if 他のタグでもエラーが報告されます

<div id="app">
　　<p v-if="height > 1.7">小明的身高是: {{height}}m</p>
　　<p v-else>小明的身高不足1.70m</p>
</div>
<script src="js/vue.js"></script>
<script>
　　new Vue({
　　　　　　　　el: &#39;#app&#39;,
　　　　　　　　data: {
　　　　　　　　height: 1.88
　　　　}
});
</script>

5.v-else-if

これは比較的単純なので、コードを見るだけで大丈夫です。レベル

<div id="app">
        <p>输入的成绩对应的等级是:</p>
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 75">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
        <input type="text" v-model="score">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: &#39;#app&#39;,
            data: {
               score: 90  // 优秀 良好 及格 不及格
            }
        });
    </script>

6.v-for

JS のトラバーサルと同様に、データに基づいてリストをレンダリングします。データ型は

Array | Object | number | string

このコマンドの値, items には特定の構文 (item、index) を使用する必要があります。index はインデックスであり、省略できます。 item は、現在トラバースされている要素のエイリアスを提供します (任意の名前を付けることができます)。 v-for は、v-if

<body>
        <div id="app">
            <!-- 遍历数组 -->
            <p v-for="(d,index) in msg">
                {{index +&#39;:&#39;+d}}
            </p>
            <!-- 遍历对象 -->
            <div v-for="(dd,index) in obj">
                {{index+&#39;:&#39;+dd}}
            </div>
            <!-- 遍历对象 也可以不要index索引 -->
            <div v-for="dd2 in obj">
                {{dd2}}
            </div>
            <!-- 遍历num和string -->
            <p v-for="gg in num2">{{gg}}</p>
            <p v-for="gg2 in string2">{{gg2}}</p>
             
        </div>
    </body>
    <script src="vue/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:&#39;#app&#39;,
            data:{
                msg:[123,98,25,63],
                obj:{name:&#39;敏敏&#39;,age:&#39;21&#39;,height:&#39;160&#39;},
                num2:&#39;1335454&#39;,  //注意这里不要写成了num2:1335154
                string2:&#39;xvzhiming&#39;
            }
        })
    </script>

7.v-html などの他の命令よりも高い優先順位を持ちます。 #二重中括弧は、データを HTML コードではなく通常のテキストとして解釈します。実際の HTML を出力するには、

v-html を使用する必要があります。v-html をタグに追加すると、それに含まれるタグが上書きされます。

セキュリティ問題が発生する可能性があるため、v-html は慎重に使用する必要があることに注意してください。公式 Web サイトでは次のように説明されています: サイト上で動的にレンダリングされる HTML は、XSS 攻撃に簡単につながる可能性があるため、非常に危険である可能性があります。 HTML 補間は信頼できるコンテンツに対してのみ使用し、ユーザーが提供したコンテンツに対しては決して使用しないでください。

<div id="app" v-html="html">
　　<p v-text="msg">哈哈哈</p>  
</div>
<script type="text/javascript">
　　new Vue({
        el:&#39;#app&#39;,
        data:{
            msg:&#39;我爱敏敏！！&#39;,
            html:&#39;<p>大海森林我都不爱！</p>&#39;
            }
    })
</script>

8.v-text

v-text をノートに追加すると、以下の例のように、タグ内の元のコンテンツが上書きされます。表示されません

<div id="app">
    <p v-text="msg">哈哈哈</p>
</div>
<script type="text/javascript">
    new Vue({
        　　el:&#39;#app&#39;,
        　　data:{
        　　　　msg:&#39;我爱敏敏&#39;
            }
        })
</script>

9.v-bind

#使用法

<!-- 完整语法 --> 
<a v-bind:href="url">...</a> 
<!-- 缩写 --> <a :href="url">...</a>

例

<div id="app">
     改变src alt等属性
        <img src="/static/imghwm/default1.png"  data-src="imgSrc"  class="lazy"  v-bind: :alt="alt">
        <img src="/static/imghwm/default1.png"  data-src="imgSrc1"  class="lazy"  : :alt="alt">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: &#39;#app&#39;,
            data: {
               imgSrc: &#39;img/img_01.jpg&#39;,
               imgSrc1: &#39;img/img_02.jpg&#39;,
               alt: &#39;我是美女&#39;
            }
        });
    </script>

クラス名や CSS スタイルなどをバインドすることもできます。

<div id="app">
        //v-for是一个遍历                 给他一个calss 如果index===cative class名是active，如果不等就为空
        //index 是v-for的索引
        <p v-for="(college, index) in colleges" :class="index === activeIndex ? &#39;active&#39;: &#39;&#39;">
            {{college}}
        </p>
        <p :style="{color: fontColor}">今天的天气很好!</p>
    </div>
 
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: &#39;#app&#39;,
            data: {
               colleges: [
                   &#39;iOS学院&#39;,
                   &#39;Java学院&#39;,
                   &#39;HTML5学院&#39;,
                   &#39;UI学院&#39;,
                   &#39;VR学院&#39;
               ],
                activeIndex: 0,
                fontColor: &#39;green&#39;
            }
        });
    </script>

入力には v-blnd が使用されていることに注意してください。書き込みメソッドは {{}};# でラップされていません。

<body>
        <div id="app"> <br>　　　　　　　　　　　　　　//加粗的内容刚刚学时 很容易出错 注意不要加{{}}；
            原始值<input type="" name="" id="" <strong>:value=name</strong> />
             模板<input type="" name="" id="" <strong>:value=name.split(&#39;&#39;).reverse().join()</strong> />
            methods<input type="" name="" id="" <strong>:value=fz()</strong> />
            conputed<input type="" name="" id="" <strong>:value=fz2</strong> />
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el:&#39;#app&#39;,
            data:{
                name:&#39;chenglianjie&#39;
            },
            methods:{
                fz(){
                    return this.name.split(&#39;&#39;).reverse().join(&#39;&#39;);
                }
            },<br>　　　　　　　　　　　　　　//这是vue的计算属性 在我的博客vue分类里面有介绍
            computed:{
                fz2(){
                    return this.name.split(&#39;&#39;).reverse().join(&#39;&#39;);
                }
            }
        })
    </script>

10.v-on

バインディングイベントの使用法もいくつかあります。これについては後のブログで説明します

<!-- 完整语法 -->
 <a v-on:click="doSomething">...</a> 
 
<!-- 缩写 --> 
<a @click="doSomething">...</a>

11.v-model

v-model はディレクティブであり、

に限定されます。 <strong>、データの双方向バインディング操作のコンポーネントで使用されます。</strong>

関連する推奨事項:

2020年前端vue面試題大匯總（附答案）

vue教學推薦：2020最新的5個vue.js影片教學精選

#更多程式相關知識，請造訪：程式設計入門！！

以上がVue で一般的に使用される命令は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

Netflixのフロントエンド：React（またはVue）の例とアプリケーションApr 16, 2025 am 12:08 AM

Netflixは、Reactをフロントエンドフレームワークとして使用します。 1）Reactのコンポーネント開発モデルと強力なエコシステムが、Netflixがそれを選択した主な理由です。 2）コンポーネント化により、Netflixは複雑なインターフェイスをビデオプレーヤー、推奨リスト、ユーザーコメントなどの管理可能なチャンクに分割します。 3）Reactの仮想DOMおよびコンポーネントライフサイクルは、レンダリング効率とユーザーインタラクション管理を最適化します。

フロントエンドの風景：Netflixが選択にアプローチした方法Apr 15, 2025 am 12:13 AM

Netflixのフロントエンドテクノロジーでの選択は、主にパフォーマンスの最適化、スケーラビリティ、ユーザーエクスペリエンスの3つの側面に焦点を当てています。 1。パフォーマンスの最適化：Netflixは、Reactをメインフレームワークとして選択し、SpeedCurveやBoomerangなどのツールを開発して、ユーザーエクスペリエンスを監視および最適化しました。 2。スケーラビリティ：マイクロフロントエンドアーキテクチャを採用し、アプリケーションを独立したモジュールに分割し、開発効率とシステムのスケーラビリティを改善します。 3.ユーザーエクスペリエンス：Netflixは、Material-UIコンポーネントライブラリを使用して、A/Bテストとユーザーフィードバックを介してインターフェイスを継続的に最適化して、一貫性と美学を確保します。

React vs. Vue：Netflixはどのフレームワークを使用していますか？Apr 14, 2025 am 12:19 AM

netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.

フレームワークの選択：Netflixの決定を推進するものは何ですか？Apr 13, 2025 am 12:05 AM

Netflixは、主に、パフォーマンス、スケーラビリティ、開発効率、エコシステム、技術的な負債、およびフレームワーク選択におけるメンテナンスコストを考慮しています。 1。パフォーマンスとスケーラビリティ：JavaとSpringbootが選択され、大規模なデータと高い同時リクエストを効率的に処理します。 2。開発効率とエコシステム：Reactを使用して、フロントエンド開発効率を向上させ、その豊富なエコシステムを利用します。 3.技術的な負債とメンテナンスコスト：node.jsを選択してマイクロサービスを構築して、メンテナンスコストと技術的債務を削減します。

Netflixのフロントエンドの反応、Vue、および未来Apr 12, 2025 am 12:12 AM

Netflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1）Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2）VueはNetflixの内部ツールと小規模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。

フロントエンドのvue.js：実際のアプリケーションと例Apr 11, 2025 am 12:12 AM

Vue.jsは、複雑なユーザーインターフェイスを構築するのに適した進歩的なJavaScriptフレームワークです。 1）そのコア概念には、レスポンシブデータ、コンポーネント、仮想DOMが含まれます。 2）実際のアプリケーションでは、TODOアプリケーションを構築し、Vuerouterを統合することで実証できます。 3）デバッグするときは、vuedevtools and Console.logを使用することをお勧めします。 4）パフォーマンスの最適化は、V-IF/V-Show、リストレンダリング最適化、コンポーネントの非同期負荷などを通じて達成できます。

Vue.jsとReact：重要な違いを理解するApr 10, 2025 am 09:26 AM

Vue.JSは中小企業から中規模のプロジェクトに適していますが、Reactは大規模で複雑なアプリケーションにより適しています。 1。VUE.JSのレスポンシブシステムは、依存関係追跡を介してDOMを自動的に更新し、データの変更を簡単に管理できるようにします。 2.反応は一方向のデータフローを採用し、データは親コンポーネントから子コンポーネントに流れ、明確なデータフローと簡単な抽出構造を提供します。

Vue.js vs. React：プロジェクト固有の考慮事項Apr 09, 2025 am 12:01 AM

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1）Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2）Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。