ホームページ > 記事 > ウェブフロントエンド > 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 を表示します。
<pre class="brush:html;toolbar:false;"><div v-show="true"> 我 dispaly:"block" 拉 </div>
<div v-show="false"> 我 dispaly:"none" 拉 </div> //假装我隐藏了 你看不见我</pre>
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-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
<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('this.count:'+this.count); } } } </script>と同等です。 v-text
<p v-text="data"> 你好你好 </p>v-html
<p v-html="data">厉害</p> 页面显示:<p> <h1>你好啊<h1> </p> // 外层还是会有p标签来包裹 data:<h1>你好啊<h1>v-on
@ "簡単に言えば、v-on はバインディング イベントです。複数のイベントを 1 つのラベルにバインドできます。 v-on: 最初のものはイベントであり、イベントの後に自己定義メソッドが続きます。 v-bind 也有一个简便的写法就是" : " 简单来说v-on就是用于绑定数据和元素属性 , 最常用的方法就是用于动态绑定class v-model是Vue双向绑定指令 , 它可以在页面是输入的状态同时改变绑定data属性 , 也会在data属性发生改变的时候也更新页面的状态 , 我们经常在input上面能发现他的存在 , 他的本质上其实是绑定了 .lazy 将input的实时更新改为一个change事件 , 只有失焦的时候input才会触发事件 .trim 去除字符串首尾的空格 .number 将数据转化为值类型 【相关推荐:vue.js教程】 <button v-on:mouseenter='onenter' @click='leave'>click me</button>
v-bind
<ul :class="classObject"></ul>
v-model
7a3f9db32469ed541a9a9f23cd4ac481
, v-model后面可以跟修饰符比如 .lazy 、.trim 和 .number 这些修饰符一起使用<input v-model="test">
<input v-model.lazy="msg" >
<input v-model.trim="msg">
<input v-model.number="age" type="number">
以上がVue の一般的な命令について詳しく説明しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。