Vue.js入門-基礎を試しながら学んでみる【javascriptフレームワーク】

久々にjavascriptフレームワークで遊びます。
Vueは昔少し触ったことあるのですが、最近需要も多いようなのでゼロから試しながら学んでいきます。
バージョンは2.xです。

Contents [hide]

Vue.jsとは

使って体感したほうがいいし概要はざっくり。
あとは公式でも読んでね！

javascriptのフレームワーク

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

view 層だけに焦点

jQuery大変だよね。

速度速い

仮想DOM！

わかりやすい

AngularJs(1系)は個人的にはすごい好きだし便利だと思うけど…
Vueは簡単に学習できるようだ。

Vue.jsと他のフレームワークの比較が公式に書いてあってすごくいい。
他のフレームワーク使ったことある人は特に理解しやすいので。

他のフレームワークとの比較

Vue.jsに触ってみる

準備

vue.jsを読み込む。

触って学習するためなので、「開発バージョン、便利なコンソールの警告が含まれています」という方を読み込みます。
本番用には本番用のほうを。

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

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

cdnでもgitから持ってくるのでもnpmでも読み込めばまずはなんでもOK。

DOMに描画してみる

HTML側

<div id="app">
    {{ message }}
</div>

</div>

#appのdivの中にmessageが入る感じ。

js側

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

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

});

エレメントに#appを指定してデータのmessageに表示するのを指定。

Hello Vue!が表示されました。

バインディング

HTML側

<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>

Hover your mouse over me for a few seconds

to see my dynamically bound title!

</span>

</div>

v-bindというのが出てきました。

JS側

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

var app2 = new Vue({

el: '#app-2',

data: {

message: 'You loaded this page on ' + new Date().toLocaleString()

}

})

js側は文字列に日時が入っていますが、#appのとあまり変わりません。
結果は「Hover~」という文章は変わりませんがspanのtitleに指定した文章（日時入りの）が入ります。

「v-bind:title=”message”」この部分はtitle属性にmessageを入れるということですね！
titleをclassやrelなどに変えてに動作します。

jQueryの場合だと下記と書いたのと同じ動作です。

$('#app-2').attr('title', 'You loaded this page on ' + new Date().toLocaleString());

1	$('#app-2').attr('title', 'You loaded this page on ' + new Date().toLocaleString());

Html側に指定があるのでjQueryとの差がどんどん出てきますが。。

条件分岐

if!

HTML

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

var app3 = new Vue({

el: '#app-3',

data: {

seen: true

}

})

文章が表示されますが、seenがfalseだと表示されません！

簡単に条件分岐で切り替えられますね！
jQueryだと値が変わるたびにチェックして表示非表示を変えないといけないので…。

ループ

HTML

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<ol>

</li>

</ol>

</div>

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

var app4 = new Vue({

el: '#app-4',

data: {

todos: [

{ text: 'Learn JavaScript' },

{ text: 'Learn Vue' },

{ text: 'Build something awesome' }

]

}

})

view見てもどう動作するのかわかりやすいのがいいね。

イベントリスナ

HTML

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<p>{{ message }}</p>

<button v-on:click="reverseMessage">Reverse Message</button>

</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

var app5 = new Vue({

el: '#app-5',

data: {

message: 'Hello Vue.js!'

methods: {

reverseMessage: function () {

this.message = this.message.split('').reverse().join('')

}

})

ボタンを押されたら、文字列を逆さまにして書き換える。
methodsにいろいろ追加すれば動きを追加できますね。

コンポーネント

ちょこっといじるだけでなく規模がでかくなればなるほど重要だなー。
お気に入りボタンとかログインによってログインとログアウトの表示変えるとかけっこうサービスで使いまわすところ多い。

まとめ

今回はVue.jsに触れてみました。
簡単で楽しいですね！

これだけだとアプリケーションは作るのには全然不足なので今後に続きます。
ルーティングとか簡単だといいなー。
あとはサーバーサイドレンダリングが非常に気になってる。

Vue.js入門-基礎を試しながら学んでみる【javascriptフレームワーク】

Vue.jsとは

javascriptのフレームワーク

view 層だけに焦点

速度速い

わかりやすい

Vue.jsに触ってみる

準備

DOMに描画してみる

バインディング

条件分岐

ループ

イベントリスナ

コンポーネント

まとめ

この記事を書いた人