vuejs には手順があります。 Vuejs 命令は「v-」で始まります。これらは HTML 要素に作用します。命令はいくつかの特別な機能を提供します。命令が要素にバインドされると、命令はバインドされたターゲット要素にいくつかの特別な動作を追加します。ディレクティブは特別なものと考えることができますHTMLの機能。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
vuejs には手順があります。
Vue の命令とは
Vue.js の命令は v- で始まり、HTML 要素に作用します。ディレクティブはいくつかの機能を提供します。特別な機能: ディレクティブを要素にバインドするとき、ディレクティブはバインドされたターゲット要素に特別な動作を追加します。ディレクティブは特別な HTML 属性と考えることができます。
VueJS は、ディレクティブと呼ばれる新しい属性を使用して HTML を拡張します。
ViueJS は、組み込みディレクティブを通じてアプリケーションに機能を追加します。
VueJS を使用すると、ディレクティブをカスタマイズできます。
#ディレクティブの特徴
vuejs の共通命令
Vue.js には、一般的に使用される組み込み命令がいくつか用意されています。以下のいくつかの組み込みコマンド: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: '#app',
data: {
age:25,
isMale:true,
}
})v-show コマンド
v-show と v-if の違い。v-show は条件が true であるかどうかに関係なく html をレンダリングしますが、v-if は条件が true の場合にのみレンダリングします。
と 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: '#app',
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: '#app',
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: '#app',
data: {
list:[{
name:'章三',
age:18
},{
name:'李四',
age:23
}]
}
})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?'':'product'"
v-bind:style="{'border':hasBorder?'2px solid red':''}"></img>
</div>
var vm = new Vue({
el: '#app',
data: {
img:'https://www.baidu.com/img/bd_logo1.png',
isLogo:false,
hasBorder:true
}
})上記の v-bind:src は、src と省略して使用することもできます。上記のコードを変更します
<div id="app">
<img :src="img" class="logo"
:class="isLogo?'':'product'"
:style="{'border':hasBorder?'2px solid red':''}"></img>
</div># #v-on 命令
v-on は、DOM イベントを監視するために使用されます。その使用法は、たとえば、ボタンの追加クリックイベント
<ボタンへの v-bind と似ています。 v-on:click="show">
同様に、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: '#app', 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: '#app',
data: {
person:{
name:'',
age:'',
},
list:[{
name:'章三',
age:18
},{
name:'李四',
age:23
}]
},
methods:{
add:function(){
this.list.push(this.person);
this.person = {name:'',age:''};
},
deleteItem:function(index){
// 删除一个数组元素
this.list.splice(index,1);
},
marry:function(){
alert("不好意思，你没有女朋友结不了婚");
}
},
created:function(){
}
})関連する推奨事項: vue.js チュートリアル
》以上がvuejs に関する指示はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
