はじめに
今回はゼロからVue.jsについて学んだため備忘録として書きました。
環境設定からディレクティブまでです。
環境設定
読み込み方法
- CDN 一番簡単
HTMLのbodyの終了タグの直前に以下を入力する
<script src="https://unpkg.com/vue@3.1.5"></script>
- 直接読み込み(ファイルをダウンロードして配置)
- NPM(パッケージ管理ソフトの利用)
- Vue CLIを使ってプロジェクトの基礎を作る
Vue.jsを読み込んでからJavaScriptを読み込む
VSコードでオススメの拡張機能
Vetur
Vueに特化した拡張機能で以下のことが可能
- シンタックスハイライト
- スニペット
- Emmet
- リンティング/エラーチェック
- フォーマット
- インテリセンス
- デバッグ
Live Server
HTMLやCSSを自動でリロードしてくれる便利機能です。
覚えておきたいもの
なぜVue.jsが人気なのか
学習コストが低いから！！！！
Vue.jsを使用することによりコードが短く、開発効率をあげることができる
テンプレートとは
HTMLベースのテンプレート構文を使用した、描画部分に関する記述のこと
マスタッシュ構文
{{変数名}}とすることでVueに定義したdataの変数をコンポーネントやテンプレートに埋め込むことができる
属性にマスタッシュ構文は使用できない
データバインディングとは
データと描画を同期する仕組みのこと
リアクティブとは
各要素をつなげて反応的に変化させること（excelのイメージ）
インスタンスの生成
new Vueでインスタンスを作成し、その中のel要素でTHML側のどの部分を対象としてVueを使用するか定義することができる
<div id='app'> <!--id名は任意に設定 -->
</div>
const 変数名(app or vm) = Vue.createApp({
//option
})
app.mount('#app) //mountメソッドの呼び出しが必要
最後のセミコロンは付けるか付けないか意見が分かれる
リアクティブデータを定義
マスタッシュ構文を使用し実現
<div id='app'>
<p>{{ message }}</p>
</div>
const 変数名(app or vm) = Vue.createApp({
data: () => ({
message: 'Hello Vue.js!'
})
})
app.mount('#app) //mountメソッドの呼び出しが必要
{{}}を使用した部分が、Hello Vue.js!に置き換わる
→ テキストコンテンツの一部がデータバインディングしているため
アロー関数でも関数式どちらで書いてもOK
ディレクティブ
v-から始まるデータバインディング（HTMLとjavascriptを紐づける）を行うための機能でVue.jsに何らかの指示を行う
- v-bind
- v-if
- v-show
- v-on
- v-mode
v-bind
v-bindでタグ属性の値をVueインスタンス内で定義した変数で表現する際に使用
<a v-bind:href="url">Google</a>
// 元はこれ
<a href="https://www.google.com/">Google</a>
<script>
const app1 = Vue.createApp ({
data: () => ({
url: 'https://www.google.com/'
}),
}
})
</script>
v-bind:hrefは:hrefに省略できる
属性にはマスタッシュ構文ではなくv-bindを使用する
v-on
イベントを加えると、Vueインスタンスのメソッドを呼び出すことができる
構文
v-on:イベント名="メソッド名"
<div id='app'>
<p>{{ message }}</p>
<button v-on:click='reverse'>Click!</button>
</div>
const app = Vue.createApp({
data: () => ({
message: 'Hello Vue.js!'
}),
methods: {
reverse: function(){
this.message = this.message.split('').reverse().join('');
}
}
})
app.mount('#app')
v-on:clickは@clickに省略可能
以下、省略した書き方
<div id='app'>
<p>{{ message }}</p>
<button @click='reverse'>Click!</button>
</div>
this：プロパティを示す
v-model
フォームのinput、textarea、select要素に双方向バインディング（「入力フォーム⇆Vue変数」の同期）を実現する際に使用
<div id='app'>
<input type='text' v-model='message'>
<p>{{ message }}</p>
</div>
const app = Vue.createApp({
data: () => ({
message: 'Hello VueJS!'
})
})
app.mount('#app')
修飾子
v-modelは修飾子により動作を変更できる
-
.lazy: バインドのタイミングを遅延させる -
.trim: 入力値から前後の空白を削除してからデータに代入 -
.number: 入力値を数値型に型変換してからデータに代入する
v-if
条件に応じて表示させるhtml要素を動的に変更する際に使用
<!--要素を表示/非表示に切り替える-->
<div id='app'>
<p v-if="toggle">Hello</p>
</div>
const app = Vue.createApp({
data: () => ({
toggle: false //trueは表示、falseの時は非表示
})
})
app.mount('#app')
- 要素をDOMから削除・追加することで要素の表示・非表示を行う
-
v-else、v-else-ifが使える
v-for
繰り返しを実現できる
<!-- dataオプションに登録した、配列の値を番号付きのリストで表示 -->
<div id='app'>
<ol>
<li v-for="color in colors"> {{ color }} </li>
</div>
const app = Vue.createApp({
data: () => ({
colors: ['Red', 'Green', 'Blue']
})
})
app.mount('#app')
オブジェクトの繰り返し
v-for="value in オブジェクト名とする
v-show
要素のディスプレイCSSプロパティを切り替えることで表示・非表示にできる
<div id="app">
<p v-show="toggle">Hello Vue.js!</p>
</div>
const app = Vue.createApp({
data: () => ({
toggle: true
})
})
app.mount('#app')
注意点
v-elseとは連動しない