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

推薦する

Bootstrap 3.0 学習ノートのボタンとドロップダウン メニュー

前回の記事はBootstrap CSS部分の簡単なレビューであり、多くの詳細が見落とされていました。...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...

SQL Server での exists と except の使用法の概要

目次1. 存在する1.1 説明1.2 例1.3 交差/2017-07-21 2. 除く2.1 説明2...

Nginx を使用してポート転送 TCP プロキシを実装する例

目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...

Vuex でゲッターとアクションを使用するための追加手順

予備的注釈1.Vue2.xとVue3.xの違い: Vue 3.x にはヘルパー関数はありません。 V...

Vueコンポーネントは、写真やビデオをアップロードするためのサンプルコードをカプセル化します

まず依存関係をダウンロードします: cnpm i -S vue-uuid ali-oss画像フィール...

mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...

VMware 仮想マシンでの Centos8 ブリッジの静的 IP 設定方法

1. ネットワーク接続方法がブリッジされていることを確認する物理ネットワーク接続ステータスのコピーを...

js 配列エントリ() 反復メソッドを取得する

目次1.entires() メソッドの詳細な構文2.entires() メソッドの一般的な使用法と注...

MySQL でコミットされていないトランザクション情報を見つける方法

少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...

MySQLのlike演算子の詳細

1. はじめに不明な値または部分的に既知の値をフィルタリングする場合は、like 演算子を使用でき...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

Dockerコンテナオーケストレーション実装プロセス分析

実際の開発環境や本番環境では、コンテナを独立して実行することはあまりなく、複数のコンテナを一緒に実行...

Windows Server 2016 に Docker をインストールするプロセスと発生した問題

前提条件Windows Server でコンテナーを実行するには、Windows Server (半...

jsネイティブカルーセルプラグインの制作

この記事では、jsネイティブカルーセルプラグインの具体的なコードを参考までに共有します。具体的な内容...