Vuejs-quick-guide
VueJS-概要
*VueJS* は、インタラクティブなWebインターフェイスの開発に使用されるオープンソースのプログレッシブJavaScriptフレームワークです。 Web開発を簡素化するために使用される有名なフレームワークの1つです。 VueJSはビューレイヤーに焦点を当てています。 フロントエンド開発用の大きなプロジェクトに問題なく簡単に統合できます。VueJSのインストールは非常に簡単に開始できます。 開発者は誰でも、簡単にインタラクティブなWebインターフェイスを理解して構築できます。 VueJSは、Googleの元従業員であるEvan Youによって作成されました。 VueJSの最初のバージョンは2014年2月にリリースされました。 最近、GitHubで64,828個の星を記録し、非常に人気があります。
特徴
VueJSで利用できる機能は次のとおりです。
仮想DOM
VueJSは、仮想DOMを使用します。これは、React、Emberなどの他のフレームワークでも使用されます。 変更はDOMには行われず、代わりにJavaScriptデータ構造の形式で存在するDOMのレプリカが作成されます。 変更が行われるたびに、JavaScriptデータ構造に変更が加えられ、後者が元のデータ構造と比較されます。 その後、最終的な変更が実際のDOMに更新され、ユーザーに変更が表示されます。 これは最適化の点で優れており、安価であり、変更をより高速に行うことができます。
データバインディング
データバインディング機能は、VueJSで使用可能な v-bind と呼ばれるバインディングディレクティブを使用して、HTML属性の値の操作または割り当て、スタイルの変更、クラスの割り当てを支援します。
コンポーネント
コンポーネントは、HTMLで再利用できるカスタム要素の作成を支援するVueJSの重要な機能の1つです。
イベント処理
*v-on* は、VueJSでイベントをリッスンするためにDOM要素に追加される属性です。アニメーション/トランジション
VueJSは、DOMに追加/更新または削除されたHTML要素に遷移を適用するさまざまな方法を提供します。 VueJSには、移行効果のために要素をラップする必要がある組み込みの移行コンポーネントがあります。 サードパーティのアニメーションライブラリを簡単に追加でき、インターフェイスに対話性を追加することもできます。
計算プロパティ
これは、VueJSの重要な機能の1つです。 UI要素に加えられた変更をリッスンし、必要な計算を実行するのに役立ちます。 これのために追加のコーディングの必要はありません。
テンプレート
VueJSは、DOMをVueインスタンスデータにバインドするHTMLベースのテンプレートを提供します。 Vueはテンプレートを仮想DOMレンダリング関数にコンパイルします。 レンダリング関数のテンプレートを使用できます。テンプレートをレンダリング関数に置き換える必要があります。
指令
VueJSには、v-if、v-else、v-show、v-on、v-bind、v-modelなどの組み込みディレクティブがあり、フロントエンドでさまざまなアクションを実行するために使用されます。
ウォッチャー
ウォッチャーは、変化するデータに適用されます。 たとえば、フォーム入力要素。 ここでは、イベントを追加する必要はありません。 Watcherは、データの変更を処理し、コードを簡単かつ高速にします。
ルーティング
ページ間のナビゲーションは、vue-routerを使用して実行されます。
軽量
VueJSスクリプトは非常に軽量であり、パフォーマンスも非常に高速です。
Vue-CLI
VueJSは、vue-cliコマンドラインインターフェイスを使用してコマンドラインにインストールできます。 vue-cliを使用してプロジェクトを簡単にビルドおよびコンパイルできます。
他のフレームワークとの比較
次に、VueJSとReact、Angular、Ember、Knockout、Polymerなどの他のフレームワークを比較してみましょう。
VueJS v/s React
- 仮想DOM *
仮想DOMは、DOMツリーの仮想表現です。 仮想DOMを使用すると、実際のDOMと同じJavaScriptオブジェクトが作成されます。 DOMに変更を加える必要があるたびに、新しいJavaScriptオブジェクトが作成され、変更が行われます。 後で、両方のJavaScriptオブジェクトが比較され、最終的な変更が実際のDOMで更新されます。
VueJSとReactはどちらも仮想DOMを使用するため、高速になります。
- テンプレートv/s JSX *
VueJSはhtml、js、cssを個別に使用します。 VueJSスタイルを理解し、採用するのは初心者にとって非常に簡単です。 VueJSのテンプレートベースのアプローチは非常に簡単です。
Reactはjsxアプローチを使用します。 すべてがReactJS用のJavaScriptです。 HTMLとCSSはすべてJavaScriptの一部です。
インストールツール
Reactは create react app を使用し、VueJSは vue-cli/CDN/npm を使用します。 どちらも非常に使いやすく、プロジェクトはすべての基本的な要件でセットアップされています。 Reactはビルドにwebpackを必要としますが、VueJSは必要ありません。 cdnライブラリを使用して、jsfiddleまたはcodepenの任意の場所でVueJSコーディングを開始できます。
人気
ReactはVueJSよりも人気があります。 Reactの雇用機会はVueJSだけではありません。 Reactの背後には大きな名前があります。 より人気のあるFacebook。 ReactはJavaScriptのコアコンセプトを使用しているため、JavaScriptのベストプラクティスを使用しています。 Reactで作業する人は、すべてのJavaScriptの概念に間違いなく非常に優れているでしょう。
VueJSは開発中のフレームワークです。 現在、VueJSでの雇用機会はReactに比べて少ないです。 調査によると、多くの人がVueJSに適応しているため、ReactやAngularと比較して人気が出ています。 VueJSのさまざまな機能に取り組んでいる優れたコミュニティがあります。 vue-routerは、定期的に更新されるこのコミュニティによって管理されています。
VueJSは、AngularおよびReactの優れた部分を活用し、強力なライブラリを構築しました。 VueJSは、軽量なライブラリのため、React/Angularと比べてはるかに高速です。
VueJS v/s Angular
類似性
VueJSには、Angularと多くの類似点があります。 v-if、v-forなどのディレクティブは、AngularのngIf、ngForとほぼ同じです。 どちらも、プロジェクトのインストールとビルドのためのコマンドラインインターフェイスを備えています。 VueJSはVue-cliを使用し、Angularはangle-cliを使用します。 どちらも双方向のデータバインディング、サーバー側レンダリングなどを提供します。
複雑
Vuejsの学習と開始は非常に簡単です。 前に説明したように、初心者はVueJSのCDNライブラリを使用して、codepenとjsfiddleで始めることができます。
Angularの場合、インストールのための一連の手順を実行する必要があり、初心者がAngularを使い始めるのはほとんど困難ではありません。 コーディングにTypeScriptを使用しますが、これはJavaScriptのコアバックグラウンドから来た人には困難です。 ただし、JavaおよびC＃のバックグラウンドに属しているユーザーにとっては簡単に習得できます。
パフォーマンス
パフォーマンスを決定するのは、ユーザー次第です。 VueJSファイルのサイズは、Angularよりもはるかに軽いです。 フレームワークのパフォーマンスの比較は、次のリンクで提供されていますhttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/tablel
人気
現在、AngularはVueJSよりも人気があります。 多くの組織がAngularを使用しており、非常に人気があります。 雇用機会は、Angularで経験した候補者にとっても多くあります。 ただし、VueJSは市場での地位を占めており、AngularおよびReactの優れた競争相手と見なすことができます。
依存関係
Angularは多くの組み込み機能を提供します。 @ angular/animations、@ angular/formなど、必要なモジュールをインポートして開始する必要があります。
VueJSには、Angularのようにすべての組み込み機能がないため、サードパーティのライブラリに依存して作業する必要があります。
柔軟性
VueJSは、他の大きなプロジェクトと問題なく簡単にマージできます。 Angularは、他の既存のプロジェクトで作業を開始するのはそれほど簡単ではありません。
下位互換性
AngularJS、Angular2、そして現在はAngular4がありました。 AngularJSとAngular2には大きな違いがあります。 AngularJSで開発されたプロジェクトアプリケーションは、コアの違いにより、Angular2に変換できません。
VueJSの最新バージョンは2.0であり、下位互換性があります。 優れたドキュメントを提供し、非常に理解しやすいです。
タイプスクリプト
AngularはコーディングにTypeScriptを使用します。 ユーザーがAngularを使い始めるには、Typescriptの知識が必要です。 ただし、cdfライブラリを使用して、jsfiddleまたはcodepenの任意の場所でVueJSコーディングを開始できます。 最初から非常に簡単な標準のJavaScriptを使用できます。
VueJS v/s Ember
類似性
Emberは、Emberコマンドラインツールを提供します。 Emberプロジェクトの簡単なインストールとコンパイルのためのember-cli。
VueJSには、プロジェクトを開始およびビルドするためのコマンドラインツールvue-cliもあります。
どちらにもルーター、テンプレート、コンポーネントなどの機能があり、UIフレームワークとして非常に充実しています。
パフォーマンス
VueJSはEmberと比較してパフォーマンスが優れています。 Emberは、再レンダリングのパフォーマンスを向上させる目的で、かすかなレンダリングエンジンを追加しました。これは、仮想DOMを使用したVueJSおよびReactと同様の概念です。 ただし、VueJSのパフォーマンスはEmberに比べて優れています。
VueJS v/sノックアウト
Knockoutは、優れたブラウザーサポートを提供します。 IEの下位バージョンではサポートされていますが、VueJSはIE8以下ではサポートされていません。 ノックアウトの開発は時間が経つにつれて遅くなりました。 最近では同じものにはあまり人気がありません。
一方、VueJSは、Vueチームが定期的に更新を提供することで人気を集め始めています。
VueJS v/sポリマー
ポリマーライブラリはGoogleによって開発されました。 Google I/O、Google Earth、Google Play Musicなど、多くのGoogleプロジェクトで使用されています。 VueJSと同様のデータバインディングと計算されたプロパティを提供します。
Polymerカスタム要素の定義は、プレーンなJavaScript/CSS、要素プロパティ、ライフサイクルコールバック、およびJavaScriptメソッドで構成されます。 これに対して、VueJSではJavaScript/htmlとCSSを簡単に使用できます。
PolymerはWebコンポーネント機能を使用し、ブラウザーのポリフィルを必要としますが、これらの機能はサポートしていません。 VueJSにはそのような依存関係はなく、IE9 +のすべてのブラウザーで正常に動作します。
VueJS-環境設定
VueJSをインストールする方法はたくさんあります。 インストールの実行方法に関するいくつかの方法については、先に説明します。
HTMLファイルで直接<script>タグを使用する
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body></body>
</html>VueJSのホームサイト* [[1]] 使用するバージョンは2つあります-製造バージョンと開発バージョンです。 次のスクリーンショットに示すように、開発バージョンは最小化されていませんが、製品バージョンは最小化されています。 開発バージョンは、プロジェクトの開発中の警告とデバッグモードに役立ちます。
CDNを使用する
CDNライブラリのVueJSファイルの使用を開始することもできます。 リンクhttps://unpkg.com/vueは、VueJSの最新バージョンを提供します。 VueJSは、jsDelivr（https://cdn.jsdelivr.net/npm/vue/dist/vue.js）およびcdnjs（https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js）。
必要に応じてファイルを最後にホストし、VueJS開発を開始できます。
NPMを使用する
VueJSを使用する大規模アプリケーションの場合、npmパッケージを使用してインストールすることをお勧めします。 BrowserifyとWebpackに加えて、開発に役立つその他の必要なツールが付属しています。 以下は、npmを使用してインストールするコマンドです。
npm install vueCLIコマンドラインの使用
VueJSは、vueをインストールしてサーバーのアクティベーションを開始するためのCLIも提供します。 CLIを使用してインストールするには、次のコマンドを使用して実行されるCLIをインストールする必要があります。
npm install --global vue-cli完了すると、VueJSのCLIバージョンが表示されます。 インストールには数分かかります。
+ [email protected]
added 965 packages in 355.414s以下は、Webpackを使用してプロジェクトを作成するコマンドです。
vue init webpack myproject開始するには、次のコマンドを使用します。
cd myproject
npm install
npm run devnpm run devを実行すると、サーバーが起動し、次のスクリーンショットに示すように、ブラウザーで表示されるURLが提供されます。
CLIを使用したプロジェクト構造は次のようになります。
VueJS-はじめに
*Vue* は、ユーザーインターフェイスを構築するためのJavaScriptフレームワークです。 そのコア部分は主にビューレイヤーに焦点を当てており、非常に理解しやすいです。 このチュートリアルで使用するVueのバージョンは2.0です。Vueは基本的にフロントエンド開発用に構築されているため、今後の章では多くのHTML、JavaScript、CSSファイルを扱います。 詳細を理解するために、簡単な例から始めましょう。
この例では、vuejsの開発バージョンを使用します。
例
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>出力
これは、VueJSを使用して作成した最初のアプリです。 上記のコードに見られるように、lファイルの先頭にvue.jsを含めました。
<script type = "text/javascript" src = "js/vue.js"></script>ブラウザに*「私の最初のVueJSタスク」*を印刷する本文に追加されるdivがあります。
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>また、補間にメッセージを追加しました。 \ {\ {}} 。 これはVueJSとやり取りし、ブラウザーにデータを印刷します。 DOMでメッセージの値を取得するには、次のようにvuejsのインスタンスを作成しています-
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})上記のコードスニペットでは、Due要素のIDを取得するVueインスタンスを呼び出しています。 e1：「＃intro」、これはdivのIDです。 「My first VueJS Task」*という値が割り当てられたメッセージのデータがあります。 VueJSはDOMとやり取りし、DOM \ {\ {message}}の値を *’My first VueJS Task’ で変更します。
コンソールでメッセージの値を変更した場合、同じことがブラウザーに反映されます。 たとえば-
コンソールの詳細
上記のコンソールでは、Vueのインスタンスであるvue_detオブジェクトを出力しました。 *「VueJsは面白い」*でメッセージを更新しており、上記のスクリーンショットに見られるように、ブラウザーで同じことがすぐに変更されます。
これは、VueJSとDOMのリンク、およびそれを操作する方法を示す基本的な例にすぎません。 次のいくつかの章では、ディレクティブ、コンポーネント、条件付きループなどについて学習します。
VueJS-インスタンス
VueJSを開始するには、 root Vue Instance と呼ばれるVueのインスタンスを作成する必要があります。
構文
var app = new Vue({
//options
})Vueコンストラクターの一部である必要があるものを理解するために例を見てみましょう。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>vue_instance.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})Vueには、 el というパラメーターがあります。 DOM要素のIDを受け取ります。 上記の例では、IDは*＃vue_det *です。 これは、lに存在するdiv要素のIDです。
<div id = "vue_det"></div>これで、これから行うことはdiv要素に影響し、その外側には何も影響しません。
次に、データオブジェクトを定義しました。 値はfirstname、lastname、およびaddressです。
div内でも同じことが割り当てられます。 例えば、
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>Firstname：\ {\ {firstname}}値は、補間内で置き換えられます。 \ {\ {}}にデータオブジェクトで割り当てられた値、つまり Ria. 姓についても同じことが言えます。
次に、関数mydetailsと戻り値を定義したメソッドがあります。 div内で次のように割り当てられます
<h1>{{mydetails()}}</h1>したがって、\ {\ {}}内で関数mydetailsが呼び出されます。 Vueインスタンスで返される値は、\ {\ {}}内に出力されます。 参照のために出力を確認してください。
出力
次に、主にデータ、テンプレート、マウントする要素、メソッド、コールバックなどのオプションをVueコンストラクターに渡す必要があります。
Vueに渡されるオプションを見てみましょう。
- ＃data *-このタイプのデータはオブジェクトまたは関数です。 Vueは、プロパティをgetter/setterに変換して、リアクティブにします。
オプションでデータがどのように渡されるかを見てみましょう。
例
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"}
//direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
</script>
</body>
</html>出力
*console.log（vm.fname）;*//Rajを出力*console.log（vm。$ data）;* 上記のようにオブジェクト全体を出力します*console.log（vm。$ data.fname）;*//Rajを出力コンポーネントがある場合、次のコードに示すように、関数からデータオブジェクトを参照する必要があります。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"};
//direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
//must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
return _obj
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
</script>
</body>
</html>コンポーネントの場合、データは関数であり、上記のようにVue.extendで使用されます。 データは関数です。 例えば、
data: function () {
return _obj
}コンポーネントのデータを参照するには、そのインスタンスを作成する必要があります。 例えば、
var myComponentInstance = new Component();データから詳細を取得するには、上記の親コンポーネントで行ったのと同じことを行う必要があります。 例えば。
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);以下は、ブラウザに表示される詳細です。
小道具-小道具のタイプは、文字列またはオブジェクトの配列です。 配列ベースまたはオブジェクトベースの構文を取ります。 これらは、親コンポーネントからのデータを受け入れるために使用される属性と言われています。
例1
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})例2
Vue.component('props-demo-advanced', {
props: {
//just type check
height: Number,
//type check plus other validations
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})*propsData* -これは単体テストに使用されます。タイプ-文字列の配列。 たとえば、\ {[key：string]：any}。 Vueインスタンスの作成中に渡す必要があります。
例
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})計算-タイプ：\ {[key：string]：Function | \ {get：Function、set：Function}}
例
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 2 },
computed: {
//get only, just need a function
aSum: function () {
return this.a + 2;
},
//both get and set
aSquare: {
get: function () {
return this.a*this.a;
},
set: function (v) {
this.a = v*2;
}
}
}
})
console.log(vm.aSquare); //-> 4
vm.aSquare = 3;
console.log(vm.a); //-> 6
console.log(vm.aSum);//-> 8
</script>
</body>
</html>Computedには、 aSum と aSquare の2つの関数があります。
関数aSumは this.a + 2 を返すだけです。 関数aSquareの2つの関数 get および set 。
変数vmはVueのインスタンスであり、aSquareおよびaSumを呼び出します。 また、vm.aSquare = 3はaSquareからset関数を呼び出し、vm.aSquareはget関数を呼び出します。 次のスクリーンショットのようなブラウザで出力を確認できます。
メソッド-次のコードに示すように、メソッドはVueインスタンスに含まれます。 Vueオブジェクトを使用して関数にアクセスできます。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 5 },
methods: {
asquare: function () {
this.a *= this.a;
}
}
})
vm.asquare();
console.log(vm.a);//25
</script>
</body>
</html>メソッドはVueコンストラクターの一部です。 Vueオブジェクト* vm.asquare（）を使用してメソッドを呼び出すと、 *a プロパティの値が asquare 関数で更新されます。 aの値が1から25に変更され、同じことが次のブラウザーコンソールに反映されます。
VueJS-テンプレート
前の章で、画面上のテキストコンテンツの形式で出力を取得する方法を学習しました。 この章では、画面上にHTMLテンプレートの形式で出力を取得する方法を学習します。
これを理解するために、例を検討し、ブラウザで出力を確認してみましょう。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div>{{htmlcontent}}</div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>vue_template.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})ここで、ページにhtmlコンテンツを表示するとします。 補間で使用する場合、つまり 二重中括弧を使用すると、ブラウザで取得できます。
変数htmlcontentで指定したのと同じ方法でhtmlコンテンツが表示される場合、これは私たちが望んでいるものではなく、ブラウザーの適切なHTMLコンテンツに表示されるようにする必要があります。
これには、 v-html ディレクティブを使用する必要があります。 v-htmlディレクティブをhtml要素に割り当てると、VueJSはそれをHTMLコンテンツとして出力する必要があることを認識します。 l ファイルにv-htmlディレクティブを追加して、違いを見てみましょう。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>今、私たちはHTMLコンテンツを表示するために二重中括弧を必要とせず、代わりにv-html =” htmlcontent”を使用しました。ここで、htmlcontentは次のように js ファイル内で定義されます-
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})ブラウザでの出力は次のとおりです-
ブラウザーを調べると、コンテンツが .js ファイルで定義されているのと同じ方法で変数* htmlcontentに追加されていることがわかります： "<div> <h1> Vue Js Template </h1> </div> "*。
ブラウザの検査要素を見てみましょう。
DOMにHTMLテンプレートを追加する方法を見てきました。 次に、既存のHTML要素に属性を追加する方法を確認します。
HTMLファイルにイメージタグがあり、Vueの一部であるsrcを割り当てたいと考えてください。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
<img src = "" width = "300" height = "250"/>
</div>
<script type = "text/javascript" src = "js/vue_template1.js"></script>
</body>
</html>上記のimgタグを見てください。srcは空白です。 vue jsからsrcを追加する必要があります。 その方法を見てみましょう。 次のように、*。js *ファイルのデータオブジェクトにimg srcを保存します-
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>",
imgsrc : "images/img.jpg"
}
})srcを次のように割り当てると、ブラウザーの出力は次のスクリーンショットのようになります。
<img src = "{{imgsrc}}" width = "300" height = "250"/>壊れた画像を取得します。 HMTLタグに属性を割り当てるには、 v-bind ディレクティブを使用する必要があります。 v-bindディレクティブを使用して、srcを画像に追加しましょう。
これは、 l ファイルでの割り当て方法です。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
<img v-bind:src = "imgsrc" width = "300" height = "250"/>
</div>
<script type = "text/javascript" src = "js/vue_template1.js"></script>
</body>
</html>srcの前に v-bind：src =” imgsrc” を、変数の名前にsrcを付ける必要があります。
以下はブラウザの出力です。
v-bindでsrcがどのように見えるかを調べて確認しましょう。
上のスクリーンショットに見られるように、srcはvuejsプロパティなしで割り当てられます。
VueJS-コンポーネント
- Vueコンポーネント*は、HTMLで再利用できるカスタム要素を作成するVueJSの重要な機能の1つです。
サンプルを使用してコンポーネントを作成してみましょう。これにより、コンポーネントがVueJSでどのように機能するかをより深く理解できます。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>*vue_component.js*Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});lファイルでは、ID component_test と component_test1 の2つのdivを作成しました。 上記の .js ファイルでは、2つのVueインスタンスがdiv idで作成されます。 両方のビューインスタンスで使用される共通コンポーネントを作成しました。
コンポーネントを作成するための構文は次のとおりです。
Vue.component('nameofthecomponent',{//options});コンポーネントが作成されると、コンポーネントの名前がカスタム要素になり、作成されたVueインスタンス要素で同じ要素を使用できます。 IDが component_test および component_test1 のdiv内。
*.js* ファイルでは、テストコンポーネントをコンポーネントの名前として使用しており、同じ名前がdiv内のカスタム要素として使用されています。例
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>*.js* ファイルで作成されたコンポーネントに、HTMLコードを割り当てたテンプレートを追加しました。 これは、グローバルコンポーネントを登録する方法です*。これは、次のスクリプトに示すように、vueインスタンスの一部にすることができます。Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});実行時に、同じことがブラウザに反映されます。
コンポーネントには、カスタム要素タグ、つまり <testcomponent> </testcomponent> 。 ただし、ブラウザで同じものを検査しても、次のスクリーンショットに示すように、テンプレートにプレーンHTMLのカスタムタグが存在することはわかりません。
また、次のスクリプトに示すように、コンポーネントを直接vueインスタンスの一部にしました。
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});これは*ローカル登録*と呼ばれ、コンポーネントは作成されたvueインスタンスのみの一部になります。
これまで、基本的なオプションを備えた基本的なコンポーネントを見てきました。 次に、データやメソッドなどのオプションを追加します。 Vueインスタンスにデータとメソッドがあるように、コンポーネントも同じものを共有します。 したがって、データとメソッドで既に見たコードを拡張します。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>*vue_component.js*Vue.component('testcomponent',{
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
data: function() {
return {
name : "Ria"
}
},
methods:{
changename : function() {
this.name = "Ben";
},
originalname: function() {
this.name = "Ria";
}
}
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});上記の .js ファイルに、オブジェクトを返す関数であるデータを追加しました。 オブジェクトには名前プロパティがあり、値「Ria」が割り当てられています。 これは、次のテンプレートで使用されます。
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',データをコンポーネントの関数として持っているにもかかわらず、直接Vueインスタンスで使用するのと同じ方法でそのプロパティを使用できます。 また、changenameとoriginalnameの2つのメソッドが追加されています。 changenameでは、nameプロパティを変更しています。originalnameでは、元の名前にリセットしています。
また、divにmouseoverとmouseoutの2つのイベントを追加しました。 イベントの詳細については、イベントの章で説明します。 そのため、現時点では、mouseoverは changename メソッドを呼び出し、mouseoutは originalname メソッドを呼び出します。
同じ表示が次のブラウザに表示されます。
上記のブラウザに見られるように、データプロパティで割り当てられた名前が表示されますが、これは同じ名前です。 また、divのmouseoverイベントとmouseoutを割り当てました。 マウスオーバーとマウスアウトで何が起こるか見てみましょう。
マウスオーバーすると、最初のコンポーネントの名前がBenに変更されますが、2番目のコンポーネントはそのまま残ります。 これは、データコンポーネントが関数であり、オブジェクトを返すためです。 したがって、ある場所で変更されても、他の場合は同じものは上書きされません。
動的コンポーネント
動的コンポーネントは、キーワード <component> </component> を使用して作成され、次の例に示すようにプロパティを使用してバインドされます。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<component v-bind:is = "view"></component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
</script>
</body>
</html>出力
動的コンポーネントは、次の構文を使用して作成されます。
<component v-bind:is = "view"></component>v-bind：is =” view”があり、それに値ビューが割り当てられています。 ビューは、Vueインスタンスで次のように定義されます。
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});実行されると、テンプレート Dynamic Component がブラウザに表示されます。 計算されたプロパティを使用して、ビューに表示されているプロパティをすばやく計算できます。 これらの計算はキャッシュされ、必要な場合にのみ更新されます。
Vueには、ビューの値を設定する方法が複数あります。 これには、データ値をビューに直接バインドする式を使用するか、フィルターを使用してコンテンツに対して単純な変換を行うことが含まれます。 これに加えて、計算されたプロパティを使用して、データモデルの値または値のセットに基づいて表示値を計算できます。
計算されたプロパティ
計算されたプロパティを使用すると、モデル固有の複雑な値をビューに対して計算できます。 これらの値は依存関係の値にバインドされ、必要な場合にのみ更新されます。
たとえば、データモデルに一連のサブジェクト結果を含めることができます。
data() {
return {
results: [
{
name: 'English',
marks: 70
},
{
name: 'Math',
marks: 80
},
{
name: 'History',
marks: 90
}
]
}
}
すべてのサブジェクトの合計を表示するとします。 このタスクにはフィルターまたは式を使用できません。
- Filters は、単純なデータフォーマットに使用され、アプリケーションの複数の場所で必要になります。
- Expressions では、フロー操作やその他の複雑なロジックを使用できません。 それらは単純に保つ必要があります。
ここで、計算されたプロパティが役立ちます。 次のように、計算された値をモデルに追加できます。
computed: {
totalMarks: function() {
let total = 0;
for(let i = 0; i < this.results.length; i++){
total += parseInt(this.results[i].marks);
}
return total;
}
}
totalMarks計算プロパティは、results配列を使用して合計マークを計算します。 値をループして、小計を返します。
次に、計算された値をビューに表示できます。
<div id="app">
<div v-for="subject in results">
<input v-model="subject.marks">
<span>
Marks for {{ subject.title }}: {{ subject.marks }}
</span>
</div>
<span>
Total marks are: {{ totalMarks }}
</span>
</div>
計算されたプロパティとメソッド？
合計を出力するメソッドを使用しても、同じ結果を得ることができます。
計算されたセクションにtotalMarks関数を含める代わりに、メソッドに移動し、ビューでテンプレートを変更してメソッドを実行できます。
<span>
Total marks are: {{ totalMarks() }}
</span>
これは同じ出力を提供しますが、パフォーマンスに影響を与えています。 この構文を使用すると、totalMarks()メソッドは、ページがレンダリングされるたびに（つまり、変更されるたびに）実行されます。
代わりに計算されたプロパティがある場合、Vueは計算されたプロパティが依存している値を記憶します（例：前の例では、resultsになります）。 そうすることで、Vueは依存関係が変更された場合にのみ値を計算できます。 それ以外の場合は、以前にキャッシュされた値が返されます。
このため、関数は純粋関数である必要があります。 副作用はありません。 出力は、関数に渡された値にのみ依存する必要があります。
計算されたセッター
デフォルトでは、計算されたプロパティはゲッターのみを表示します。 しかし、セッターを持つことも可能です。
computed: {
fullName: {
get: function() {
return this.firstName + this.lastName;
},
set: function(value) {
let names = value.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
ゲッターとセッターの両方を使用することで、入力値をモデルに正しくバインドできます。 メソッドにfullNameを設定すると、渡された文字列は名前と名前に分割されます。
ウォッチャーに関する一言
ほとんどの場合、計算されたプロパティで十分ですが、ウォッチャーは、プロパティへの変更をリッスンできるようにすることで、追加レベルの制御を提供します。
ウォッチャーは、その名前が示すように、モデルオブジェクトの変更を監視することを可能にします。 ウォッチャーを使用して計算値と同じ結果を得ることができますが、多くの場合、より複雑で高価です。
ウォッチャーは、次のようなより複雑な要件に使用できます。
- 非同期操作
- 中間値の設定
- 操作が呼び出される回数を制限する（例：入力イベントをデバウンスする）
VueJS-ウォッチプロパティ
この章では、Watchプロパティについて学習します。 例を使用して、VueJSでWatchプロパティを使用できることがわかります。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
Kilometers : <input type = "text" v-model = "kilometers">
Meters : <input type = "text" v-model = "meters">
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/1000;
this.meters = val;
}
}
});
</script>
</body>
</html>上記のコードでは、2つのテキストボックスを作成しました。1つは*キロメートル*、もう1つは*メートル*です。 データプロパティでは、キロメートルとメートルは0に初期化されます。 2つの関数 kilometers および meters で作成された監視オブジェクトがあります。 両方の機能で、キロメートルからメートルへ、およびメートルからキロメートルへの変換が行われます。
いずれかのtexboxに値を入力すると、どちらが変更されても、Watchは両方のテキストボックスの更新を処理します。 イベントを特別に割り当てて、それが変更され、検証の追加作業を行うのを待つ必要はありません。 Watchは、それぞれの関数で行われた計算でテキストボックスを更新します。
ブラウザの出力を見てみましょう。
キロメートルテキストボックスに値を入力して、メーターテキストボックスで値が変化するのを見てみましょう。
メートルのテキストボックスに入力して、キロメートルのテキストボックスで変化を見てみましょう。 これはブラウザに表示される表示です。
VueJS-バインディング
この章では、VueJSで使用可能な v-bind と呼ばれるバインディングディレクティブを使用して、HTML属性の値を操作または割り当てる方法、スタイルを変更する方法、およびクラスを割り当てる方法を学習します。
データバインドにv-bindディレクティブを使用する必要がある理由とタイミングを理解するための例を考えてみましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
{{title}}<br/>
<a href = "hreflink" target = "_blank"> Click Me </a> <br/>
<a href = "{{hreflink}}" target = "_blank">Click Me </a> <br/>
<a v-bind:href = "hreflink" target = "_blank">Click Me </a> <br/>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "DATA BINDING",
hreflink : "http://www.google.com"
}
});
</script>
</body>
</html>上記の例では、タイトル変数と3つのアンカーリンクを表示しています。 また、データオブジェクトからhrefに値を割り当てました。
これで、ブラウザで出力を確認して調べると、次のスクリーンショットに示すように、最初の2つのアンカーリンクにhrefが正しくないことがわかります。
最初のclickmeはhrefをhreflinkとして表示し、2番目のclickmeはそれを\ {\ {hreflink}}に表示し、最後のclickmeは必要に応じて正しいURLを表示します。
したがって、HTML属性に値を割り当てるには、次のようにディレクティブv-bindで値をバインドする必要があります。
<a v-bind:href = "hreflink" target = "_blank">Click Me </a>VueJSは、次のようにv-bindの省略形も提供します。
<a :href = "hreflink" target = "_blank">Click Me </a>ブラウザにinspect要素が表示される場合、アンカータグにはv-bind属性は表示されませんが、プレーンHTMLは表示されます。 DOMを検査すると、VueJSプロパティは表示されません。
HTMLクラスのバインド
HTMLクラスをバインドするには、 v-bind：class を使用する必要があります。 例について考えて、クラスをバインドしてみましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.active {
background: red;
}
</style>
<div id = "classbinding">
<div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "CLASS BINDING",
isactive : true
}
});
</script>
</body>
</html>v-bind：class =” \ {active：isactive}”で作成されたdivがあります。
ここで、 isactive はtrueまたはfalseに基づく変数です。 divにアクティブなクラスを適用します。 データオブジェクトでは、isactive変数をtrueとして割り当てています。 背景色が赤の .active スタイルで定義されたクラスがあります。
変数isactiveがtrueの場合、そうでない場合は色が適用されます。 以下は、ブラウザでの出力です。
上記の表示では、背景色が赤であることがわかります。 class =” active”がdivに適用されます。
次に、変数の値をfalseに変更して、出力を確認します。 次のコードに示すように、変数isactiveはfalseに変更されます。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.active {
background: red;
}
</style>
<div id = "classbinding">
<div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "CLASS BINDING",
isactive : false
}
});
</script>
</body>
</html>上記の表示では、アクティブクラスがdivに適用されていないことがわかります。
v-bind属性を使用して、HTMLタグに複数のクラスを割り当てることもできます。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<div class = "info" v-bind:class = "{ active: isActive, 'displayError': hasError }">
{{title}}
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
isActive : false,
hasError : false
}
});
</script>
</body>
</html>上記のコードのdivには、通常のクラス、例class =” info”を適用しました。 isActiveおよびhasError変数に基づいて、他のクラスがdivに適用されます。
出力
これは通常のクラスに適用されます。 両方の変数は現在偽です。 isActive 変数をtrueにして出力を見てみましょう。
上記の表示では、DOMで、divに割り当てられた2つのクラス、infoおよびactiveを確認できます。 hasError変数をtrueに、isActiveをfalseにしましょう。
さて、上の表示で見ると、infoとdisplayErrorクラスがdivに適用されています。 これは、条件に基づいて複数のクラスを適用する方法です。
クラスを配列として渡すこともできます。 これを理解するために例を挙げましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError'
}
});
</script>
</body>
</html>出力
上記のように、両方のクラスがdivに適用されます。 変数を使用して、変数の値に基づいてクラスを割り当てましょう。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError',
isActive : true,
haserror : false
}
});
</script>
</body>
</html>次のdivタグに示すように、2つの変数 isActive および haserror を使用しており、クラスバインディング中にdivに同じ変数が使用されています。
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>isActiveがtrueの場合、infoclassがそれに割り当てられます。 haserrorについても同様です。trueの場合、errorClassのみが適用されます。
ここで、haserror変数をtrueに、isActive変数をfalseにしましょう。
コンポーネントのクラスにv-bindを追加します。 次の例では、コンポーネントテンプレートとコンポーネントにクラスを追加しました。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<new_component class = "active"></new_component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError',
isActive : false,
haserror : true
},
components:{
'new_component' : {
template : '<div class = "info">Class Binding for component</div>'
}
}
});
</script>
</body>
</html>以下はブラウザの出力です。 両方のクラスを最終divに適用します。
<div class = ”info active”></div>true/falseに基づいて、表示するコンポーネントセクションに変数を追加します。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<new_component v-bind:class = "{active:isActive}"></new_component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError',
isActive : false,
haserror : true
},
components:{
'new_component' : {
template : '<div class = "info">Class Binding for component</div>'
}
}
});
</script>
</body>
</html>変数はfalseであるため、アクティブクラスは適用されず、次のスクリーンショットに示すように情報クラスが適用されます。
インラインスタイルのバインド
オブジェクト構文
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding",
activeColor: 'red',
fontSize :'30'
}
});
</script>
</body>
</html>出力
上記の例では、divに対してスタイルが適用され、データオブジェクトからデータがフェッチされます。
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
title : "Inline style Binding",
activeColor: 'red',
fontSize :'30'
}また、すべての値を変数に割り当ててから、その変数をdivに割り当てることでも同じことができます。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "styleobj">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding",
styleobj : {
color: 'red',
fontSize :'40px'
}
}
});
</script>
</body>
</html>色とfontSizeはstyleobjというオブジェクトに割り当てられ、同じものがdivに割り当てられます。
<div v-bind:style = "styleobj">{{title}}</div>出力
フォーム入力バインディング
これまでに作成した例では、入力されたテキスト要素と割り当てられた変数にバインドされた値をバインドするv-modelを見てきました。 このセクションで詳しく説明します。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3>TEXTBOX</h3>
<input v-model = "name" placeholder = "Enter Name"/>
<h3>Name entered is : {{name}}</h3>
<hr/>
<h3>Textarea</h3>
<textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
<h1><p>{{textmessage}}</p></h1>
<hr/>
<h3>Checkbox</h3>
<input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
textmessage:'',
checked : false
}
});
</script>
</body>
</html>texboxに入力したものはすべて下に表示されます。 v-modelには値nameが割り当てられ、名前は\ {\ {name}}に表示され、テキストボックスに入力されたものがすべて表示されます。
出力
いくつかの例とその使用方法を確認してみましょう。
ラジオとセレクト
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3>Radio</h3>
<input type = "radio" id = "black" value = "Black" v-model = "picked">Black
<input type = "radio" id = "white" value = "White" v-model = "picked">White
<h3>Radio element clicked : {{picked}} </h3>
<hr/>
<h3>Select</h3>
<select v-model = "languages">
<option disabled value = "">Please select one</option>
<option>Java</option>
<option>Javascript</option>
<option>Php</option>
<option>C</option>
<option>C++</option>
</select>
<h3>Languages Selected is : {{ languages }}</h3>
<hr/>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
picked : 'White',
languages : "Java"
}
});
</script>
</body>
</html>出力
修飾子
例では、トリム、数値、レイジーの3つの修飾子を使用しました。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
<br/>
<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
<h3>Display Message : {{msg}}</h3>
<br/>
<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
<h3>Display Message : {{message}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
age : 0,
msg: '',
message : ''
}
});
</script>
</body>
</html>出力
- 番号修飾子*では、数字のみを入力できます。 数字以外の入力は受け付けません。
<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">*Lazy modifier* は、完全に入力され、ユーザーがテキストボックスを離れると、テキストボックスに存在するコンテンツを表示します。<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">*Trim modifier* は、先頭と末尾に入力されたスペースを削除します。<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">Vue.jsを使用すると、ユーザーによってトリガーされたイベントを処理できます。 イベントの処理は、ユーザーの入力に応答することにより、Webアプリに対話性を追加するのに役立ちます。 Vueは、これらのイベントを処理するためのv-onディレクティブを提供します。
v-on
ユーザーがビューを操作すると、クリックやキーアップなどのDOMでイベントがトリガーされる可能性があります。 v-on ディレクティブを使用して、これらのイベントを処理できます。
簡単な例として、ユーザーがボタンをクリックするたびにインクリメントするカウンターを実装できます。 データモデルでカウンターをゼロに初期化することから始めましょう。
data() {
return {
count: 0
}
}
ビューでは、ボタンがクリックされたときに実行するメソッドを定義できます。
<label>Count is: {{count}}</label>
<button v-on:click="count++">Increment</button>
v-on は、button要素でclickイベントがトリガーされたときに指定された式またはメソッドをトリガーします。
この例では、countの値が1つ増えます。
メソッドをv-onにバインドする
名前を使用してメソッドをイベントにバインドできます。
<input v-model="addValue"> <button v-on:click="addToCount">Add</button>
テンプレートで指定されたメソッドaddToCountは、モデルで次のように定義できます。
methods: {
addToCount: function() {
this.count = this.count + parseInt(this.addValue);
}
}
addToCountメソッドは、addValueから入力を受け取り、それをカウントに追加します。
v-onの省略形
v-on：構文を使用してイベントを宣言する代わりに、@記号を使用できます。
<button @click="addToCount">Add</button>
イベント修飾子
イベントを処理するときに行われる頻繁に使用される呼び出しがあります。 Vueは、修飾子を使用してこれらを簡単に実装できるようにしました。
たとえば、event.preventDefault()は、ブラウザのデフォルトの動作を防ぐためにイベントを処理するときによく呼び出されます。
これらをメソッドに書き出す代わりに、vue-onディレクティブで提供される修飾子を使用できます。
<a href="test" @click.prevent="addToCount">Add</a>
上記のコードサンプルは、aタグのデフォルトの動作を削除し、addToCountメソッドを呼び出すだけです。 修飾子を追加しなかった場合、ページはhref属性で定義されたパスにリダイレクトしようとします。
Vueでは次の修飾子を使用できます。
- stop-イベントがDOMツリーをバブリングするのを防ぎます
- prevent-デフォルトの動作を防止します
- caption-キャプチャモードはイベント処理に使用されます
- self-イベントのターゲットがそれ自体である場合にのみトリガーします
- once-関数を最大1回実行します
キー修飾子
イベント修飾子と同様に、keyupなどのキー関連のイベントを処理するときに特定のキーをリッスンできるキー修飾子を追加できます。
<input v-on:keyup.13="addToCount" v-model="addValue">
上記の例では、 keyupイベントが13（エンターキー）のキーコードで発生すると、addToCountメソッドが呼び出されます。
すべてのキーコードを覚えるのは難しいため、Vueには事前定義されたキーのセットが用意されています。 例としては、 enter 、 tab 、 delete 、 esc 、 space 、leftがあります。 。
また、次のようにキーコードの独自のエイリアスを設定することもできます。
Vue.config.keyCodes.a = 65
VueJS-レンダリング
この章では、条件付きレンダリングとリストレンダリングについて学習します。 条件付きレンダリングでは、if、if-else、if-else-if、showなどの使用について説明します。 リストのレンダリングでは、forループの使用方法について説明します。
条件付きレンダリング
始めに、条件付きレンダリングの詳細を説明するための例に取り掛かりましょう。 条件付きレンダリングでは、条件が満たされ、if、if-else、if-else-if、showなどの助けを借りて条件チェックが行われたときにのみ出力したい
v-if
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>出力
上の例では、メッセージとボタンと2つのh1タグを作成しました。
showという変数が宣言され、値trueに初期化されます。 ボタンの近くに表示されます。 ボタンをクリックすると、変数showの値を切り替えるメソッド showdata が呼び出されます。 これは、ボタンをクリックすると、変数showの値がtrueからfalseおよびfalseからtrueに変わることを意味します。
次のコードスニペットに示すように、h1タグにifを割り当てました。
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>これで、変数showの値がチェックされ、trueの場合はh1タグが表示されます。 ボタンをクリックしてブラウザで表示します。show変数の値がfalseに変更されると、ブラウザにはh1タグが表示されません。 show変数がtrueの場合にのみ表示されます。
以下はブラウザでの表示です。
ブラウザでチェックインすると、これはshowがfalseのときに得られるものです。
変数showがfalseに設定されている場合、h1タグはDOMから削除されます。
これは、変数がtrueのときに表示されるものです。 変数showがtrueに設定されると、h1タグがDOMに再び追加されます。
v-else
次の例では、2番目のh1タグにv-elseを追加しました。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>v-elseは、次のコードスニペットを使用して追加されます。
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>ここで、showがtrueの場合*「これはh1タグです」が表示され、falseの場合は「これはh2タグです」*が表示されます。 これはブラウザで取得するものです。
上記の表示は、show変数がtrueの場合です。 v-elseを追加したため、2番目のステートメントは存在しません。 ボタンをクリックすると、show変数がfalseになり、次のスクリーンショットに示すように2番目のステートメントが表示されます。
v-show
v-showはv-ifと同じように動作します。 また、割り当てられた条件に基づいて要素を表示および非表示にします。 v-ifとv-showの違いは、条件がfalseの場合、v-ifがDOMからHTML要素を削除し、条件がtrueの場合にそれを追加し直すことです。 一方、display：noneで条件がfalseの場合、v-showは要素を非表示にします。 条件が真の場合、要素を表示します。 したがって、要素は常にdomに存在します。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
<div v-show = "show">
<b>V-Show:</b>
<img src = "images/img.jpg" width = "100" height = "100"/>
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>v-showは、次のコードスニペットを使用してHTML要素に割り当てられます。
<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100"/></div>同じ変数showを使用し、true/falseであることに基づいて、画像がブラウザに表示されます。
ここで、変数showがtrueであるため、画像は上のスクリーンショットに表示されているとおりです。 ボタンをクリックして表示を見てみましょう。
変数showはfalseであるため、画像は非表示になります。 要素を調べて見ると、divは画像とともにDOMの一部であり、styleプロパティが表示されています：上記のスクリーンショットでは表示されていません。
リストのレンダリング
v-for
v-forディレクティブを使用したリストのレンダリングについて説明します。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>itemsという変数は、配列として宣言されます。 メソッドには、 showinputvalue というメソッドがあります。これは、果物の名前を受け取る入力ボックスに割り当てられます。 このメソッドでは、次のコードを使用して、テキストボックス内に入力されたフルーツが配列に追加されます。
showinputvalue : function(event) {
this.items.push(event.target.value);
}次のコードのように入力されたフルーツを表示するためにv-forを使用しました。 V-forは、配列に存在する値を反復処理するのに役立ちます。
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>forループを使用して配列を反復処理するには、v-for =” a in items”を使用する必要があります。ここで、aは配列の値を保持し、すべての項目が完了するまで表示されます。
出力
以下はブラウザの出力です。
アイテムを検査すると、これがブラウザに表示されます。 DOMには、li要素に対するv-forディレクティブはありません。 VueJSディレクティブなしでDOMを表示します。
配列のインデックスを表示する場合は、次のコードを使用して行います。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>インデックスを取得するために、次のコードに示すように、ブラケットにもう1つの変数を追加しました。
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>（a、index）では、 a は値で、 index はキーです。 ブラウザの表示は、次のスクリーンショットのようになります。 したがって、インデックスを使用して、特定の値を表示できます。
VueJS-移行とアニメーション
この章では、VueJSで利用可能な遷移およびアニメーション機能について説明します。
遷移
VueJSは、DOMで追加/更新されたHTML要素に遷移を適用するさまざまな方法を提供します。 VueJSには、移行が必要な要素をラップする必要がある組み込みの移行コンポーネントがあります。
構文
<transition name = "nameoftransition">
<div></div>
</transition>移行の仕組みを理解するための例を考えてみましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to/*.fade-leave-active below version 2.1.8*/{
opacity: 0
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
});
</script>
</body>
</html>変数showの値をtrueからfalseに、またはその逆に変更できるclickmeというボタンが作成されます。 変数がtrueの場合にのみテキスト要素を表示する* pタグ*があります。 次のコードに示すように、pタグを遷移要素でラップしました。
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>遷移の名前は fade です。 VueJSは、遷移用の標準クラスをいくつか提供し、クラスには遷移の名前がプレフィックスとして付けられます。
以下は、移行のためのいくつかの標準クラスです-
- v-enter -このクラスは、要素が更新/追加される前に最初に呼び出されます。 その開始状態。
- v-enter-active -このクラスは、移行フェーズに入るための遅延、持続時間、およびイージング曲線を定義するために使用されます。 これは全体のアクティブ状態であり、クラスは入力フェーズ全体で利用可能です。
- v-leave -退場遷移がトリガーされたときに追加され、削除されました。
- v-leave-active -離脱フェーズ中に適用されます。 移行が完了すると削除されます。 このクラスは、離脱フェーズ中に遅延、持続時間、およびイージング曲線を適用するために使用されます。
上記の各クラスには、遷移の名前がプレフィックスとして付けられます。 遷移の名前をフェードとして指定しているため、クラスの名前は .fade_enter、.fade_enter_active、.fade_leave、.fade_leave_active になります。
それらは次のコードで定義されています。
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to/*.fade-leave-active below version 2.1.8*/{
opacity: 0
}
</style>fade_enter_activeと.fade_leave_activeは一緒に定義され、開始段階と終了段階で遷移を適用します。 opacityプロパティは2秒で0に変更されます。.
期間は.fade_enter_activeおよび.fade_leave_activeで定義されます。 最終段階は、.fade_enter、.fade_leave_toで定義されます。
ブラウザでの表示は次のとおりです。
ボタンをクリックすると、テキストは2秒で消えます。
2秒後、テキストは完全に消えます。
別の例を考えてみましょう。画像があり、ボタンをクリックするとx軸上に移動します。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to/*.fade-leave-active below version 2.1.8*/{
transform : translateX(100px);
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;"/>
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>遷移の名前は shiftx です。 次のコードを使用して、変換プロパティを使用してx軸上の画像を100pxシフトします。
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to/*.fade-leave-active below version 2.1.8*/{
transform : translateX(100px);
}
</style>出力は以下のとおりです。
次のスクリーンショットに示すように、ボタンをクリックすると、画像は右に100pxシフトします。
アニメーション
アニメーションは、遷移が行われるのと同じ方法で適用されます。 アニメーションには、エフェクトを実行するために宣言する必要があるクラスもあります。
アニメーションがどのように機能するかを確認するための例を考えてみましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;"/>
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>アニメーションを適用するには、遷移と同じクラスがあります。 上記のコードでは、次のコードに示すように、pタグで囲まれた画像があります。
<transition name = "shiftx">
<p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;"/></p>
</transition>遷移の名前は shiftx です。 適用されるクラスは次のとおりです-
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>クラスには、遷移名の接頭辞が付けられます。 shiftx-enter-activeおよび.shiftx-leave-active。 アニメーションは、0％〜100％のキーフレームで定義されます。 次のコードに示すように、各キーフレームで定義された変換があります。
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}出力は以下のとおりです。
ボタンをクリックすると、0から360度まで回転して消えます。
カスタム遷移クラス
VueJSはカスタムクラスのリストを提供し、これを属性としてtransition要素に追加できます。
- エンタークラス
- エンターアクティブクラス
- 休暇クラス
- 離脱アクティブクラス
基本的に、カスタムクラスは、animate.cssなどの外部CSSライブラリを使用するときに機能します。
例
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
<transition
name = "custom-classes-transition"
enter-active-class = "animated swing"
leave-active-class = "animated bounceIn">
<p v-if = "show"><span style = "font-size:25px;">Example</span></p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>出力
出力
出力
上記のコードには2つのアニメーションが適用されています。 1つのenter-active-class =「アニメーション化されたスイング」ともう1つのleave-active-class =「アニメーション化されたbounceIn」。 サードパーティのライブラリから適用されるアニメーションには、カスタムアニメーションクラスを使用しています。
明示的な遷移期間
VueJSを使用して、要素に遷移とアニメーションを適用できます。 Vueは、transionendおよびanimationendイベントがアニメーションまたは遷移が完了したかどうかを検出するのを待ちます。
移行によって遅延が発生する場合があります。 このような場合、次のように期間を明示的に適用できます。
<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>上記のように、transition要素でdurationプロパティを：とともに使用できます。 入場と退場の期間を個別に指定する必要がある場合は、上記のコードのように行うことができます。
JavaScriptフック
遷移クラスは、JavaScriptイベントを使用してメソッドとして呼び出すことができます。 理解を深めるために例を考えてみましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id = "example-4">
<button @click = "show = !show">
<span style = "font-size:25px;">Toggle</span>
</button>
<transition v-on:before-enter = "beforeEnter"
v-on:enter = "enter"
v-on:leave = "leave"
v-bind:css = "false">
<p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
Velocity(el, { fontSize: '10px' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
});
</script>
</body>
</html>出力
上記の例では、transition要素でjsメソッドを使用してアニメーションを実行しています。
移行の方法は次のように適用されます-
<transition v-on:before-enter = "beforeEnter"
v-on:enter = "enter"
v-on:leave = "leave"
v-bind:css = "false">
<p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>*v-on* が追加されたプレフィックスと、メソッドが呼び出されるイベントの名前があります。 メソッドは次のようにVueインスタンスで定義されています-methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
Velocity(el, { fontSize: '10px' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}必要な遷移は、これらの各方法に適用されます。 ボタンのクリック時およびアニメーションの完了時に適用される不透明度アニメーションがあります。 サードパーティのライブラリはアニメーションに使用されます。
遷移v-bind：css = "false"に追加されたプロパティがあります。これは、VueがJavaScript遷移であることを理解するために行われます。
初期レンダリングでの移行
アニメーションを最初に追加するには、遷移要素に「appear」プロパティを追加する必要があります。
よりよく理解するために例を見てみましょう。
例
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated bounceIn">
<h1>BounceIn - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated swing">
<h1>Swing - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated rubberBand">
<h1>RubberBand - Animation Example</h1>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>上記の例では、animate.cssライブラリの3つの異なるアニメーションを使用しています。 トランジション要素にappearを追加しました。
上記のコードを実行すると、ブラウザに次の出力が表示されます。
コンポーネントのアニメーション
次のコードを使用して、コンポーネントの遷移をラップできます。 ここでは動的コンポーネントを使用しました。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
</head>
<body>
<div id = "databinding" style = "text-align:center;">
<transition appear
appear-class = "custom-appear-class"
appear-active-class = "animated wobble">
<component v-bind:is = "view"></component>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-
size:25;color:red;">Animation on Components</span></div>'
}
}
});
</script>
</body>
</html>出力
VueJS-ディレクティブ
ディレクティブは、VueJSが特定の方法で物事を行うための指示です。 v-if、v-show、v-else、v-for、v-bind、v-model、v-onなどのディレクティブはすでに見ています。
この章では、カスタムディレクティブを見ていきます。 コンポーネントに対して行ったのと同様のグローバルディレクティブを作成します。
構文
Vue.directive('nameofthedirective', {
bind(e1, binding, vnode) {
}
})Vue.directiveを使用してディレクティブを作成する必要があります。 上記のディレクティブの名前を取ります。 ディレクティブの動作の詳細を示す例を考えてみましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-changestyle>VueJS Directive</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>この例では、次のコードに示すように、カスタムディレクティブ changestyle を作成しました。
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "30px";
}
});次の変更スタイルをdivに割り当てています。
<div v-changestyle>VueJS Directive</div>ブラウザに表示される場合、テキストVueJsディレクティブが赤色で表示され、フォントサイズが30ピクセルに増加します。
出力
ディレクティブの一部であるbindメソッドを使用しました。 カスタムディレクティブを適用する必要がある要素である3つの引数 e1 を取ります。 バインディングは、カスタムディレクティブに渡される引数のようなものです。 v-changestyle =” \ {color： ’green’}”、ここで緑はバインディング引数で読み込まれ、vnodeは要素、つまり ノード名。
次の例では、すべての引数をコンソールに表示し、それぞれの引数の詳細を示しています。
以下は、カスタムディレクティブに渡される値の例です。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-changestyle = "{color:'green'}">VueJS Directive</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
console.log(binding.value.color);
console.log(vnode);
e1.style.color=binding.value.color;
e1.style.fontSize = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>出力
テキストの色が緑に変わります。 値は、次のコードを使用して渡されます。
<div v-changestyle = "{color:'green'}">VueJS Directive</div>
And it is accessed using the following piece of code.
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
console.log(binding.value.color);
console.log(vnode);
e1.style.color=binding.value.color;
e1.style.fontSize = "30px";
}
});フィルター
VueJSは、テキストの書式設定に役立つフィルターをサポートしています。 v-bindおよび補間（\ {\ {}}）とともに使用されます。 フィルターのJavaScript式の最後にパイプ記号が必要です。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input v-model = "name" placeholder = "Enter Name"/><br/>
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name : ""
},
filters : {
countletters : function(value) {
return value.length;
}
}
});
</script>
</body>
</html>上記の例では、簡単なフィルターカウントレターを作成しました。 Countlettersフィルタは、テキストボックスに入力された文字の数をカウントします。 フィルターを使用するには、次のコードによって、フィルタープロパティを使用し、使用するフィルターを定義する必要があります。
filters : {
countletters : function(value) {
return value.length;
}
}メソッド countletters を定義し、入力された文字列の長さを返します。
ディスプレイでフィルターを使用するには、パイプ演算子とフィルターの名前を使用しました。 カウンター。
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>以下はブラウザでの表示です。
次のコードを使用して、フィルターに引数を渡すこともできます。
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>これで、 countletters には3つのパラメーターがあります。 *メッセージ、a1、およびa2 *。
次のコードを使用して、複数のフィルターを補間に渡すこともできます。
<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>フィルタープロパティでは、 countlettersA および countlettersB が2つのメソッドになり、 countlettersA は詳細を countlettersB に渡します。
VueJS-ルーティング
VueJSには、組み込みのルーター機能がありません。 それをインストールするには、いくつかの追加手順に従う必要があります。
CDNからの直接ダウンロード
vue-routerの最新バージョンは、https://unpkg.com/[email protected]/dist/vue-router.js [[[2]] router.js]
Unpkg.comは、npmベースのcdnリンクを提供します。 上記のリンクは常に最新バージョンに更新されます。 私たちはそれをダウンロードしてホストし、次のようにvue.jsと一緒にスクリプトタグで使用できます-
<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>NPMを使用する
次のコマンドを実行して、vue-routerをインストールします。
npm install vue-routerGitHubを使用する
次のようにGitHubからリポジトリを複製できます-
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run buildvue-router.jsを使用した簡単な例から始めましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
</head>
<body>
<div id = "app">
<h1>Routing Example</h1>
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
const router = new VueRouter({
routes//short for `routes: routes`
});
var vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>出力
ルーティングを開始するには、vue-router.jsファイルを追加する必要があります。 https://unpkg.com/vue-router/dist/vue-router.jsからコードを取得して保存しますファイルvue-router.jsにあります。
スクリプトは次のようにvue.jsの後に追加されます-
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>本体セクションには、次のように定義されたルーターリンクがあります-
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>*<router-link>* は、ユーザーに表示されるHTMLコンテンツに移動するために使用されるコンポーネントです。 toプロパティは宛先、つまり表示されるコンテンツが選択されるソースファイルです。上記のコードでは、2つのルーターリンクを作成しました。
ルータが初期化されるスクリプトセクションを見てください。 次のように作成された2つの定数があります-
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }これらにはテンプレートがあり、ルーターリンクがクリックされたときに表示する必要があります。
次に、routes constがあります。これは、URLに表示されるパスを定義します。
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];ルートはパスとコンポーネントを定義します。 パス、つまり ユーザーがルーターリンクをクリックすると、URLに /route1 が表示されます。
コンポーネントは、表示されるテンプレート名を受け取ります。 ルートからのパスは、プロパティへのルーターリンクと一致する必要があります。
たとえば、<router-link * to =” path here” *> </router-link>
次に、次のコードを使用してVueRouterにインスタンスが作成されます。
const router = new VueRouter({
routes//short for `routes: routes`
});VueRouterコンストラクターは、ルートをパラメーターとして受け取ります。 ルーターオブジェクトは、次のコードを使用してメインvueインスタンスに割り当てられます。
var vm = new Vue({
el: '#app',
router
});サンプルを実行し、ブラウザで表示を確認します。 ルーターリンクを調べて確認すると、次のスクリーンショットに示すように、アクティブな要素にクラスが追加されていることがわかります。
追加されるクラスは class =“ router-link-exact-active router-link-active” です。 アクティブリンクは、上記のスクリーンショットに示すようにクラスを取得します。 注目すべきもう1つの点は、<router-link>がタグとしてレンダリングされることです。
ルーターリンクの小道具
<router-link>に渡されるいくつかのプロパティを見てみましょう。
to
これは、<router-link>に指定された宛先パスです。 クリックすると、toの値が内部的にrouter.push（）に渡されます。 値は文字列または場所オブジェクトである必要があります。 オブジェクトを使用するときは、例えば 2.
e.g. 1: <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
"{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.以下は、たとえば 3.
URLパスでは、name = Teryはクエリ文字列の一部です。 例：http：//localhost/vueexamples/vue_routerl＃/route1？name = Tery
交換する
ルーターリンクに置換を追加すると、* router.push（）の代わりに router.replace（）*が呼び出されます。 置換すると、ナビゲーション履歴は保存されません。
例
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>追加する
<router-link> <router-link>にappendを追加すると、パスが相対になります。
パス/route1のルーターリンクからルーターリンクパス/route2に移動する場合は、ブラウザーに/route1/route2としてパスが表示されます。
例
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>tag
現在、<router-link>はタグとしてレンダリングされます。 他のタグとしてレンダリングしたい場合は、tag =” tagname”を使用して同じことを指定する必要があります。
例
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>タグをspanとして指定しました。これがブラウザに表示されます。
現在表示されているタグは、spanタグです。 ナビゲーションのためにルーターのリンクをクリックすると、クリックが引き続き表示されます。
アクティブクラス
デフォルトでは、ルーターリンクがアクティブなときに追加されるアクティブクラスはrouter-link-activeです。 次のコードに示すように同じものを設定することにより、クラスを上書きできます。
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>使用されるクラスはactive_class =” _active”です。 これは、ブラウザに表示される出力です。
正確にアクティブなクラス
適用されるデフォルトのexactactiveクラスはrouter-link-exact-activeです。 exact-active-classを使用して上書きできます。
例
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>これはブラウザに表示されるものです。
イベント
現在、ルーターリンクのデフォルトのイベントはクリックイベントです。 イベントプロパティを使用して同じように変更できます。
例
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>これで、ルーターリンクにマウスを合わせると、次のブラウザーに示すように移動します。 ルーターリンク1にカーソルを合わせると、ナビゲーションが変化します。
VueJS-ミックスイン
ミックスインは基本的にコンポーネントで使用されます。 コンポーネント間で再利用可能なコードを共有します。 コンポーネントがミックスインを使用する場合、ミックスインのすべてのオプションがコンポーネントオプションの一部になります。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
alert("Welcome to mixin example");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>出力
ミックスインとコンポーネントに重複するオプションが含まれる場合、次の例に示すようにそれらはマージされます。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var mixin = {
created: function () {
console.log('mixin called')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('component called')
}
});
</script>
</body>
</html>これで、ミックスインとvueインスタンスに同じメソッドが作成されました。 これは、コンソールに表示される出力です。 ご覧のとおり、vueとmixinのオプションはマージされます。
メソッドに同じ関数名がある場合、メインのvueインスタンスが優先されます。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var mixin = {
methods: {
hellworld: function () {
console.log('In HelloWorld');
},
samemethod: function () {
console.log('Mixin:Same Method');
}
}
};
var vm = new Vue({
mixins: [mixin],
methods: {
start: function () {
console.log('start method');
},
samemethod: function () {
console.log('Main: same method');
}
}
});
vm.hellworld();
vm.start();
vm.samemethod();
</script>
</body>
</html>mixinには、helloworld関数とsamemethod関数が定義されているmethodプロパティがあります。 同様に、vueインスタンスには、2つのメソッドがstartとsamemethodで定義されているmethodsプロパティがあります。
次の各メソッドが呼び出されます。
vm.hellworld();//In HelloWorld
vm.start();//start method
vm.samemethod();//Main: same method上記のように、helloworld、start、およびsamemethod関数を呼び出しました。 同じメソッドがmixinにも存在しますが、次のコンソールに示すように、メインインスタンスが優先されます。
VueJS-レンダリング関数
コンポーネントとその使用方法を見てきました。 たとえば、プロジェクト全体で再利用する必要があるコンテンツがあります。 同じものをコンポーネントとして変換して使用できます。
単純なコンポーネントの例を見て、その中でレンダー機能が何をしなければならないかを見てみましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1>Hello World</h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>次のスクリーンショットに示すように、Hello Worldを出力する単純なコンポーネントの上記の例を考えてください。
これで、コンポーネントを再利用する場合は、再度印刷するだけで再利用できます。 例えば、
<div id = "component_test">
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
</div>そして、出力は次のようになります。
ただし、コンポーネントにいくつかの変更が必要になりました。 同じテキストを印刷したくありません。 どうすれば変更できますか？ 場合は、コンポーネント内に何かを入力しますが、考慮されますか？
次の例を考えて、何が起こるか見てみましょう。
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>出力は、以前見たものと同じままです。 必要に応じてテキストを変更することはありません。
コンポーネントは slots と呼ばれるものを提供します。 それを利用して、望ましい結果が得られるかどうかを確認しましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1><slot></slot></h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>上記のコードに見られるように、テンプレートにスロットを追加しました。したがって、次のスクリーンショットに示すように、コンポーネント内で送信する値を取得します。
次に、色とサイズを変更することを検討します。 たとえば、現在、h1タグを使用しているため、同じコンポーネントのHTMLタグをpタグまたはdivタグに変更します。 多くの変更を実行する柔軟性をどのように確保できますか？
レンダリング機能の助けを借りてそうすることができます。 レンダリング関数は、コンポーネントを動的に保ち、それを共通に保ち、同じコンポーネントを使用して引数を渡すことにより、必要な方法を使用するのに役立ちます。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>上記のコードでは、次のコードを使用してコンポーネントを変更し、propsプロパティを持つrender関数を追加しました。
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});小道具は次のようになります。
props:{
elementtype:{
attributes:String,
required:true
}
}string型の属性フィールドをとるelementtypeというプロパティを定義しました。 フィールドが必須であることを示す別の必須フィールド。
レンダリング関数では、次のコードに示すようにelementtypeプロパティを使用しています。
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
}レンダリング関数は、引数としてcreateElementを取り、同じものを返します。 CreateElementは、JavaScriptと同じ方法でDOM要素を作成します。 また、attrsフィールドの値を使用して、要素タイプをコンマで分割しました。
CreateElementは、作成されるelementtagとして最初のパラメーターを取ります。 次のコードを使用してコンポーネントに渡されます。
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>コンポーネントは、上記のようにpropsフィールドを取る必要があります。 ：および小道具の名前で始まります。 ここでは、要素のタグ、色、フォントサイズ、および要素のIDを渡します。
レンダリング関数では、createElementでコンマで分割するため、最初の要素はelementtagであり、次のコードに示すようにcreateElemetに与えられます。
return createElement(
a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)*a [0]* はhtml要素タグです。 次のパラメーターは、要素タグの属性です。 これらは、次のコードのattrフィールドで定義されています。attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}要素タグには、 id と style の2つの属性を定義しました。 idには、a [3]を渡します。これは、コンマで分割した後の値です。 スタイルを使用して、色とフォントサイズを定義しました。
最後はスロットです。これは、次のコードのコンポーネントで指定したメッセージです。
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>次のコードを使用して、createElementに印刷するテキストを定義しました。
this.$slots.defaultコンポーネントフィールドに割り当てられたデフォルトを使用します。
以下は、ブラウザに表示される出力です。
要素は構造も示しています。 これらは私たちが定義したコンポーネントです-
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>VueJS-リアクティブインターフェイス
VueJSは、動的に追加されるプロパティに反応性を追加するオプションを提供します。 すでにvueインスタンスを作成しており、watchプロパティを追加する必要があることを考慮してください。 それは次のように行うことができます-
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
setTimeout(
function(){
vm.counter = 20;
},2000
);
</script>
</body>
</html>データオブジェクトに1として定義されたプロパティカウンターがあります。 ボタンをクリックすると、カウンターが増加します。
Vueインスタンスは既に作成されています。 それに時計を追加するには、次のようにする必要があります-
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});vueインスタンスの外部に監視を追加するには、$ watchを使用する必要があります。 カウンタープロパティの値の変更を示すアラートが追加されています。 タイマー機能も追加されています。 setTimeout。カウンタ値を20に設定します。
setTimeout(
function(){
vm.counter = 20;
},2000
);カウンターが変更されるたびに、次のスクリーンショットに示すように、監視メソッドからのアラートが発生します。
VueJSはプロパティの追加と削除を検出できません。 最良の方法は、常にプロパティを宣言することです。これは、Vueインスタンスで事前にリアクティブにする必要があります。 実行時にプロパティを追加する必要がある場合、Vueのglobal、Vue.set、およびVue.deleteメソッドを使用できます。
Vue.set
このメソッドは、オブジェクトにプロパティを設定するのに役立ちます。 Vueがプロパティの追加を検出できないという制限を回避するために使用されます。
構文
Vue.set( target, key, value )どこで、
ターゲット：オブジェクトまたは配列にすることができます
key：文字列または数値にすることができます
値：任意のタイプを使用できます
例を見てみましょう。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>上記の例では、最初に次のコードを使用して作成された変数myproductがあります。
var myproduct = {"id":1, name:"book", "price":"20.00"};次のようにVueインスタンスのデータオブジェクトに与えられます-
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});Vueインスタンスが作成された後、myproduct配列にもう1つのプロパティを追加することを検討してください。 それは次のように行うことができます-
vm.products.qty = "1";コンソールで出力を見てみましょう。
上記のように、製品では数量が追加されます。 基本的に反応性を追加するget/setメソッドは、id、name、priceで使用できますが、qtyでは使用できません。
vueオブジェクトを追加するだけでは反応性を達成できません。 VueJSは、ほとんどすべてのプロパティを最初に作成することを望んでいます。 ただし、後で追加する必要がある場合は、Vue.setを使用できます。 そのためには、vue globalを使用して設定する必要があります。 Vue.set。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>Vue.setを使用して、次のコードを使用してqtyを配列に追加しました。
Vue.set(myproduct, 'qty', 1);vueオブジェクトをコンソール化しました。出力は次のとおりです。
これで、Vue.setを使用して追加されたqtyのget/setを確認できます。
Vue.delete
この関数は、プロパティを動的に削除するために使用されます。
例
Vue.delete( target, key )どこで、
ターゲット：オブジェクトまたは配列にすることができます
key：文字列または数値を指定できます
プロパティを削除するには、次のコードのようにVue.deleteを使用できます。
例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>上記の例では、Vue.deleteを使用して、次のコードを使用して配列から価格を削除しました。
Vue.delete(myproduct, 'price');出力は次のとおりです。コンソールに表示されます。
削除後、価格が削除されるため、IDと名前のみが表示されます。 get/setメソッドが削除されていることもわかります。
VueJS-例
例1：通貨コンバーター
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
#databinding{
padding: 20px 15px 15px 15px;
margin: 0 0 25px 0;
width: auto;
background-color: #e7e7e7;
}
span, option, input {
font-size:25px;
}
</style>
<div id = "databinding" style = "">
<h1>Currency Converter</h1>
<span>Enter Amount:</span><input type = "number" v-model.number = "amount" placeholder = "Enter Amount"/><br/><br/>
<span>Convert From:</span>
<select v-model = "convertfrom" style = "width:300px;font-size:25px;">
<option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
</select>
<span>Convert To:</span>
<select v-model = "convertto" style = "width:300px;font-size:25px;">
<option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
</select><br/><br/>
<span> {{amount}} {{convertfrom}} equals {{finalamount}} {{convertto}}</span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
currencyfrom : [
{name : "USD", desc:"US Dollar"},
{name:"EUR", desc:"Euro"},
{name:"INR", desc:"Indian Rupee"},
{name:"BHD", desc:"Bahraini Dinar"}
],
convertfrom: "INR",
convertto:"USD",
amount :""
},
computed :{
finalamount:function() {
var to = this.convertto;
var from = this.convertfrom;
var final;
switch(from) {
case "INR":
if (to == "USD") {
final = this.amount *0.016;
}
if (to == "EUR") {
final = this.amount* 0.013;
}
if (to == "INR") {
final = this.amount;
}
if (to == "BHD") {
final = this.amount *0.0059;
}
break;
case "USD":
if (to == "INR") {
final = this.amount* 63.88;
}
if (to == "EUR") {
final = this.amount *0.84;
}
if (to == "USD") {
final = this.amount;
}
if (to == "BHD") {
final = this.amount* 0.38;
}
break;
case "EUR":
if (to == "INR") {
final = this.amount *76.22;
}
if (to == "USD") {
final = this.amount* 1.19;
}
if (to == "EUR") {
final = this.amount;
}
if (to == "BHD") {
final = this.amount *0.45;
}
break;
case "BHD":
if (to == "INR") {
final = this.amount* 169.44;
}
if (to == "USD") {
final = this.amount *2.65;
}
if (to == "EUR") {
final = this.amount* 2.22;
}
if (to == "BHD") {
final = this.amount;
}
break
}
return final;
}
}
});
</script>
</body>
</html>出力（USDへの変換）
出力：BHDへの変換
説明-上記の例では、通貨の1つの値を選択した他の通貨の値に変換する通貨コンバーターを作成しました。 通貨の2つのドロップダウンを作成しました。 テキストボックスに変換する量を入力すると、変換後に同じものが下に表示されます。 計算されたプロパティを使用して、通貨換算に必要な計算を行います。
例2：顧客の詳細
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
#databinding{
padding: 20px 15px 15px 15px;
margin: 0 0 25px 0;
width: auto;
}
span, option, input {
font-size:20px;
}
.Table{
display: table;
width:80%;
}
.Title{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row{
display: table-row;
}
.Cell{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
width:30%;
}
</style>
<div id = "databinding" style = "">
<h1>Customer Details</h1>
<span>First Name</span>
<input type = "text" placeholder = "Enter First Name" v-model = "fname"/>
<span>Last Name</span>
<input type = "text" placeholder = "Enter Last Name" v-model = "lname"/>
<span>Address</span>
<input type = "text" placeholder = "Enter Address" v-model = "addr"/>
<button v-on:click = "showdata" v-bind:style = "styleobj">Add</button>
<br/>
<br/>
<customercomponent
v-for = "(item, index) in custdet"
v-bind:item = "item"
v-bind:index = "index"
v-bind:itr = "item"
v-bind:key = "item.fname"
v-on:removeelement = "custdet.splice(index, 1)">
</customercomponent>
</div>
<script type = "text/javascript">
Vue.component('customercomponent',{
template : '<div class = "Table"><div class = "Row" v-bind:style = "styleobj"><div class = "Cell"><p>{{itr.fname}}</p></div><div class = "Cell"><p>{{itr.lname}}</p></div><div class = "Cell"><p>{{itr.addr}}</p></div><div class = "Cell"><p><button v-on:click = "$emit(\'removeelement\')">X</button></p></div></div></div>',
props: ['itr', 'index'],
data: function() {
return {
styleobj : {
backgroundColor:this.getcolor(),
fontSize : 20
}
}
},
methods:{
getcolor : function() {
if (this.index % 2) {
return "#FFE633";
} else {
return "#D4CA87";
}
}
}
});
var vm = new Vue({
el: '#databinding',
data: {
fname:'',
lname:'',
addr : '',
custdet:[],
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods :{
showdata : function() {
this.custdet.push({
fname: this.fname,
lname: this.lname,
addr : this.addr
});
this.fname = "";
this.lname = "";
this.addr = "";
}
}
});
</script>
</body>
</html>出力
削除後の出力
説明-上記の例では、入力する3つのtexboxがあります-名、姓、住所。 追加ボタンがあります。このボタンは、テキストボックスに入力された値をテーブル形式で削除ボタンで追加します。
テーブル形式は、コンポーネントを使用して作成されます。 クリックボタンは、emitイベントを使用して親コンポーネントと対話し、配列から要素を削除します。 入力した値は配列に保存され、 prop プロパティを使用して子コンポーネントと共有されます。
