CodeSandboxでVue.jsに再入門する

概要

お仕事でVue.js触ることがありますがぶっちゃけちゃんとわかっていなくて雰囲気でやってきたので、CodeSandboxを使って再入門することにした。

やること

  • CodeSandboxでVue.jsのプロジェクトを作成する。
  • デフォルトで作成されているファイル内のコードを見て、疑問を潰していく。

デフォルトのプロジェクト

こんなかんじです。 f:id:wawawa12345:20180304181029p:plain

デフォルトのファイルをざっくり説明

  • Files/static/.keep:空のファイル。上書き保存用かな?
  • Files/index.html:表示されるhtmlファイル。
  • Files/package.json:CodeSandboxで使用する設定っぽい。
  • Files/src/App.vue:HelloWorld.vueをimportして使うコンポーネントsとして定義してるっぽい。スタイルも書いてある。ロゴファイルの呼び出しとHelloWorldコンポーネントの呼び出しも書いてある。
  • Files/src/main.js:VueオブジェクトをnewしてAppをimportしてる。
  • Files/src/assets/logo.png:Vueのアイコン画像。
  • Files/src/components/HeloWorld.vue:index.html内で表示するメッセージやリンクを定義している。スタイルも書いてある。

疑問を潰す

HelloWorld.vueの<template>

  • .vue拡張子のファイルにのみ記述可能。最大ひとつのみ。
  • 内容は文字列に展開され、コンパイルされたVueコンポーネントのtemplateオプションで使用される。

HelloWorld.vueのexport default

  • 指定したファイル (またはモジュール) から関数、オブジェクト、プリミティブをエクスポートするために使用する。

main.jsのVue.config.productionTip

  • VueのAPIのひとつ。
  • Vue2.2.0から使用可能。デフォルトはtrue。
  • falseに設定すると、 Vue の起動時のプロダクションのヒントが表示されなくなる。

main.jsのnew Vue

new Vue({
   //オプションオブジェクト
})

オプションオブジェクト

el

components

template

  • 型:string
  • 文字列のテンプレート。テンプレートは、マウントされた要素として置換される。
  • で始まる文字列の場合、クエリセレクタとして使用され、該当要素のinnerHTMLをテンプレート文字列として使用する。

  • これにより、テンプレートを組み込むための共通の
    広告を非表示にする