Vue.jsの勉強過程の記録(1)

目標

ボタンを押すとテキストが切り替わる

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <p>{{ name }}</p>
        <button v-on:click="change">{{ name2 }}</button>
        <!-- このボタンを押すとpタグの中身が切り替わる -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- vue.jsの読み込み -->
    <script src="index.js"></script>
  </body>
</html>

index.js

// インスタンスの生成
var app = new Vue({
  el: "#app",
//適用範囲の指定（id="app")
  data: {
    name: 'before',
    name2: 'change'
    //nameの中身を'before',name2の中身を'before2'に
  },
  methods: {
    change: function(){
      this.name = 'after';
      //changeメソッドの設定
      //nameの中身を'after'に変える
    }
  }
})

jqueryに比べて分かりやすく書けるなと思いました。
まだまだ初歩中の初歩ですが、頑張ります。

Vue.js備忘録(1)

Vue.jsの勉強過程の記録(1)

目標