Open3
Vue.js
masa4tv-on @
v-model
v-bind :
v-slot:
computed
ライフサイクルフック
pinia
form作る時に便利
useAttrs
provide injectバケツリレー回避のもの
コンポーザブル（外部で使い回し可能な関数作れること）
<Transition>と<TransitionGroup>: cssでのアニメーションに使用するもの
<KeepAlive>: コンポーネントの切り替えによる初期化を防ぐもの
<Suspence>: 、非同期コンポーネントの読み込みが完了するまで一時的なコンテンツを表示するための機能
masa4tpiniaではvue3からのset up 内の関数の書き方ができて今までの状態管理よりわかりやすくなった。
概念 state, getters, actions
これらはコンポーネント内のdata, computed, methodsと同等
今までの書き方
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0, name: 'Eduardo' }),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
},
})
setup 関数のような書き方
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const name = ref('Eduardo')
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, name, doubleCount, increment }
})
refのデータを使う場合でも.valueつける必要がない。
ref()s become state properties
computed()s become getters
function()s become actions
masa4tv-for をオブジェクトに適用する
v-for は、オブジェクトの各プロパティを反復処理するのにも使用できます。反復処理の順序は、オブジェクトに対して Object.values() を呼び出した結果に基づきます:
const myObject = reactive({
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
})
template
<ul>
<li v-for="value in myObject">
{{ value }}
</li>
</ul>
以下のように 2 つ目のエイリアスを指定すると、プロパティの名前（「キー」とも呼ばれる）を取り出すことができます:
template
<li v-for="(value, key) in myObject">
{{ key }}: {{ value }}
</li>
さらに 3 つ目のエイリアスを追加すると、インデックスを取り出せます:
template
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>