こんにちは、こずえです。
プログラミング学習記録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オプションを書きます。
私は勘違いで親コンポーネントの方に書いて結構な時間つまづきました。