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 で重複レコードをクエリして削除する方法の完全なガイド

序文この記事では主に、MySQL で重複レコードをクエリして削除する方法を紹介します。参考と学習のた...

React の 3 つの主要属性における Ref の使用に関する詳細な説明

目次クラスコンポーネント機能コンポーネントインタビューのよくある質問: React における ref...

シンプルな加算計算機の JavaScript 実装

この記事では、参考までに、加算計算機を実装するためのJavaScriptの具体的なコードを紹介します...

SQL の左結合と右結合の原理と例の分析

テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...

MySQL の CPU 負荷が高い問題のトラブルシューティング

MySQL による CPU 負荷の上昇今日の午後、MySQL によってサーバーの負荷が高くなる問題を...

Vueは適切なスライドアウトレイヤーアニメーションを実装します

この記事では、適切なスライドアウトレイヤーアニメーションを実装するためのVueの具体的なコードを例と...

HTML テーブル タグ チュートリアル (47): ネストされたテーブル

<br />このページでは、テーブルをネストすることで組版を実現しています。つまり、1 ...

Vue ミックスインの詳しい説明

目次ローカルミックスイングローバル ミックスイン要約するローカルミックスイン <テンプレート&...

Linux DockerでSpringbootプロジェクトを実行するための詳細な手順

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

Nginx リバース プロキシから go-fastdfs へのケースの説明

背景go-fastdfs は、http プロトコルをサポートする分散ファイルシステムです。一般的なプ...

IIS7 IIS8 http は自動的に HTTPS にジャンプします (ポート 80 はポート 443 にジャンプします)

IIS7 では、「URL REWRITE2」疑似静的モジュールがインストールされているかどうかを確...

Jenkins+Docker継続的インテグレーションの実装

目次1. Jenkinsの紹介2. Jenkinsをインストールしてデプロイする1. 環境情報2. ...

html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。

この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...

完全なMySQL学習ノート

目次MyISAM と InnoDBパフォーマンスの低下と SQL の速度低下の理由: MySQL 実...

Linux parted ディスク パーティション実装手順の分析

fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...