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を使用して作成した最初のアプリです。上記のコードに見られるように、.htmlファイルの先頭にvue.jsを含めました。

<script type = "text/javascript" src = "js/vue.js"></script>

印刷する本文に追加されるdivがあります “My first VueJS Task” ブラウザで。

<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'
   }
})

上記のコードスニペットでは、DOM要素のID、つまりe1： '＃intro'を取得するVueインスタンスを呼び出しています。これは、divのIDです。値が割り当てられたメッセージを含むデータがあります‘My first VueJS Task’。VueJSはDOMと対話し、DOM {{message}}の値を次のように変更します。’My first VueJS Task’。

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