Help us understand the problem. What is going on with this article?

【Vue.JS】 WebPackを使わずにコンポーネントで遊ぶ

対象読者

  • 1. 環境構築はやりたくないけど、すぐにVueで遊んでみたい方
    • .vueファイルを使用する場合、WebPackサーバーなどの環境構築が必要となる
  • 2. 自分のPC上でとりあえず遊んでみたい方
    • ※ サイトとして公開する場合は、別途環境構築が必要

サンプルアプリ

  • クリックすると赤色→緑色に変化するコンポーネントを作る

手法

  • .vueファイルを使わずに、全て.jsファイルで定義する
  • import文 , export文を使わずにコンポーネントを使用する
    • 通常のJavaScriptでimport文を使用するとエラーとなるため

作り方

フォルダ構成

  • 空のフォルダを作成し、その中に以下の4ファイルを作成する
    • フォルダ名は任意。ここでは sample_folder とした
フォルダ構成
sample_folder
    ┝ application.html
    ┝ application.js
    ┝ parent_vue.js   ← 自作のコンポーネントを記述する
    ┝ vue.js          ← CDNをダウンロードする(後述)

ファイル生成方法

  • 下記のソースコードをファイルごとに丸コピすれば動作します
  • 解説を見たい方
    • 各ソースコードの下に解説がございます

1. HTMLファイル

application.html
<!DOCTYPE html>
<html lang="js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SampleApp</title>
</head>
<body>
  <div id="app">
    <!-- ② このdiv内で自作コンポーネントを呼び出している -->
    <parent-component></parent-component>
  </div>
</body>
  <!-- ① 同一フォルダ内のファイルをインポートする。-->
  <script src="vue.js"></script>
  <script src="parent_vue.js"></script>
  <script src="application.js"></script>
</html>
  • <script src="○○.js"></script>の部分

    • この部分で同じフォルダ内の.jsファイルを全て読み込む
  • ② 自作したコンポーネントを呼び出すために、<div id="app"></div>タグを作成する

    • このdivの外では、vueコンポーネントを使用できないことに注意
    • id名は何でも良いが、後述するapplication.js内で定義するid名と同名とする
    • <parent-component></parent-component>が自作したコンポーネントタグである
      • 上記のタグ名は何でも良いが、後述するparent_vue.js内で定義するコンポーネント名と同名でなければならない

2. JSファイル(コンポーネント呼び出し用)

application.js
var parent = new Vue({
    el: "#app",
    // application.htmlで定義したid名と同一にする
});
  • このファイルでVueインスタンスを生成する
    • el:には、application.htmlで定義したid名を書く

3. JSファイル(コンポーネント定義用)

parent_vue.js
// Vue.component('コンポーネント名', {定義}) の形式とする
Vue.component('parent-component',{
  template: 
  ` <div id="parent_root">
      <div v-bind:style="myStyle" v-on:click="changeColor">
        {{message}}
      </div>
    </div>
  `,
  // component内ではdataは関数として定義しなければならない
  data: function() {
    return {
        message: "Click! Me.",
        myStyle: {
          color: 'red',
          fontSize: '18px',
          "background-color": '#ebb',
          border: 'solid 2px',
        }
    }
  },
  methods: {
    changeColor: function(){
      console.log("checked.");
      this.message ='confirmed'; 
      this.$set(this.myStyle, 'color', 'green'); 
      this.$set(this.myStyle, 'color', 'green'); 
      this.$set(this.myStyle, 'background-color', '#beb'); 
    }
  },
});
  • このファイルでは、自作のコンポーネントを定義する
    • Vue.component('コンポーネント名', {定義})の形式とし、{ }内に記述する
    • コンポーネント名は、application.htmlで使用するコンポーネントタグと同名でなければならない

補足: templateの書き方(規則)

  • template:部分とは
    • htmlに相当する部分。下記2点を守ること
      • 1. template内では、初めと終わりをバッククォーテーションで囲うこと
      • 2. template内では、必ず単一の<div>タグで囲うこと
参考)templateの書き方
template:
  `<div>
    この中に、htmlタグを自由に記述する
  </div>`,

補足: Style(CSSに相当)の書き方

  • 今回の書き方では<style>タグが使用できないため、代わりに2つの手法を紹介する
    • 1. v-bind:styleを使用し、自作のスタイルをdata:内で定義する
      • 本記事ではこの方法を採用。myStyleとして定義している
    • 2. is属性を使用して、styleタグを偽装する
      • template内に一旦別名のタグを作成し、is属性でstyleタグとして機能させる
      • 方法はこちら

4. CDNファイル

  • Vue公式のCDNダウンロードサイトを開き、直接組み込みの章までスクロールする
  • 開発バージョンボタンをクリックし、ファイルをダウンロード
  • ダウンロードしたvue.jsファイルを上記のsample_folder内にコピーすれば準備完了
    • (記事上部のフォルダ構成の章を参照のこと)
    • 簡単!

動作

  • 作成したapplication.htmlをダブルクリックすれば、ページが表示されます

参考

  • Vue.JS入門
    • たにぐちまこと氏の "ともすたチャンネル" (Youtube)
    • 初心者にもわかりやすく説明されているため、オススメです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした