前回の記事
Vue.jsで遊んでみた　【STEP 0】Node.jsでサーバーの構築

今回の内容

Vye.jsの初めのステップとして導入からちょっとしたことまで行っていきたいと思います。
範囲としては公式の初めにの途中までひとまず触っていきたいと思います。

基本的な環境に関しては前回記事通りです。

参考

Vue.js はじめに

導入してみた

ファイル構成

今回こんな感じのファイル構成にしてます。
ファイル名がダサいとかいう話は受け付けません。

localserver
 |-index.js
 |-public
   |-index.html
   |-js
     |-vue.js
     |-vue2.js

Vue.jsを使う方法

対象のhtmlに次を書き加える。ただそれだけ。今回は開発バージョンを使ってます。

index.html

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

使い方

index.htmlを公式にあるように以下のように書き換えます。

index.html

<html>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <body>
                <div id="test">{{ message }}</div>
        </body>
        <script>
        var app = new Vue({
            el: '#test',
            data: {
                message: 'Hello Vue!'
            }
        })
        </script>
</html>

script側のnew Vue()で新しいVueの要素を作成しています。その引数のelでDOMの対象となる要素と紐づけています。
{{message}}は紐づいているVueのdataのmessageの内容を参照反映してます。

はい、そんなの見たらわかるわって話ですね。

上では直書きでjs部分を書きましたが、public配下にjsファイルを作成してそこに書いても大丈夫です。

はじめにに書いていることを用いて以下のように各ファイル実装してみました。

index.html

<html>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <body>
        <h1>Index!!</h1>
        <div id="app">
            {{ message }}
        </div>
        <div id="app-2">
            <span v-bind:title="message">
                Hover your mouse over me for a few secondsto see my dynamically bound title!
            </span>
        </div>
        <div id="app-3">
            <span v-if="seen">Now you see me</span>
            <button v-on:click="changeState">changeState</button>
        </div>
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script src="js/vue2.js"></script>
</html>

vue.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue'
  }
})

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

vue2.js

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  },
  methods:{
    changeState : function(){
      this.seen = !this.seen
    }
  }
})

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

だいたい公式にあるままですが、app-3に関してはボタンで見え隠れするように変更しています。
ここでthisに関する注意ですが、よく言われれてるように関数をfunction(){}で宣言した時と()=>{}で宣言した時とでthisの中身が変化します。

上の例では
function(){}の場合、app3を参照します。
()=>{}の場合はWindowを参照します。
個人的な意見ですが、thisはややこしくなってしまうのでできる限り使わず、明示的にapp3とかいてあげた方がいいです。

まとめ

次はいったんコンポーネントは置いておいて、APIたたいていろいろ試したいと思います。