Javascript知識ゼロの人が、Vue.js入門の2章を学習してみた – 前編

こんにちは!最近ブログ記事を書くのが楽しくなってきたぐーどらくらんちです!

昨日今日を使って、「Vue.js入門」の2章をざっくりと終わらせたので、今回はそのまとめ記事を上げます。Vue.js入門の最初にも書かれているのですが、学習コストが低く、とてもとっつきやすいです。(入門書なので、理解しやすく書かれていることもあり、かなり理解しやすいです)

昨日から記事を書いていたのですが、まとめてみると2章の内容がかなり盛りだくさんだと気がついたので、前編後編に分けることにしました。

概要的なものはググれば出てくると思うので、ちょっと深いところから行きます。

Vueオブジェクト

基本的なVueを用いたときの記述法です。jsファイルに記述します。

var (変数名) = new Vue({
オプション: {
//処理
},
オプション…
})

オプションの種類

  • data
  • el
  • filters
  • computed
  • methods

dataプロパティ
UIの状態、データを定義させるオプション。データを保持させる役割。

elプロパティ
Vueインスタンスをマウントする要素。Vueインスタンスを適用する要素を定義するオプション。

filtersプロパティ
データを文字列と整形する。入力データを指定する形式に変換するような処理を行わせる。(例:入力→YYYY/MM/DDに整形させる)

computedプロパティ
dataプロパティや入力されたデータを用いて、プロパティとして返す。関数として実装し、返り値を持つプロパティ。

methodsプロパティ
Vueインスタンスのメソッドとして定義できるプロパティ。HTML側から{{メソッド名()}}のように記述しても呼び出すことが出来る。

さらに後編で、条件付きレンダリング、リストレンダリング、イベントハンドリング、ライフサイクルフックについて少々触れます。

Vueインスタンスの適用(el)

基本的にはVueインスタンスをHTMLに適用するには、elオプションを使って次のように定義します。

jsファイル
var (変数) = Vue({
el: '#app',

})

HTMLファイル

<div id="app">
(divタグで囲われた中で、Vueの記法が使える)
</div>

elオプションで指定されたidやclassにVueを適用し、以下で触れるようなオプションや、後編で触れるディレクティブと組み合わせて動的な画面を作ります。

例外的に、$mountメソッドを使い呼び出すことも可能(今回の記事では割愛)また、以降のインスタンスではvar(変数)は省略します。

dataオプション

dataにはオブジェクト、もしくは関数を定義します。関数については書籍にまだ載っていないため割愛します。

var items = [
{
name: '鉛筆',
price: 30,
quantity: 0
},
{
name: 'ノート',
price: 200,
quantity: 0
},
...
]
new Vue({
data: {
items: items
},
...
})

HTMLへの展開

{{ items[0].name }}: {{ items[0].price }}×{{ items[0].quantity }}

フィルタ(filtersプロパティ)

引数を一つ取る関数として定義します。

new Vue({
filters: {
フィルタ名: function(value) {
return 処理
}
},
...
})

HTMLへの展開

{{ 値 | フィルタ名 | フィルタ名...}}

サンプルコード

new Vue({
filters: {
numberWithDelimiter: function(value) {
if(!value) {
return '0'
}
return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
}
},
...
})

正規表現やreplace関数、toString関数はjavascript準拠のものです。処理内容は数字の3桁毎のカンマを挿入する処理で、1000→1,000が帰ってくるというフィルターになります。

算出プロパティ(computed)

データにアクセスし、何らかの処理を与えたい時や複雑な式をHTMLに反映させたいタイミングで使う。

new Vue({
computed: {
算出プロパティ名: function() {
return 処理
}
}
})

サンプルコード

new Vue({
computed: {
totalPrice: function() {
return this.items.reduce(function(sum, item) {
return sum + (item.price * item.quantity)
}, 0)
//this経由で、インスタンス内のデータにアクセス可能
}
totalPriceWithTax: function() {
return Math.floor(this.totalPrice * 1.08)
//このように、算出プロパティに依存した定義も可能
}
},
...
})

メソッドプロパティ

HTMLから直接呼び出すことが可能。

サンプルコード

new Vue({
methods: {
doBuy: function() {
//サーバーとの通信処理などを挟む
aleart(this.totalPriceWithTax + '円でお買い上げ')
this.items.forEach(function(item) {
item.quantity = 0
})
}
},
...
})
<button v-on:click="doBuy">購入!</button>

上記の例で、HTMLで「購入!」のボタンが出現し、クリックをするとmethodプロパティで定義した処理が開始されるようになります。v-on:click=””ってなんぞ?と思われた方、少々お待ちを。後半のディレクティブで解説します。

後半へ続く…