VUE ユニアプリテンプレート構文についての簡単な説明

VUE ユニアプリテンプレート構文についての簡単な説明

1.v-bind(略称:)

コンポーネント プロパティのデータで定義されたデータ変数を使用するか、コンポーネント プロパティで式を使用するには、v-bind でそれらを指定する必要があります。

略語:

2. v-on(省略形は@)

DOMイベントのリッスン

click.stopはイベントの侵入を防ぐことができます

3.vモデル

双方向データバインディング

4. v-if、v-else-if、v-else

特定のコンテンツがマウントされているかどうかを判断する条件判断

5.v-ショー

特定のコンテンツを表示するかどうかを決定する条件判断

6. 三項演算子

7. 空のタグブロック

8. v-for: リストのレンダリング

<テンプレート>
	<view v-bind:class="msg" v-bind:data="1+2">
		{{msg}} 世界!-{{num}}
		<button v-on:click="show">クリックしてください</button>
		<input v-model="msg" />
		<view v-if="flag">ビュー</view>
		<view v-else>H5</view>
		<view>{{flag ? '表示':'非表示'}}</view>
		<ブロック>
			<text>ブロック空タグ</text>
		</ブロック>

		<view v-for="(item, index) in arr">{{index+1}}:{{item}}</view>
		<表示 @click="c1">
			親 <view @click.stop="c2">子</view>
		</ビュー>
	</ビュー>
	
</テンプレート>
<スクリプト>
エクスポートデフォルト{
	//データを初期化し、
	//data:{}、オブジェクトフォームデータを使用すると変更されないため、推奨されませんdata(){
		戻る {
			msg:'hello',//変数 arr:['vue','H5','CSS'],//配列 flag:true,//ブール値 num: 1
		}
	},
	オンロード(){
		タイムアウトを設定します(()=>{
			this.num++;
		},2000)
	},
	方法:{
		見せる(){
			console.log('クリックされました');
			this.flag=!this.flag;
		},
		c1(){
			console.log('私は親です');
		},
		c2(){
			console.log('私は子供です');
		}
	}
}
</スクリプト>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • vue-cli を使用してテンプレート プロジェクトを作成する方法
  • Vue3 テンプレートコンパイルの原理に関する深い理解
  • vscodeでvueテンプレートコンテンツを設定する方法
  • VsCodeでのVueテンプレートの実装
  • Vueでテンプレートを動的に追加するいくつかの方法の詳細な説明
  • Vue テンプレートのさまざまなデータバインディングについての簡単な説明
  • VUEカスタムコンポーネントテンプレート方式の詳細な説明
  • Vue テンプレート構文 - 補間の詳細な説明
  • シンプルなvue-resourceはjsonを取得し、それをテンプレート例に適用します
  • Vueフロントエンド情報詳細ページテンプレートの詳細な説明

<<:  MySQL データ型の完全分析

>>:  Docker インストール rocketMQ チュートリアル (最も詳細)

推薦する

MySQL データ ウェアハウスを保護するための 5 つのヒント

さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...

Tomcat でサーブレット URL パターンを構成する際の問題の詳細な説明

tomcat の web.xml を構成する場合、サーブレットは比較的重要な問題です。ここでは、サー...

sbinディレクトリを生成せずにNginxをインストールするソリューション

エラーの説明: 1. Linux (CentOS 7 64) システムに Nginx (1.18.0...

Elementのメッセージポップアップウィンドウが繰り返しポップアップする問題の解決

目次1. 使用2. メッセージポップアップウィンドウが繰り返し表示される問題を解決する1. 使用Vu...

Vue の動的メニュー、動的ルートの読み込みと更新の落とし穴

目次必要:アイデア:レッスン:テキストを共有する:要約する必要:インターフェイスからサブメニュー デ...

WeChatアプレット開発の実践スキル:データの転送と保存

日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...

HTML ページの先頭に戻るいくつかの実装の概要

最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...

Mysql 5.7.17 をインストールした後、MySQL にログインするチュートリアル

mysql-5.7.17 のインストールについては記事の下部で紹介されているので、参考にしてください...

CSS BEM 命名標準の概要 (推奨)

1 BEM命名標準とはBem は、ブロック、要素、修飾子の略語であり、Yandex チームによって...

3つの簡単な例を使ってハイパーリンクの下線を削除する方法

ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...

Vue のスロットリング関数使用時の落とし穴ガイド

序文一般的なビジネス シナリオでは、検索ボックスへの入力が完了した後、検索データを取得するために関連...

Vue で Openlayer を使用して読み込みアニメーション効果を実現する

注意: スコープアニメーションは使用できません。 ! ! ! GIF経由 <テンプレート>...

個人的な意見: デザインについて語る

<br />最も実用的なものを選んで話しましょう。まず、勤務先の都市を慎重に選ぶ必要があ...

Dockerコンテナの中国語言語パックの設定の問題を解決する

Dockerでdocker search centosを使用する場合docker pull dock...

Vue 天気予報入門

この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...