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>

出力

First VueJS

これは、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’ で変更します。

コンソールでメッセージの値を変更した場合、同じことがブラウザーに反映されます。たとえば-

VueJS興味深い

コンソールの詳細

VueJSは興味深い

上記のコンソールでは、Vueのインスタンスであるvue_detオブジェクトを出力しました。 *「VueJsは面白い」*でメッセージを更新しており、上記のスクリーンショットに見られるように、ブラウザーで同じことがすぐに変更されます。

これは、VueJSとDOMのリンク、およびそれを操作する方法を示す基本的な例にすぎません。次のいくつかの章では、ディレクティブ、コンポーネント、条件付きループなどについて学習します。

Vuejs-introduction

目次

VueJS-はじめに

例

出力

コンソールの詳細