Vueの勉強を始めていますが用語がちゃんと覚えれていないのと、書いてる最中に迷走し始めるので自分用にまとめました。
About
この記事は公式を参考にVue3の書き方をまとめてます
当方は...
- バニラJSもなんちゃって感が半端ないレベル
- Vue入門〜初級レベル（あまり仕事で使う機会なかった）
そんな人間が書いているので用語まとめのクセに
意味間違えてる可能性大
vueアプリケーション（アプリ）
今から作ろうとしている動的要素
vueインスタンスを通して展開されていく
Vueインスタンス
// 書き方1
const app = Vue.createApp({
//- ここにoptionsが入る
})
// 書き方2
inport { createApp } from 'vue'
const app = createApp({
//- ここにoptionsが入る
})
-
Vue.createAppメソッドの戻り値はVueインスタンス - Vueインスタンスは変数のところに入る
- 変数名
appは何を入れてもOK
app(application)やvm(ViewModel)が一般的によく使われる。
複数アプリをインスタンスする
inport { createApp } from 'vue'
const app = createApp({
//- ここにoptionsが入る
})
app.mount('#app')
const main = createApp({
//- ここにoptionsが入る
})
main.mount('#app2')
const app2 = createApp({
//- ここにoptionsが入る
}).mount('#top')
Vueのテンプレートとは（マウント）
- htmlベースのtemplate構文を使用した記述
- VMCのViewに相当する
- 一番上のid内がテンプレートとなる（ここがルート）
<div id="app">
// このidがテンプレートのルート天辺になる
// このルート内
</div>
マウントしないとvueが使えないのでapp.vueにmountメソッドを呼び出す必要がある
const app = Vue.createApp({
//- ここにoptionsが入る
})
+ app.mount('#app')
もしくはチェーンにしてつなげる書き方でもOK
const app = Vue.createApp({
//- ここにoptionsが入る
- })
+ }).mount('#app')
データバインディング
vueアプリケーションで表示したい内容を
dataオプションで用意してテンプレート側が受け取り表示させる...
この一連の動作を「データバインディング」という。
- データと描画を同期する
- データで扱う内容は全てリアクティブデータとして定義する必要がある
リアクティブ（反応的）データ
各要素をつなげて変化させる（動的に自動で更新させるみたいな）
リアクティブデータを使うためにはdata（値を格納する）オブジェクトが必要になる
双方向データバインディング
dataオブジェクトの値：変更
↑↓
テンプレートの値：変更
一方通行の変更ではなく
どちらの変更も柔軟に対応できる動き
vue側からhtmlの値を変更できるだけでなく
html側の値変更をvue側に渡すこともできるということ
dataオプションとオブジェクト
- 値を格納したのがオブジェクト
- 配列[]も扱えるのでjsonみたいな雰囲気で使える
- 複数の動作を扱う場合は「,」カンマで区切る
テキストを配置してみた例
const app = Vue.createApp({
+ data: () => ({
+ title: '銀河鉄道の夜'
+ })
}).mount('#app')
<div id="app">
+ <p>{{ title }}</p>
</div>
このpタグに「銀河鉄道の夜」が表示されます。
テキストであればマスタッシュ構文{{ }}で展開できる。
ここまでの動き
配列なども入れてみた例
See the Pen Vueまとめ by aya (@orange2929) on CodePen.
ディレクティブ（directive）
何らかの動的指示を出す。JSらしいあれ
v-で始まるあれ（属性）
よく使うイベント一覧
- v-bind
- v-if：if文
- v-for：for文
- v-show：要素の表示
- v-on：クリック回りとかでよく使う
- v-model
v-bind
html内の属性値にはそのままマスタッシュ構文が使えないので、v-bindを使ってデータバインディングする必要がある
<!-- 通常の書き方 -->
<要素 v-bind:属性></要素>
<!-- 省略した書き方 -->
<要素 :属性></要素>
const app = Vue.createApp({
data: () => ({
+ 属性: '値'
}),
}).mount('#app')
v-if
言わずもがなif文まま
- on/offの切り替えとかで活躍
<要素 v-if="オブジェクト"></要素>
const app = Vue.createApp({
data: () => ({
+ オブジェクト: '値'
}),
}).mount('#app')
v-for
言わずもがなfor文
- 繰り返しの取得とかで活躍
forはよく使うので、構文をはっきり覚えていないと事故る
vueでややこしくなる事案はここだと思っている
<!-- 書き方1 -->
<要素 v-for="値 in オブジェクト">
{{ 表示したい値 }}
</要素>
<!-- 書き方2：より詳しく回したい時 -->
<要素 v-for="(値,キー) in オブジェクト">
{{ 表示したい値かキー }}
</要素>
値(value)=エイリアス名ともいい換えられる
オブジェクトに入る配列などを複数形に、
値などを単数形で書き分けられることが多い
v-show
v-on
ボタンクリックとかでよく使っているイメージ
<要素 v-on:イベント名="メソッド名">
{{ プロパティ名 }}
</要素>
const app = Vue.createApp({
data: () => ({
+ プロパティ名: '初期値'
+ }),
+ methods: {
+ メソッド名: finction(){
+ // ここに実行する動きを追加
+ }
+ }
}).mount('#app')
v-model
双方向データバインディングはこれ
- input要素とかでよく使う
<要素 v-model="オブジェクト名"></要素>
const app = Vue.createApp({
data: () => ({
+ オブジェクト名: '値'
}),
}).mount('#app')
methodsオプション
Domイベントから呼び出したい記述を書いていく
-
function(){}を使っていく - methods内のfunctionで使われるthisはdataオプションのオブジェクトを指す
const app = Vue.createApp({
data: () => ({
}),
+ methods: {
+ メソッド名: function(){
+ // ここに実行するイベントの動き
+ }
+ }
}).mount('#app')
<要素>{{ メソッド名() }}</要素>
算出プロパティ（computed）
関数で算出したデータを返せる
キャッシュあり
const app = Vue.createApp({
data: () => ({
}),
+ computed: {
+ プロパティ名: function(){
+ // ここに実行するイベントの動き
+ }
+ }
}).mount('#app')
<要素>{{ プロパティ名 }}</要素>
データオブジェクトと似たような雰囲気。
コンポーネントの作り方
Vue.component(名前,定義内容)
const app = Vue.createApp({
data: () => ({
}),
methods: {
}
}
}).mount('#app')
+ app.compornent('コンポーネント名',{
+ template: '表示内容'
+ })
<コンポーネント名></コンポーネント名>
ルートコンポーネント
単一でコンポーネント管理しているなら
こんな感じでまとめれる
import { createApp } from 'vue'
+ import App from './App.vue'
+ const app = createApp(App)