vue.jsを使ってアプリを作成する方法

Feb 6, 2026

操作方法

JavaScript Ecosystemは10年以上にわたって変化していましたが、フロントエンド開発者は新しいテクノロジを追跡しなければなりませんでした。試験後 JavaScriptフレームワーク そして5年以上のライブラリ、私は私のために働くものを見つけました：vue.js。

このチュートリアルでは、VUEアプリの基本構造を説明します。さらに、私は詳細にコンポーネントを定義し、Mixinsのようなより高度な機能に触れるつもりです。 ブログを起動する方法 あなた自身のシンプルなアプリで実行しています。

もっとアドバイスが欲しいですか？私達はからのすべてのものにガイドを持っています ウェブホスティング サービスへのサービス クラウドストレージ オプションとベスト ウェブサイトビルダー 周り。

最高の無料のブログプラットフォーム

vue.jsの利点

vue.jsの主な販売ポイントは、それがプレーンなHTML、CSS、そしてJavaScriptで書かれているので、それが学ぶことがどれほど簡単です。ライブラリは1セットでサポートされていますドキュメンテーションそれは絶えず更新されています。ライブラリのサイズは競合他社に比べて小さい。また、そのCLI 3.0は将来証明であると書き直されました。

vue.jsでパフォーマンスを高速化します

始まりました

このチュートリアルに従うには、すべての開発がCodesAndBoxで行われる予定のWebコードエディタですべての開発が行われるため、インターネット接続が必要です。コードへのリンクは見つけることができますここに。

私たちのアプリは、ような構成ファイルを含みます Package.json. 、 index.html 私たちのアプリのエントリファイルと SRC 私たちのアプリケーションの中核のフォルダー。このフォルダの内容はチュートリアル全体で説明されます。

VUEのコンポーネント

VUEはコンポーネントを作成する機能を提供します。これらは、再利用可能なコードをカプセル化するために使用されるカスタム要素であり、単純なボタンからフル機能のページまで変わります。コンポーネントは3つの主要セクションで構成されています。 ＆lt;テンプレート＆gt; 、 ＆lt;スクリプト＆gt; そして ＆lt;スタイル＆gt; これについてはさらに調べられます。

app.vueを作成します

を作成することでアプリを起動するつもりです app.vue. 私たちのルートのファイル。このコンポーネントは、将来のすべてのコンポーネントを囲みます。最初のコンポーネントは動的データがないが、前述の3つのセクション（テンプレート、スクリプト、スタイル）を単純に含めるだけです。

＆lt;テンプレート＆gt;

artificate.vueを作成します

ブログアプリケーションを作成するには、記事が必要です。これには、ファイルの作成が含まれます arters.vue. そしてそれをコンポーネントフォルダ内に保存します。このコンポーネントは、それが動的になることを可能にするいくつかの基本的なVUE機能を含めるように、より複雑になるでしょう。

私たちが紹介しようとしている最初の機能はディレクティブ、ダブルカーリーブレースと呼ばれ、それはタイトル値をコンポーネントに渡された動的プロパティと置き換えます。これは、HTML内に追加され、VUEライブラリによって使用されてHTMLを作成するためにDOMを変更する特定のトークンです。

＆lt;テンプレート＆gt;
 {{title}} <{title}}

＆lt; p＆gt; {{value}}＆lt; / p＆gt; ＆lt; / div＆gt; ＆lt; /テンプレート＆gt;

コンポーネントが動的になるには、データを渡すことができる必要があります。これはプロパティを宣言することによって達成できます。コンポーネントは、データと呼ばれる独自のプライベートインスタンス変数にアクセスできます。

＆lt;スクリプト＆gt。
デフォルトのエクスポート{
小道具：{
タイトル：
値：{type：string、必須：True}
}、
data（）{
戻る{いいね、0、showingsnippets：true};
}}}
＆lt; / script＆gt;

このコンポーネントには、正しく表示するための基本的なスタイルが必要です。

最初の記事を表示するには、3つの手順を実行する必要があります。ファイルを含めてください。 app.vue. 無効なインスタンスに追加し、それをテンプレートセクションの一部として参照してください。

＆lt;テンプレート＆gt;

残念ながら、このコードを実行すると、記事コンポーネント内で必要に応じて設定されているすべてのプロパティを提供していないため、エラーが発生します。問題を解決するには、データオブジェクトを宣言し、新しいディレクティブを使用する必要があります。 v-bind. オブジェクトを記事コンポーネントに渡すには。

＆lt;テンプレート＆gt;
...
＆lt; articleContainer v-bind = "post" / gt; ...
＆lt; /テンプレート＆gt;
＆lt;スクリプト＆gt;
...
名前：「アプリ」、
データ：function（）{
  戻る{投稿：{
    タイトル：「私の最初の投稿」、
    価値：「Lorem Ipsum Dolor Sit ...」、
    IMG： "./asts/logo.png"}
  ;;
}、...
＆lt; / script＆gt;

generate new york — ニューヨークで今年の生成会議をお見逃しなく。画像をクリックしてもっと見る

計算されたプロパティ

コンポーネントをより複雑にするために、私たちは呼ばれるVUE APIの新しい機能を紹介します 計算しました 。その値が実プロパティに変換されるため、これは通常「計算プロパティ」と呼ばれます。計算されたプロパティがどのように機能するかを示すために、スニペットビューとフル記事ビューをサポートするためにコンポーネントを強化します。

＆lt;テンプレート＆gt;
 {{title}} <{title}}

＆lt; p v - if = "ShowingsNippets"＆gt; {{Snippets}}}}} ＆lt; p v-els＆gt; {{value}}

この例は新しいディレクティブを提供しています V-IF そして v on 、呼び出されたプライベート変数を使用して、自動的にコンポーネントを表示または非表示にします。 ShowingsNippets 。スニペットの値はその場で計算され、それが使用するプロパティのいずれかが変更されます（ スニペット長 、 充実した ）変更。

MainComponent.vue.

次のステップでは、API呼び出しをエミュレートし、新しい指令に紹介するために使用される、私たちのアプリケーションの本文になる新しいコンポーネントが含まれます。 v-for. 。 VUE APIは、適切なタイミングでイベントをロードしてトリガするためのフックの包括的なリストへのアクセスを提供します（私たちの場合はマウントされています）。これらはこのチュートリアルの範囲外ですが、詳細が見つかりますここに。

＆lt;テンプレート＆gt;
＆lt; div id = "maincontent"＆gt。
＆lt; POSTのarticleContainer v-for = "（項目、index）"：key = "index" v-bind = "item" / gt;
＆lt; / div＆gt;
＆lt; /テンプレート＆gt;
＆lt;スクリプト＆gt;
"./article.vue"からampleContainerをインポートします。
"../data/posts.js"からの偽ポストをインポートします。
デフォルトのエクスポート{
データ：function（）{
{投稿：[]}を返します。
}、
方法：{
fakeapicall（）{
//ここでは、APIで値をロードする可能性をエミュレートしています
this.posts = fakeposts;}
}、
コンポーネント：{articleContainer}、
マウント（）{
this.FakeApicall（）;}
;;
＆lt; / script＆gt;

ミキシブを作る

vue.jsのもう一つの強力な機能はミックスインです。これらは特定のコンポーネントの機能を拡張する再利用可能なJSメソッドです。 MIXINSは、VUE APIのほとんどの場合（プロパティ、データ、メソッド）にアクセスできます。それらは通常Aに保存されています ミックス SRCディレクトリ内で作成されたフォルダと、ミックスインは純粋にJSであるため、 js. 拡張。

最初に、この機能の力は明らかではないかもしれません。ただし、VUEとそのAPIに精通しているため、MIXINSは形をし始め、アプリケーションをサポートし始めます。この機能は、入力検証、国際化、およびファイルアップローダなどの製品機能を提供するために使用されるこの機能を見ました。

正常成分とミックスシンとの間の主な違いは、後者が任意の成分に含まれそして塗布され得ることである。たとえば、ファイルアップロードMIXINをボタンまたは画像に追加することができ、それらはすべて新機能にアクセスできるようになります。

私たちはアクセシビリティミックスを構築しようとしています。これはAを提供します トグルコントラスト 当社のコンポーネントに適用できる方法。

デフォルトのエクスポート{
小道具：{
LightTextColour：{タイプ：文字列、デフォルト： "＃252525"}、
LightBackgroundColour：{タイプ：文字列、デフォルト： "#fff"}、
DarkTextColour：{Type：String、Default： "#fff"}、
DarkBackgroundColour：{タイプ：文字列、デフォルト： "＃252525"}
}、
data（）{
{islight：true}を返す。
}、
方法：{
ToggleHighContrast（）{
this.islight =！this.islight;
（this.islight）{
これ。$ EL.Style.BackgroundColor = this.lightbackgroundColour。
これは$ el.style.color = this.lightTextColour;
} そうしないと {
これは$ el.style.backgroundColor = this.darkbackgroundColour;
これは$ el.style.color = this.darktextColour; }
}}}

今度はコードが定義されているので、任意のコンポーネントに含めることができ、そのメソッドとプロパティを実際のコンポーネントで定義されているかのように使用できます。 MixInsはプロパティ駆動で、コンポーネントに含まれるとすぐにそれを提供することができます。

この機能を最大限に活用するには、コード内で次の変更を加える必要があります。

＆lt;テンプレート＆gt;

新しい定義ボタンを使用して、個々のコンポーネントにコントラストを切り替えることができます。追加のプロパティが定義されていなくても、実際に受け入れることができることを理解することが重要です。 LightTextColour. 、 DarkTextColour. 、 LightBackgroundColour. そして ダークバックグラウンドカラー 。これらはアクセシビリティミックスインシックス内で定義されています。

私たちの小さなプロトタイプは現在完全に働いており、将来のプロジェクトのための参考として使用することができます。

この記事はもともと発行316に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここに問題316を購入してください または ここで購読する 。

関連記事：

最高のJavaScriptフレームワークの9
明らかにされた：最新のJavaScriptトレンド
Gatsbyでブログサイトを構築する方法

vue.jsを使ってアプリを作成する方法

vue.jsの利点

始まりました

VUEのコンポーネント

app.vueを作成します

artificate.vueを作成します

計算されたプロパティ

MainComponent.vue.

ミキシブを作る

操作方法 - 最も人気のある記事

ポートレート写真：完璧な肖像画を撮る方法

V-rayの神の光線を作成する

数量特定のCSSスタイルとレイアウトを作成する

CSSグリッド付きファッションフレキシブルレイアウト

4個の必須画像最適化ヒント

4を向上させるための4つの簡単なステップ

宇宙ヘルメットに湾曲ガラスを塗装する方法

現実的なスポーツカーのレンダリング方法

カテゴリ