vuejs に関する指示はありますか?

vuejs には手順があります。 Vuejs 命令は「v-」で始まります。これらは HTML 要素に作用します。命令はいくつかの特別な機能を提供します。命令が要素にバインドされると、命令はバインドされたターゲット要素にいくつかの特別な動作を追加します。ディレクティブは特別なものと考えることができますHTMLの機能。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vuejs には手順があります。

Vue の命令とは

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

• VueJS は、ディレクティブと呼ばれる新しい属性を使用して HTML を拡張します。

• ViueJS は、組み込みディレクティブを通じてアプリケーションに機能を追加します。

• VueJS を使用すると、ディレクティブをカスタマイズできます。

#ディレクティブの特徴

• すべてのディレクティブは Vue インスタンス管理の範囲に含まれます。

• vueJS ディレクティブは、v- という接頭辞が付いた拡張 HTML 属性です。

• v-model ディレクティブは、要素値 (入力フィールドの値など) をアプリケーションにバインドし、その値を保存します。

vuejs の共通命令

Vue.js には、一般的に使用される組み込み命令がいくつか用意されています。以下のいくつかの組み込みコマンド:

v-if コマンド
• v-show コマンド
• v-else コマンド
• v-for コマンド
• v-bind 命令
• v-on 命令

v-if 命令

v-if は条件付きレンダリング命令。true または false の式に基づいて要素を削除および挿入します。

基本構文:
v-if="expression"
expression は、ブール値を返す式です。式は次のとおりです。ブール値属性。ブール値を返す式にすることもできます。

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-if="age>=20">age:{{age}}</div>
		</div>
		
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				age:25,
				isMale:true,
			}
		})

v-show コマンド

v-show と v-if の違い。

v-show は条件が true であるかどうかに関係なく html をレンダリングしますが、v-if は条件が true の場合にのみレンダリングします。

最初に 2 つのスクリーンショットを見てみましょう。この図は、is Male が false で条件が満たされていない場合に、v-show を使用して v-if の HTML がレンダリングされず、

と p が表示されていないことがわかります。スタイル表示のみを変更します: none;

<div id="app">
			<div v-if="isMale">男士v-if</div>
			<div v-show="isMale">男士v-show</div>
		</div>
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				isMale:false
			}
		})

v-else ディレクティブ

v-elseディレクティブは v-if または v-show と同時に使用され、v-if 条件が成立しない場合は v-else の内容が表示されます

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-else>女士</div>
		</div>
		var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				isMale:true
			}
		})

v-for命令

v-for 命令は、JavaScript のトラバーサル構文に似た配列に基づいてリストをレンダリングします

v-for="リスト内の項目"
リストは配列であり、項目は現在トラバースされている配列ですelement
v-for="(item,index) in list" ここで、index は現在のループのインデックスです。添え字は 0

<div id="app">
			<table>
				<tr class="thead">
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="(item,index) in list">
					<td v-text="index+1"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
				</tr>
			</table>
		</div>
		
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				list:[{
					name:&#39;章三&#39;,
					age:18
				},{
					name:&#39;李四&#39;,
					age:23
				}]
			}
		})

## から始まります。 #v-bind コマンド

v-bind は 1 つ以上の機能を動的にバインドします。名前の後にパラメータを取得し、コロンで区切ることができます。通常、このパラメータは HTML 要素の属性です。たとえば、 v-bind: class

class は v-bind:class と同時に存在できます。つまり、クラスが存在する場合、 v-bind:class を追加しても上書きされません。元のスタイルのクラスですが、元のベースで新しいクラス名を追加します

<div id="app">
			<img v-bind:src="img" class="logo" 
				v-bind:class="isLogo?&#39;&#39;:&#39;product&#39;" 
				v-bind:style="{&#39;border&#39;:hasBorder?&#39;2px solid red&#39;:&#39;&#39;}"></img>
		</div>
		
		var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				img:&#39;https://www.baidu.com/img/bd_logo1.png&#39;,
				isLogo:false,
				hasBorder:true
			}
		})

上記の v-bind:src は、src と省略して使用することもできます。上記のコードを変更します

<div id="app">
			<img :src="img" class="logo" 
				:class="isLogo?&#39;&#39;:&#39;product&#39;" 
				:style="{&#39;border&#39;:hasBorder?&#39;2px solid red&#39;:&#39;&#39;}"></img>
		</div>

# #v-on 命令

v-on は、DOM イベントを監視するために使用されます。その使用法は、たとえば、ボタンの追加クリックイベント

73fdb781abf49d911a99962f00f1a331

同様に、v-bind と同様に、v-on も @ 記号に置き換えて略語を使用できます。コードを変更します: < ;button @click="show">

例を見てみましょう:

以下は、クリックすると次のコードです。 p 個のテキスト段落の非表示と表示

<div id="app">			<p v-show="isShow">微风轻轻的吹来，带来了一丝丝凉意</p>
			<div>
				<button type="button" v-on:click="show(1)">显示</button>
				<button type="button" v-on:click="show(0)">隐藏</button>
			</div>
		</div>		
		var vm = new Vue({			el: &#39;#app&#39;,			data: {				isShow:true
			},			methods:{				show:function(type){					if(type){						this.isShow = true;
					}else{						this.isShow = false;
					}
				}
			}
		})

包括的な例

<div id="app">
			<div class="title">添加新用户</div>
			<div class="form">
				姓名：<input type="text" v-model="person.name"><br/>
				年龄：<input type="text" v-model="person.age"><br/>
				<button class="btn" type="button" @click="add">添加</button>
			</div>
			<table>
				<tr class="thead">
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>操作</td>
				</tr>
				<tr v-for="(item,index) in list">
					<td v-text="index+1"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td>
						<a href="javascript:;" @click="deleteItem(index)">删除</a>
						<a v-if="item.age>=25" href="javascript:;" @click="marry(index)">可以结婚了</a>
					</td>
				</tr>
			</table>
		</div>
		new Vue({
			el: &#39;#app&#39;,
			data: {
				person:{
					name:&#39;&#39;,
					age:&#39;&#39;,
				},
				list:[{
					name:&#39;章三&#39;,
					age:18
				},{
					name:&#39;李四&#39;,
					age:23
				}]
			},
			methods:{
				add:function(){
					this.list.push(this.person);
					this.person = {name:&#39;&#39;,age:&#39;&#39;};
				},
				deleteItem:function(index){
					// 删除一个数组元素
					this.list.splice(index,1);
				},
				marry:function(){
					alert("不好意思，你没有女朋友结不了婚");
				}
			},
			created:function(){
			}
		})

関連する推奨事項: vue.js チュートリアル

》

以上がvuejs に関する指示はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。