さわって覚えるVue.js入門　ど素人がひたすらサンプルコードを書いみた

Vue.jsで何ができるかもわからない、ど素人です。

なんならJavascriptも初級レベルです。

３０歳からWebを勉強しはじめ、アラフォーになってWordpressやphpを触り始めたので全く頭で理解できません！

とりあえず手を動かす。とりあえず入門する。

そのためにコードを打っていくブログ記事です。

（随時練習したサンプルコードを追加予定です）

内容は主に基礎から学ぶ Vue.jsのサイト、および「基礎から学ぶ Vue.js」の書籍を参考。

サイトはWebページ上で動かしやすいようにトリガーになるボタンや、見た目を簡単にととのえるCSSが記載されています。

一方、概念や説明は書籍の方が書いてあるので、私のようにどっちも見ながらやると良いかもしれません。

適宜、気になった点はその他インターネット上の記事で確認したりしました。著者様不都合があればご連絡くださいm(_ _)m

Vue.jsを読み込み

何はともあれVue.jsを読み込みましょう。このページにこんなスクリプトを記述しました。

CDNのURLを記述

データアップロードするが面倒なので、CDNで読み込んじゃいます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

ちなみにこれは開発バージョンです。本番公開するときは以下の方に差し替えた方が、無駄なコードがないです。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

ディベロッパーツールで確認

Chromeを開いている状態で「cmd + option + i」。

「Console」をクリック。

「You are running Vue in development mode.」の表示が出ていたら正常に読み込めています。

Vue.js入門 出力してみる

実際に出力してみます。

テキストの表示

<div id="app01">
  <p>{{ message }}</p>
</div>

<script>
var message = new Vue({
  el: '#app01', //elはelement要素を指定する
  data: {
    message: '「Vue.js、読み込めてる？」'
  }
})
</script>

↓結果の表示　ここから↓

↑結果の表示　ここまで↑

無事に出力されました。

配列を出力

<div id="app02">
  <ol>
    <li v-for="item in list">{{ item }}</li>
  </ol>
</div>

<script>
var app02 = new Vue({
  el: '#app02',
  data: {
    list: ['起きて','歯を磨いて','顔洗って','また寝た']
  }
})
</script>

↓結果の表示　ここから↓

↑結果の表示　ここまで↑

朝のルーティーンを番号付きリストで出力できました。

ディベロッパーツールで下記のように入力するとリストに追加ができました。

app02.list.push('起きて絶望した')

なるほど、何もわからずに調べながらコードを打ってきましたが、Vue.jsを使えば簡単なコードでJSが動かせるってことだね！？（あってる！？）

Vue.js入門 イベント

<div id="app03">
  <button v-on:click="handleClick">クリックしたら要素がポップアップ表示される</button>
</div>

<script>
var app03 = new Vue ({
  el: '#app03',
  methods: {
    handleClick: function(event) {
      alert(event.target)
    }
  }
})
</script>

Vue.js入門 フォームに入力

<div id="app04">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script>
var app04 = new Vue({
  el: '#app04',
  data: {
    message: 'Pタグとフォームの中を同期する'
  }
})
</script>

Vue.js入門 条件分岐

<div id="app05">
  <p v-if="show">showプロパティーがtrueのときだけ表示される</p>
</div>

<script>
var app05 = new Vue({
  el: '#app05',
  data: {
    show: false
  }
})
</script>

ちょっといじってみましょう。

ディベロッパーツールでshowをtrueに書き換えます。

app05.show = true

すると指定したpタグがhtml上に表示されます。

うむ、ちゃんと動いている！

ボタンを追加

初期状態では表示。クリックで消える。

<div id="app06">
  <button v-on:click="show=!show">クリックで表示・非表示</button>
  <p v-if="show">Veu.js　動くかな？</p>
</div>

<script>
var app = new Vue({
  el: '#app06',
  data: {
    show: true
  }
})
</script>

初期状態では非表示。クリックで表示される。

<div id="app07">
  <button v-on:click="show=!show">クリックで表示・非表示</button>
  <p v-if="show">Veu.js　動くかな？</p>
</div>

<script>
var app = new Vue({
  el: '#app07',
  data: {
    show: false
  }
})
</script>

Vue.js入門 アニメーション

<div id="app08">
  <button v-on:click="show=!show">3秒かけてフワッと表示・非表示</button>
  <transition>
    <p v-if="show">Hello Vue.js!</p>
  </transition>
</div>

<script>
  var app08 = new Vue ({
    el: '#app08',
    data: {
      show: true
    }
  })
</script>

<style>
#app08 .v-enter-active,
#app08 .v-leave-active{
  transition: opacity 3s; /*3秒かけてフワッとする*/
}
#app08 .v-enter,
#app08 .v-leave-active{
  opacity: 0;
}
</style>

Vue.js入門 何個か同時に出力してみる

<div id="app09">
  <!-- メッセージが出る -->
  <p>{{ message.value }}</p>
  <!-- メッセージの文字数が出る -->
  <p>{{ message.value.length }}</p>
  <!-- 配列の2に入っている巨人を表示 -->
  <p>{{ list[2] }}</p>
  <!-- num3で指定した広島を表示 -->
  <p>{{ list[num] }}</p>
</div>

<script>
  var app09 = new Vue ({
    el: '#app09',
    data: {
      message: {
        value: 'Vue.jsをやっとるんやで！'
      },
      list: ['阪神','中日','巨人','広島','横浜','ヤクルト'],
      num: 3
    }
  })
</script>

↓出力結果↓

↑出力結果↑

このページのテーマはとにかく触って覚えることです。「もうちょっと詳しい説明が読みたい」という方は書籍を読んでみましょう。

Vue.js入門 クリックでカウンターの数をふやす

<div id="app10">
  <!-- countプロパティの中身を表示 -->
  <p>{{ count }}回クリック！よくできました◎</p>
  <!-- このボタンをクリックするとincrementメソッドが呼び出される -->
  <button v-on:click="increment">カウントが増えるよ</button>
</div>

<script>
  var app10 = new Vue ({
    el: '#app10',
    data: {
      //デフォルトでは０にしておく。０じゃなくてもいいけど
      count: 0
    },
    methods: {
      //　ボタンをクリックしたときのハンドラ
      increment: function() {
        //１をたしていく
        this.count +=1
      }
    }
  })
</script>

Vue.js入門 クラスやスタイルを付与する

<div id="app11">
  <button v-on:click="isActive=!isActive">is-activeクラスをとったり、つけたりするボタン</button>
  <!-- クラスにハイフンを含む場合はシングルクォートで囲む -->
<p v-bind:class="{ child: isChild, 'is-active': isActive}" class="item">動的にクラスを付与したダミーテキスト</p>
<p v-bind:style="{ color: textColor, backgroundColor: bgColor}" class="item">動的にスタイルを付与したダミーテキスト</p>
</div>

<script>
  var app11 = new Vue ({
    el: '#app11',
    data: {
      isChild: true,
      isActive: true,
      textColor: '#fff',
      bgColor: 'green'
    }
  })
</script>

<style>
#app11 .item {
padding: 4px 8px;
transition: background-color 0.4s;
}
#app11 .is-active {
background: #ffeaea;
}
</style>