Vue の一般的な命令について詳しく説明しましょう-Vue.js-php.cn

Vue の一般的な命令について詳しく説明しましょう

青灯夜游

リリース： 2022-01-11 19:29:20

転載

1946 人が閲覧しました

この記事では、Vue の一般的な命令について詳しく説明します。お役に立てば幸いです。

Vue の一般的な命令について詳しく説明しましょう

まず、Vue フレームワークについて話しましょう。Vue は、ユーザーインターフェイスを構築するための進歩的な JavaScript フレームワークです。非常に使いやすいです。初心者向け. Vue の仮想 Dom と双方向データバインディングにより、開発者はすぐに始めることができます. 個人的には Vue 命令は非常に使いやすいと感じています. 今日のこの記事では、よく使われる # について話しましょう##Vue の手順!

v-for

私たちが初めて言語を学ぶとき、多かれ少なかれ、

for

for (let i = 0; i < arr.length; i++) {

}

ログイン後にコピー

Vue の v-for に触れることになります。私たちの JS の最も基本的な概念は、

item と index

の後ろの括弧内の 2 つの単語

loopv-for と同じです。これは、for ループ内の arr[i] および i と同等であり、対応する element および subscript に # # が続きます。 #in arr この arr は、ループしたい配列の最後の :key="item.id" であり、v-for の核心です。 :key Vue はエラーを報告しますが、なぜ Key があるのでしょうか。Key のパラメータは何でしょうか? Key のパラメータは一意です。つまり、何度ループしても、各ループのキーは繰り返されません。ここでは、Key としてインデックスを使用することはお勧めしません。結局のところ、key の機能は 2 つのノードを判断することです。コンポーネントを更新するとき、それらは同じですか。同じ場合は再利用し、異なる場合は古いものを削除して新しいものを作成します。単純なステートレスコンポーネントをレンダリングするとき、キーコンポーネントを追加しない場合、デフォルトでその場所で再利用されます。追加されたノードは削除されませんが、リスト項目内のテキスト値は変更されます。そのノードを知っておく必要があります。操作は非常にパフォーマンスを重視します。キーを追加した後、比較内容に矛盾がある場合は2つのノードとみなされ、古いノードが先に削除され、その後新しいノードが追加されます。

<li v-for="(item,index) in arr" :key="item.id">
     {{ item.name }}
</li>

ログイン後にコピー

v-show

はブール値に基づいてレンダリングされ、true はページに表示され、false ページには表示されません。実際の原理は、CSS スタイルを制御して、対応するコンポーネントまたはボックスを表示することです。dispaly:"none" を非表示にし、dispaly:"block を表示します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><div v-show="true"> 我 dispaly:"block" 拉 </div> <div v-show="false"> 我 dispaly:"none" 拉 </div> //假装我隐藏了你看不见我</pre><div class="contentsignin">ログイン後にコピー</div></div>v-if

v-if

もブール値に基づいてレンダリングされ、v-show と同様です, true ページが表示されている限り、false はページに表示されませんが、v-if は遅延します。初期値が ## の場合#false、コンポーネントは最初のパラメータが true になるまでレンダリングされません。パラメータが true になるとレンダリングされますが、条件が false になると、サブコンポーネントは破棄されます。非常に頻繁に切り替える場合は、v-show を使用することをお勧めします。実行時に条件がほとんど変化しない場合は、v-if を使用することをお勧めします。

<div v-if="true">  </div>

<div v-if="false"> 我被销毁了呜呜呜 </div> //假装我隐藏了 你看不见我

ログイン後にコピー

v-else

は

v-if について言及し、v-if で v-else についても話しました。条件が確立されていない場合は、直接 v-else に進みます。v-else の後に等号を付けることはできず、コンポーネントの前にを付ける必要があることに注意してください。 v-if##. #

<div v-if="false"> 你看不到我啊  </div> //因为我条件不成立

<div v-else> 你能看到我 </div>

ログイン後にコピー

v-else-if

v-if

と v-else について言及し、# についても考えてください。 ##v-else-if v-if 条件が成立していない場合は、直接 v-else-if に進み、条件が成立しているかどうかを確認します。条件が成立した場合、コンポーネントはレンダリングされます。コンポーネントの前に v-if

<p v-if="score>=90">厉害</p>

<p v-else-if="score>=60">差不多</p>

ログイン後にコピー

v-once

v を付ける必要があります-once

その機能は、その要素またはコンポーネントのみを定義することです。最初のレンダリング後は、データが更新されても再レンダリングされません。これは、静的コンテンツ

<template>
    <div v-once>{{count}}</div>
    <button v-on:click="addCount"> 你点我count也不加 </button>
</template>



<script>
    export default {
        data() {
            return { count: 10 } 
        },
        methods: { 
        addCount: function () {
            this.count += 1;
            console.log(&#39;this.count:&#39;+this.count); 
            } 
        }
    }
</script>

ログイン後にコピー

と同等です。 v-text

v-text

データをテキスト形式で挿入します。プレーンテキストの操作に使用されます。要素自体のコンテンツが置き換えられます。データが更新されると、試行も変更されます

<p v-text="data"> 你好你好 </p>

ログイン後にコピー

v-html

v-html

v-html は HTML の出力に使用されます。v-text との違いは次のとおりです。 -text はプレーンテキストを出力し、ブラウザはそれを HTML として解析しませんが、v-html はそれを HTML タグとして解析して出力します。

<p v-html="data">厉害</p>


页面显示：<p>
            <h1>你好啊<h1>
        </p> // 外层还是会有p标签来包裹



data:<h1>你好啊<h1>

ログイン後にコピー

v-on

v -on

簡単な書き方があります: "

@ "簡単に言えば、v-on はバインディングイベントです。複数のイベントを 1 つのラベルにバインドできます。 v-on: 最初のものはイベントであり、イベントの後に自己定義メソッドが続きます。

 <button v-on:mouseenter=&#39;onenter&#39; @click=&#39;leave&#39;>click me</button>

ログイン後にコピー

v-bind

v-bind 也有一个简便的写法就是" : " 简单来说v-on就是用于绑定数据和元素属性，最常用的方法就是用于动态绑定class

 <ul  :class="classObject"></ul>

ログイン後にコピー

v-model

v-model是Vue双向绑定指令，它可以在页面是输入的状态同时改变绑定data属性，也会在data属性发生改变的时候也更新页面的状态，我们经常在input上面能发现他的存在，他的本质上其实是绑定了<input :value="test" @input="test = $event.target.value"> ， v-model后面可以跟修饰符比如 .lazy 、.trim 和 .number 这些修饰符一起使用

.lazy 将input的实时更新改为一个change事件，只有失焦的时候input才会触发事件

.trim 去除字符串首尾的空格

.number 将数据转化为值类型

<input v-model="test">

<input v-model.lazy="msg" >

<input v-model.trim="msg">

<input v-model.number="age" type="number">

ログイン後にコピー

【相关推荐：vue.js教程】
以上がVue の一般的な命令について詳しく説明しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。