Vue.jsの使い方

Vue.jsとは、javascriptフレームワークの1つです。 コード内で繰り返し使う変数や関数などをあらかじめ定義しておくことでコードを単純化することを目的として開発されました。 シンプルな使いやすさと、他のサポートなどと併用することが可能な点で差別化されており、人気のあるフレームワークです。 CDN
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 

・文字を表示する

  script el: で要素を指定して、data: {}で適用する変数と値を用意します。
document.addEventListener("DOMContentLoaded", function(){
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  });
});
html 指定した要素内に{{変数}}を記述すると、用意した値が代入されます。
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</body>
 

・算術プロパティ

  算術プロパティは変数の中身が変わらない限り何度関数を実行しても、処理を行わず前の結果を表示する特徴を持ちます。 script 変数に関数を代入することで一連の処理を用意しておくことができます。
document.addEventListener("DOMContentLoaded", function(){
  var vm = new Vue({
    el: '#example',
    data: {
      message: 'Hello'
    },
    computed: {
      reversedMessage: function () {
      return this.message.split('').reverse().join('')
      }
    }
  })
});
html 変数名を記述するだけで、用意した処理を呼び出すことができます。
<body>
  <div id="example">
    <p>{{ message }}"</p>
    <p>{{ reversedMessage }}"</p>
  </div>
</body>
 

・メソッド

  算術プロパティと同じ結果を返しますが、メソッドは関数を実行するたびに処理を行う特徴があります。 script
document.addEventListener("DOMContentLoaded", function(){
  var vm = new Vue({
    el: '#example',
    data: {
      message: 'Hello'
    },
    methods: {
      reverseMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
});
html
<body>
  <div id="example">
    <p>{{ message }}</p>
    <p>{{ reverseMessage() }}</p>
  </div>
</body>
 

・条件分岐

  script 文字の表示同様にel: で要素を指定して、dataにはtrue, もしくは、false を用意します。
document.addEventListener("DOMContentLoaded", function(){
  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })
});
html v-if=””で変数を指定します。 変数に代入した値がtrueなら<p>を有効にし、falseであれば無効にします。
<body>
  <div id="app-3">
    <p v-if="seen">Now you see me</p>
  </div>
</body>
 

・<ul>に<li>を追加する

  []で変数に配列を代入することができ、pushで配列に要素を追加することができます。 script
document.addEventListener("DOMContentLoaded", function(){
  var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  })
  app4.todos.push({ text: 'New item' })
});
html
<body>
  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
</body>
 

・ボタンを押すなどのイベントに反応する

  script
document.addEventListener("DOMContentLoaded", function(){
  var example1 = new Vue({
    el: '#example-1',
    data: {
      counter: 0
    }
  })
});
html v-on:click=”” を使うことで、要素をクリックしたときに反応する処理を行うことができます。
<body>
  <div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
  </div>
</body>
  その他の機能については公式サイトに詳しく解説されているのでそちらを参考にしてみてください。  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です