半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録88日目

更新日:

こんにちは、こずえです。
プログラミング学習記録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!

HelloWorldを宣言的レンダリング

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オプションを書きます。
私は勘違いで親コンポーネントの方に書いて結構な時間つまづきました。

-プログラミング, 学習, 記録
-, ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.