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 チュートリアル (最も詳細)

推薦する

Docker 自動ビルド 自動ビルド実装プロセス図

自動ビルドとは、Docker Hub を使用して、Dockerfile ファイルを含む GitHub...

セマンティック XHTML タグの紹介

まず最初に指摘しておきたいのは、人間は視覚的な区分を通じてコン​​テンツの意味を判断できるが、検索エ...

空のパスがページのパフォーマンスに与える影響に対する解決策

数日前、Google Reader で Yu Bo さんが共有した投稿「空のパスがページのパフォーマ...

MySQL テーブルデータのインポートとエクスポートの例

この記事では、MySQL テーブル データのインポートおよびエクスポート操作について説明します。ご参...

スプライトとフォントアイコンを実装するためのCSS

スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...

Docker で MySQL を起動したときに SQL 文を自動的に実行する方法

Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...

WeChatアプレットにおけるデータ保存実装方法

目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...

Vueはコンピュータカメラを呼び出して写真機能を実現します

この記事の例では、コンピュータカメラを呼び出して写真機能を実現するためのvueの具体的なコードを参考...

VueRouterルーティングの詳細な説明

目次vueルーター1. ルーティングの概念を理解する1.1 ルーティングとは何ですか? 1.2. バ...

HTML の値属性と名前属性の機能と使用法の紹介

1. ボタンで使用される値は、「OK」、「削除」など、ボタンに表示されるテキストを指します。 2. ...

element-plus でオンデマンドインポートとグローバルインポートを実装する方法

目次オンデマンドインポート:グローバルインポートオンデマンドインポート:プラグインをインストールする...

Docker を使用して開発環境を構築する方法 (Windows および Mac)

目次1. Dockerを使用する利点2. Dockerをインストールする1) LinuxにDocke...

web.config (IIS) および .htaccess (Apache) の構成

xml <?xml バージョン="1.0" エンコーディング="...

Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します

純粋なフロントエンド実装:切片上傳斷點續傳。斷點續傳カットとアップロードに基づいて実装する必要があり...

Vue 3.0 カスタムディレクティブの使い方

目次1. カスタム指示1. グローバルカスタム指示を登録する2. グローバルカスタム指示を使用する3...