#TIL_21.09.30

Vue (3)
フォーム入力のバインド

v-bind:バインディング一方向データ

v-model:双方向データのバインド
ハングル入力では、1文字が完了し、次の文字に反映される現象があります...v-bindを使用して双方向データをバインド

v-forデータ出力によるバインディング

v-model.lazy ... .lazyでバインドすると、入力するたびにアクションが発生し、入力するたびにアクションが発生する(enterなどを通過する)のではなく、changeイベント

が発生する

.trim ... 前後の空白を解消してデータを更新できます.(修正されたものと見なされていないため、watchはトリガーされません)

input要素は数字を入力することによって文字データを識別することができる….numberから数値に変換できます

構成部品ベース

グローバル構成部品/ゾーン構成部品...通常の構成部品の登録は、領域よりも優先されますが、頻繁に使用するか、いつでも使用できる構成部品は、グローバルよりも優先されます.

構成部品の再使用...パッケージ

SFC ... 単一のファイルコンポーネント(.vue)/ブラウザでは直接操作できないため、jsに変換されたwebpack、packageなどを使用する必要があります.

グローバル構成部品

const app = Vue.createApp(App)
app.component('컴포넌트-이름', {
	template:`<div>{{ name }}</div>`,
    props: ['name'] // 외부로부터 데이터를 받아올 때 사용함 (name 이라는 이름의 데이터를 받아옴)
    data,
    methods,
    created,
    ...
})
const vm = app.mount('#app')

props外部からのデータ入力のため、変更権限(readonly)…this.$emit('커스텀 이벤트의 이름', 이벤트 함수)データの変更を許可

外部データ受信時にpropsを使用してデータをエクスポートする場合に$emitを使用します.

Node.jsとNPM

Node.js:javascript実行時(javascript実行環境...ローカルコンピュータ/Webブラウザ)...JavaScriptによる制御用

npm: node package managernpm init -y ... スタートアップパッケージnpm install vue@next ... vue 3バージョンのインストールnpm i serve -D ... 開発サーバパッケージのインストール(実際のサーバとは異なり...開発時のみ使用)-D ... 開発のみ(ブラウザ環境で実際に実行する場合に必要なパッケージではない)

npx: node package run(x)

package.jsonとpackage-lock.jsonを束ねて管理するだけで、環境が変化してもバージョンは変わらない.

node modulesパッケージは容量が大きく、packageです.jsonとpackage-lock.いつでもjsonで生成できるため(npm i)、Githubにアップロードしないなどの特別な管理は不要です.

gitignore -> node_modules/.vscode/.DS_Store/...

振り返る
v-modelというコントローラだけでデータの双方向連動を実現することが最大のメリットだと思います.
コンポーネントに入るとpropsとemitを使用してデータを修正するのは難しいです.この部分を重点的に勉強しなければならない.