こんにちは、こずえです。
プログラミング学習記録88日目です。
今回はVue-CLIでプロジェクトを作成、HelloWorld、コンポーネントの親子間のデータ受け渡しを試しました。
所感：作る機能の実装イメージが整理できてないのでそこは別で時間をとろう。
合計学習時間
前回までの時間：152.50[h]
今回の時間：5.50[h]
合計時間：158.00[h]
学習内容
今回はやったことまとめ
- Vue-CLIでアプリのプロジェクト作成
- サンプルの表示に該当するviewやコンポーネントを確認、除去
- 土台となるコンポーネント作成
- 「はじめに — Vue.js」を読みながらHelloWorldを宣言的レンダリング
- 子コンポーネントの内容を親コンポーネントへ表示
- コンポーネントで親子間のデータの受け渡し
Vue-CLIでアプリのプロジェクト作成
環境構築の際に作成したプロジェクトは設定がモリモリなので、何があるか把握するだけでも大変。
最初はそのまま使おうと思っていたんですが、中身確認していたらあっという間に時間が消えました。
そのためcreate時の選択は以下としました。
(あとで必要になった時に追加はできたりするのかな…？)
- Please pick a preset
- Manually select features
- Check the features needed for your project
- Babel, CSS Pre-processors, Linter
- Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
- Sass/SCSS (with node-sass)
- Pick a linter / formatter config
- Standard
- Pick additional lint features
- Lint on save
- Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
- In dedica ted config files
HelloWorldを宣言的レンダリング
Hello World!
App.vueで以下のように
<template>
<span>{{msg}}</span>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
msg: 'Hello World.'
}
}
}
</script>
コンポーネントの data オプションは関数でなければなりません。各インスタンスが返されるデータオブジェクトの独立したコピーを保持できるためです
コンポーネントの基本 — Vue.js
自分メモ：
コンポーネントを再利用した際に、dataが関数ではなくオブジェクトだった場合、再利用されたすべてのコンポーネントが同一のオブジェクトを扱うことになってしまう。
コンポーネントで親子間のデータの受け渡し
propsオプションでデータの受け渡しが可能になります。
親コンポーネントデータを受け取るために、子コンポーネントにpropsオプションを書きます。
私は勘違いで親コンポーネントの方に書いて結構な時間つまづきました。