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

Vue.jsをシンプルに理解しよう その2

More than 1 year has passed since last update.

その2

次がありました、へへへ
Vue.jsをシンプルに理解しよう
前回書いた記事のリンクを貼っておきます。
今回は公式が

コンポーネントは Vue.js の最も強力な機能の 1 つです。

とか言ってるコンポーネントについての話です。

その前に

Vueインスタンス内のelというオプションについて確認しておきましょう。
elというオプションが指定した要素がVue.jsが作用を及ぼす範囲になります。elはelementの略です。
下の図を見てみましょう。

Vue_-_JSFiddle.png

id="app2"内の要素についてはVue.jsが作用していないことがわかります
jsfiddleで確認してください

Vue.jsはターゲットにした要素の内側でしか作用しません。
当たり前だよなぁ?

コンポーネント

本題です。
すごく簡単に言いますと、コンポーネントとはhtmlの部品を出したり消したりするするための機能です。
とは言っても、なかなか想像できないと思いますので下の図を見てください。

Vue_-_JSFiddle1.png

jsfiddleで確認してください。

ダメなコンポーネントの書き方

さきほどelというオプションについて説明したので、合わせてダメなコンポーネントの書き方を見てみましょう。

Vue_-_JSFiddle2.png

上の図はさきほど説明した通りVue.jsはターゲットにした要素の内側でしか作用しません。
なのでコンポーネントは作成されません。

Vue_-_JSFiddle3.png

上の図ではVueインスタンスを作成しないままVueのコンポーネントを使用しようとしていますが、これもダメです。
Vueインスタンスの外部にコンポーネントを書いているのでいける気がしますが無理です。(そもそもインスタンスがないからcomponentメソッドを呼べない)

当たり前だよなぁ?(僕は普通にダメな書き方で書きました)

componentの特徴

componentの特徴を以下の図にまとめました。
注釈が多すぎて見にくくなっていますが我慢してください、おなしゃす!

Vue_-_JSFiddle2.png

jsfiddleで確認してください。
コンポーネント、便利すぎるぜ...

注意点

コンポーネント内でdataオプションを使う場合は必ず以下のように記述しないといけません

data: function () {
    return {
      /* コンポーネント内で使いたいオブジェクト */

    }
  },

コンポーネントはややこしい

コンポーネントは色々な書き方があります、非常に紛らわしいので「おれはこれで書くぜ!」と決めてしまうのもいいでしょう。

グローバルコンポーネント

グローバルコンポーネントはコンポーネントの作用する範囲が全てのVueインスタンスに及びます。
下の図を見てください。

Vue_-_JSFiddle3.png

jsfiddleで確認してください。

ローカルコンポーネント

ローカルコンポーネントでは、コンポーネントの作用する範囲が呼び出したVueインスタンス内のみになります。

Vue_-_JSFiddle4.png

矢印と文字を使いすぎてよくわからなくなっていると思うので、
jsfiddleで確認してください。

x-templateを使う

x-templateなるものを使えばjsに書かなくてもhtmlにテンプレートを書けたりします。

Vue_-_JSFiddle5.png

jsfiddleで確認してください。

.vueという拡張子の外部ファイルに記述する

この記法についてはjsfiddleで確認する方法がわからなかったので飛ばしました、許してくださいオナシャス!

読み込まれる側(external_resource.vue)
<template>
  <div>うっすお願いしまーす</div>
</template>
読み込む側
import component from '.external_resource.vue'

export default { 
  components: { 
    component
  }, 

外部に記述したテンプレートの内容をimportして読み込みます。
この記述の仕方については調査不足です!センセンシャル!

おわり

今回はかなりややこしかったですねお疲れ様でした。
コンポーネントをふわふわっとわかってもらえてでしょうか?
Vue.jsは基本的なディレクティブ(v-onとかv-forとか)とコンポーネントの書き方さえ分かれば入門終了だと思います。
次はさらにややこしいVue初心者最大の難関(だと勝手に思っている)propsとemitを使ったVueインスタンスとコンポーネント間の変数のやりとりについて書ければと思っています(次があれば)

yusuke_ten
難しいことは簡単に、簡単なことは面白く
https://yusuke-ten-portfolio.herokuapp.com/
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
ユーザーは見つかりませんでした