default layout

header

base

vue page

マスタッシュ構文

Message: message!

v-text

message!

v-html

row html !

v-bind

1
2
3

ブーリアン属性

複数の属性をバインド

{ "id": "container", "class": "wrapper", "style": "background-color:green" }
{ "id": "container", "class": "wrapper", "style": "background-color:green" }

jsの式の使用、関数の呼び出し

11
NO
!egassem egassem egassem
list-3

ref

test: test!, check: 0

reactive

state: 0, 31, Vue
count: 0, name: Vue
age: 31

methods

total: 0

computed

John Doe

times:
doubleCount:

ディレクティブの構文 動的引数

v-pre

{{ this will not be compiled }} {{ text }}

v-show

Hello!

v-if

Vue is awesome!
type: A
show A

v-for

  • Foo
  • Bar

value key index

  • 0. id: 1
  • 1. message: Foo
  • 0. id: 2
  • 1. message: Bar

number

12345678910

template

  • default list
  • Foo
  • Bar

v-on

インラインハンドラー

Count is: 0

メソッドハンドラー

インラインハンドラー下でのメソッドの呼び出し

インラインハンドラーのイベント引数へのアクセス

$event:
アロー関数:

v-on

v-on 修飾子



@submit.prevent


@keyup.enter:
@keyup.alt.enter:
@click.ctrl





@scroll.passive




component

component 基礎

componentタグ

divでラップ

component 動的コンポーネント

YourComponent

component props

foo: 123

bar: name

baz: 100

fooBar: 大文字小文字に注意

component emit

component slot

↓ ここにコンテンツが入ります

slotにいはいるコンテンツ

↑ ここにコンテンツが入ります

component provide/inject

テーマ: dark

カラー: #cccccc

v-bind（応用）

クラスのバインディング

クラスをバインド

オブジェクトバインディング

{ active: true, 'text-danger': false }

配列バインディング

[activeClass, errorClass]

三項演算子

[isActive ? activeClass : '', errorClass]

配列構文の中でオブジェクト

[{ [activeClass]: isActive }, errorClass]

コンポーネントないの一部に使いたい場合

ここに class を反映

ここには反映させない。

v-bind スタイルのバインディング

{ color: activeColor, fontSize: fontSize + 'px' }

hello

{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }

v-slot

フォールバック

フォールバック
コンテンツ

名前付きスロット

header

Here might be a page title

main

A paragraph for the main content.

And another one.

footer

Here's some contact info

条件付きスロット

ヘッダーは表示される

デフォルトは表示される

スコープ付きスロット

slotProps text: hello!
slotProps count: 1
parentProps: xxxxx

v-slot 名前およびスコープ付きスロット

header
header slot props text : header slot props count
main
main slot props text : main slot props count
footer
footer slot props text : footer slot props count

v-once

要素

1回だけレンダリング → ONCE

変更のたびレンダリング → ONCE

コンポーネント

once 有り → foo: 100
once なし → foo: 100

v-for ディレクティブ

  • 1: once
  • 2: once
  • 3: once
  • 1: once
  • 2: once
  • 3: once

v-memo

選択中:

  • ID: 1 - selected: false
  • ID: 2 - selected: false
  • ID: 3 - selected: false
  • ID: 4 - selected: false
  • ID: 5 - selected: false

選択中:

  • ID: 7 - selected: false
  • ID: 8 - selected: false
  • ID: 9 - selected: false
  • ID: 10 - selected: false
  • ID: 11 - selected: false

v-cloak

これはローディング後に表示されます

watch と watchEffect

watch 基本

watchからx:

watchからy: not set → 0

watchからx+y:

watchからxとy:

watch fetch

Ask a yes/no question:

Questions usually contain a question mark. ;-)

watchEffect 基本

watchEffectから :

watchEffect fetch

結果: 未取得

テンプレート参照

refを使用する

親コンポーネントから子コンポーネントのメソッドを呼び出す

method component

teleport

同じテンプレート内

box

切り替え表示

teleportコンポーネント

コンポネントにからteleportコンポーネント

content component

Transition, TransitionGroup

Transition

TransitionGroup

  • 1
  • 2
  • 3
  • 4
  • 5

KeepAlive

KeepAliveなし

count: 0

KeepAliveあり

count: 0

Suspense

ページに設定

vue suspense page

コンポーネント単位（Suspenseを使わない）

loading...0

useAttrs

your name
props
{
  "aaa": "aaa!",
  "bbb": "bbb!",
  "modelValue": "your name"
}
attrs
{
  "class": "my-class",
  "id": "10",
  "name": "test",
  "style": {
    "background-color": "lightblue"
  },
  "disabled": "true",
  "readonly": "true"
}

useSlot

すべて未設定

ヘッダ未設定
デフォルト未設定
フッタ未設定

デフォルトだけ設定

ヘッダ未設定
デフォルトだけ設定
フッタ未設定

すべて設定

ヘッダー
デフォルト
フッター

useId

id1: v-0-0-0
  • id2: v-0-0-1
  • id3: v-0-0-2
  • id4: v-0-0-3
id1: v-0-0-4
  • id2: v-0-0-5
  • id3: v-0-0-6
  • id4: v-0-0-7
id1: v-0-0-8
  • id2: v-0-0-9
  • id3: v-0-0-10
  • id4: v-0-0-11