「一日で基本が身に付く！Vue.js」石亀 広大 [著]
この本を終えると、JavaScriptにおけるVue.jsのメリットがわかる！
ついでに以下のアプリを作成できる
・TODOアプリ
・画像ビューワー
Vue.jsはJavaScriptフレームワーク
プログレッシブ(斬新的)フレームワーク
→規模によって段階的に利用できる
コンポーネント志向
→部品の組み合わせで構築できる
フロントエンドのフレームワークは他にも
RaectやAnglar
例えばDjangoは?
Pythonで実装されたWebアプリケーションフレームワーク
Vue.jsは学習コストが低い
→HTMLとJavaScriptに馴染みがあればすぐ理解できる
Vue.jsと比較されることが多い他のフレームワークでは、Babelやwebpackの利用が前提だが、Vue.jsは必要なし。
(Vue.jsでも必要に応じてwebpackなどツールを導入できる)
デバックにはDevToolsが欠かせない。
GoogleGhromeでは「Chrome DevTools」というWEB開発ツールが標準で用意されている。
「console.log()」はJacaScriptの通常開発と同様に利用可能。
new Vue({
el: '#app'
});
<body>
<div id="app">hello Vue.js</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./script/script.js"></script>
</body>
Vue.jsのポイント
通常のJacaScript
１．HTMLの要素を取得
２．データを変更
３．HTMLへの繁栄
Vue.jsでは
データバインディング機能により、保持しているデータと画面に表示されているデータが同じ状態になる
new Vue({
el: '#app',
data() {
return {
count: 0
};
},
<p>{{ count }}</p>
Vueインスタンスのプロパティ
・el →Vueインスタンスを結びつけるHTML要素を指定
・data →データを入れておく場所
・methods →メソッドを定義する場所
・computed →算出プロパティ。バリエーションに使える。
・template →HTMLテンプレート
・components →外部モジュールとして取り込んだコンポーネントをHTMLテンプレートとして使える
Vue.jsのキーワード
・レンダリング(以下の記述が人に説明しやすいので忘れ防止で記載する)
→あるルールに従って記述されたデータを、人間が読める形に整形してブラウザに表示すること
・Vue.jsの「差分レンダリング」「仮想DOM」
→更新が必要な部分だけレンダリングする差分レンダリング
→通常のDOMとは違い、更新が必要な部分を検出するために利用する仮想DOM
※DOM(Document Object Model)→ JacaScriptから操作する際に使われる仕組み
・JavaScriptのメソッドの書き方
「this」はオブジェクトそのものを差し、同じオブジェクトのプロパティを利用するときに使う。
new Vue({
el: '#app',
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
・条件付きレンダリング
v-if, v-elseはVue.js特有の要素
・双方向バインディング
v-model
const app = new Vue({
el: '#app',
data() {
return {
name: 'name_test'
};
}
<input v-model="name" type="text" name="" />
→ただし、イベントハンドラ記載したほうが自由度が高い
・バリデーション
computedで記載
new Vue({
el: '#app',
data() {
return {
name: 'name',
};
},
computed: {
isInValidName() {
return this.name.length < 4;
・リストレンダリング
v-for
v-bind
:key="i" →v-bind:key="i"の短縮形
v-forの変数i(indexが入っている)をkey属性にバインディングしている。 ※Vue.jsが識別できるようにする
・スタイルバインディングで見た目を動的に変える(以下、v-bindの省略)
new Vue({
el: '#app',
data() {
return {
range: 10,
};
},
computed: {
bindStyle() {
return `width: ${this.range}px; height: ${this.range}px;`;
}
}
<div :style="bindStyle"></div>
・クラスバインディング
new Vue({
el: '#app',
data() {
return {
isActive: true
};
},
<div :class="{'is-active': isActive}"></div>