go on program

Vue.jsってなに?

2020/06/13

JavaScriptを学習していくと「Vue.js」を目にします。検索してみるとJavaScriptフレームワークの一つです。「Vue.js」を使えば、どんなことに活用できるのでしょうか。

Vue.jsとは

Vue.jsは、JavaScriptのフレームワークの一つでインタラクティブなページや状態管理に特化したフレームワークです。また、自動的にDOM操作を行ってくれます。Vue.js は、中規模のWebサイト構築に向いていると言われています。

Vue.jsの基本構文

scriptタグを埋め込み、ライブラリを読み込ませます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
または
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!DOCTYPE html>
<html>
<head>
　<meta charset="utf-8">
　<title>サンプルテスト</title>
　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
 　<div id="app">
   　{{ message }}
 　</div>
　<script>
　　var app = new Vue({
 　　　el: '#app',
 　　　data: {
　　　　　message: 'これはサンプルテストです。'
　　　}
　　});
　</script>
</body>
</html>

実行すると下記の文言が表示されいます。

「これはサンプルテストです。」

JavaScriptのmessageの内容が自動的に、HTMLの” {{ message }}” の部分に代入され表示されます。JavaScript部分を外部データから読み込むこともできます。

ブラウザの JavaScriptコンソールから、messageを変更することもできます。
app.message=’文字の変更です。’;

ブラウザーに「文字の変更です。」と表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>サンプルコード</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app-2">
        <span v-bind:title="message">
          Hover your mouse over me for a few seconds
          to see my dynamically bound title!
        </span>
      </div>
      <script>
      var app2 = new Vue({
        el: '#app-2',
        data: {
          message: 'You loaded this page on ' + new Date().toLocaleString()
        }
      });
      </script>
</body>
</html>

文章にカーソルを持っていくと、You loaded this page on （その時に日時と時間）がalt表示されます。

条件分岐とループを試す

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>サンプルコード</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app-3">
        <span v-if="seen">表示されている</span>
    </div>
      <script>
        var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true
        }
        });
      </script>
</body>
</html>

seenのtrueをfalseに変更すると文字が消えて表示され無くなります。
app3.seen=false;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>サンプルコード</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app-4">
        <ol>
          <li v-for="todo in todos">
            {{ todo.text }}
          </li>
        </ol>
      </div>
      <script>
        var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
            { text: '基礎' },
            { text: '応用' },
            { text: '実践' }
            ]
        }
        });
      </script>
</body>
</html>

下記の内容で表示されます。

  1. 基礎
  2. 応用
  3. 実践

より詳しい内容は、「Vue.js」に掲載されています。
下記のURLから閲覧できます。

（Vue.js）
https://jp.vuejs.org/v2/guide/index.html

おさらい

Vue.jsは、便利なフレームワークです。勉強してできることを増やしていきましょう。

関連記事
RELATED