LoginSignup
0
3

More than 3 years have passed since last update.

@N700A

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

Last updated at Posted at 2020-01-19

対象読者

  • 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をダブルクリックすれば、ページが表示されます

参考

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
3