この記事では、Vue 命令について説明し、Vue でよく使用される 6 つの組み込み命令を紹介します。皆さんのお役に立てれば幸いです。
命令の分類
ディレクティブは、vue が開発者向けに提供する テンプレート構文です。開発者によるページのレンダリングを支援します。 (学習ビデオ共有: vuejs ビデオ チュートリアル )
使用されるデータはインスタンスの data で定義され、イベントは methods で定義されます。インスタンス Mediumの
-
コンテンツ レンダリング手順: 開発者による DOM 要素のテキスト コンテンツのレンダリングを支援します
-
属性バインディング手順: 開発者が要素の属性を属性値に動的にバインドできるように支援します。
-
イベント バインディング手順: 開発者がイベントを要素にバインドできるように支援します
-
双方向バインド手順: 開発者が DOM を操作せずにフォーム データを迅速に取得できるようにします (データ ソースの変更はページに同期され、ページの変更もデータ ソースに同期されます)
-
条件付きレンダリング手順 : 開発者がオンデマンドで DOM の表示と非表示を制御できるように支援します。
-
リスト レンダリング手順 : 開発者が配列に基づいてリスト構造をループ レンダリングできるように支援します
1. コンテンツのレンダリング手順
v-text
プレーン テキスト コンテンツのみをレンダリングできます, タグ内の元のコンテンツを上書きします
<p v-text="gender">性别</p>
ログイン後にコピー
{{ }} 補間式
はレンダリングのみ可能ですプレーン テキスト コンテンツ、上書きされません タグ内の元のコンテンツ
<p>性别：{{ gender }}</p>ログイン後にコピー
v-html
は、タグ付き文字列を HTML コンテンツに追加すると、 は タグ
<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->
ログイン後にコピー
2 内の元のコンテンツを上書きします。属性バインディングの手順
v-bind : または:
は要素の属性です 動的 バインディング属性値
<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以-->
ログイン後にコピー
注: 補間式 および v-bind JavaScript 式の操作もサポート
#
{{ 1 + 2 }} //一元运算
{{ ok ? 'YES' : 'NO'}} //三元运算
{{ message.split('').reverse().join('') }} //字符串的反转ログイン後にコピー
<div :id="'list-' + id"></div> <!--字符串和变量的拼接-->
ログイン後にコピー
3. イベント バインディング命令
#v-on : または @
要素のイベントをバインド
<button v-on:click="add">+1</button> <!--两种写法都可以-->
<button @click="add">+1</button> <!--两种写法都可以-->
-----------------------------------------------------------
<script>
//创建vue的实例对象
const vm = new Vue({
methods:{
add(){
this.count ++; //相当于vm.count ++;
}
}
})
</script>ログイン後にコピー
パラメータを渡す
パラメータが渡されない場合:デフォルトの仮パラメータ - event
はオブジェクトであり、内部のターゲット属性は現在バインドされているイベントの DOM 要素を指します パラメータ:event を渡すと、それは上書きされます使用できるようにするには、渡したパラメータがイベントを保持できる場合は、別の実パラメータ - $event
を手動で渡すことができ、仮パラメータはオプションです <button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
//创建vue的实例对象
const vm = new Vue({
methods:{
add(n,event){
//修改
this.count +=n;
//判断
if(this.count % 2 === 0)
event.target.style.color = 'red';
else
event.target.style.color = '';
}
}
})
</script>ログイン後にコピー
イベント修飾子
イベントである限り、修飾子を使用できます。一般的に使用される 5 つの
##イベント修飾子##を次に示します。 #説明 | |
.preventデフォルトの動作を防止します (例: リンクのジャンプの防止、 form) | | .stop
イベントのバブリングを防止する | | .capture
現在のイベント ハンドラーをトリガーするキャプチャ モードの場合 | | .once
バインドされたイベントは 1 回だけトリガーされます | | .self
events.target が現在の要素自体の場合のみ トリガーイベント処理関数 | | <!--举个例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button>
ログイン後にコピー
キー修飾子
のみ使用できる修飾子キーボード イベントをトリガーする場合、一般的に使用される 2 つのキー修飾子を以下に示します。
# キー修飾子
# 説明 | |
|---|
.escキーボードの esc キーを押した場合 | ##.enter | キーボードの Enter キーを押した場合
| <!--举个例子-->
<!--keyup是事件名称 .esc是按键修饰符 clearInput是事件处理函数-->
<input type="text" @keyup.esc="clearInput">
ログイン後にコピー
| 4. 双方向バインディング命令
##v-model
フォーム データをすばやく取得します (input、textarea、select などのフォーム要素にのみ適用されます)
<input type="text" v-model="username">
ログイン後にコピー
<select v-model="city">
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>ログイン後にコピー
v にのみ使用できる修飾子-model
排他的修飾子
Description
| .number | ユーザーが入力した値を数値型に自動的に変換します
|---|
.trim | ユーザーが入力した先頭と末尾の空白文字を自動的にフィルターします |
.lazy | データはフォーカスが失われると自動的に更新されます (通常はリアルタイムで更新されます) |
#<!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>ログイン後にコピー
五、条件渲染指令
v-show
控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换
<p v-show="flag">这是被 v-show 控制的元素</p>
ログイン後にコピー
v-if
控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少
<p v-if="flag">这是被 v-if 控制的元素</p>
ログイン後にコピー
v-else-if
配合 v-if 指令一起使用，否则将不会被识别
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
ログイン後にコピー
六、列表渲染指令
v-for
基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"
- item是 被循环的每一项 ，名字随意
- items是 待循环的数组 ，名字随意
<table>
<thead>
<th>索引</th>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
</thead>
<tbody>
<!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->
<!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->
<!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->
<!-- 注意：只有在需要用到索引时，才写这第二个参数 -->
<tr v-for="(item,index) in list">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
------------------------------------------------------------
<script>
//创建vue的实例对象
const vm = new Vue({
data: {
list: [
{ id: 1, name:'张三', gender:'男' },
{ id: 2, name:'李四', gender:'女' },
{ id: 3, name:'王五', gender:'男' }
]
}
})
</script>ログイン後にコピー
注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性
- key 的属性值尽量为 id，为 index 则无意义（因为index不和内容有一个强制的绑定关系）
- key 的属性值只能是 字符串/数字 类型，否则报错
- key 的属性值必须具有唯一性（不重复 且 内容和值有一个强制的绑定关系）
<tr v-for="(item,index) in list" :key="item.id">
ログイン後にコピー
（学习视频分享：web前端开发、编程基础视频）
以上がVue 命令の入門: よく使用される 6 つの組み込み命令について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Vue.js vs. React：プロジェクト固有の考慮事項
Apr 09, 2025 am 12:01 AM
VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1）Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2）Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。
VUEのボタンに関数を追加する方法
Apr 08, 2025 am 08:51 AM
HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
vue.jsでJSファイルを参照する方法
Apr 07, 2025 pm 11:27 PM
vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。
VueでWatchの使用方法
Apr 07, 2025 pm 11:36 PM
Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。
Vueによる前のページに戻る方法
Apr 07, 2025 pm 11:30 PM
vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。
Vue Multi-Page開発とはどういう意味ですか？
Apr 07, 2025 pm 11:57 PM
VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。
Vueのバージョンを照会する方法
Apr 07, 2025 pm 11:24 PM
Vue Devtoolsを使用してブラウザのコンソールでVueタブを表示することにより、Vueバージョンを照会できます。 NPMを使用して、「NPM List -G Vue」コマンドを実行します。 package.jsonファイルの「依存関係」オブジェクトでVueアイテムを見つけます。 Vue CLIプロジェクトの場合、「Vue -Version」コマンドを実行します。 ＆lt; script＆gt;でバージョン情報を確認してくださいVueファイルを参照するHTMLファイルにタグを付けます。
See all articles
