上でコンポーネントをインストールできる。
これで、< BaseIcon >< /BaseIcon >などのタグを使うことができるようになる。

↑ 親コンポーネント

以下はオリジナルvueファイルで、likeHeader.vue。
これを上でimportしている。これで、componetsでlikeHeaderを指定することで、HTMLタグにて使うことができる。

↑ 子コンポーネント

https://qiita.com/sho_U/items/a9910a0fabb14717591e
https://ja.vuejs.org/guide/components/slots.html#slot-content-and-outlet

いろんなテンプレートの作成方法

【Vue.jsプログラミング入門講座】Vue.jsのテンプレートの記述方法いろいろ

 

Component

おまじないで、Vue.createApp。
そしてcomponentsでhello-helloという名前をつけることで、hello-helloタグを使うことができる。
templateにhello-helloタグによって置き換えるhtmlコードを指定できる。
つまり、hello-helloタグの箇所が、< div >{{message}}< /div >になる。

props

Animation

    click!
	
		
hogehoge
	

transitionタグを囲むことで、その箇所でアニメーションをつけることができる。
そしてtransitionタグのname属性を指定することができ、それをすることで、そのname属性が入ったアニメーションを適用できる。
transitionにname属性を指定しない場合、アニメーションのclass名はv-enter-fromやv-enter-activeのように、プレフィックスにv-がつく。
しかしname属性を指定すると、例えば上のようにfadeを指定した場合、アニメーションのclass名でfade-enter-fromやfade-enter-activeのようにプレフィックスでfade-をつけることで、fadeのアニメーションを独自に適用することができる。
これにより、いろんなところで同じアニメーションが適用されなくなり、個別適用になる。

animationをつけたい場合は、つけたい要素をtransitionタグで囲む必要がある。そうするとアニメーション時にvueがclassを付与する

クラス名	説明
v-enter-from	enterの開始状態
v-enter-active	enterのアクティブ状態
v-enter-to	enterの終了状態
v-leave-from	leaveの開始状態
v-leave-active	leaveのアクティブ状態
v-leave-to	leaveの終了状態

v-enter時にどんなアニメーションをしたいかをそれぞれcssで定義します。
enterの開始時つまりアニメーションの開始時に要素に付与するclassで、そのclassにどんなアニメーションかをCSSで定義することで、開始時にアニメーションをつけるといった仕組みになる。

 

さまざまなディレクティブ

「Vue.jsでは、HTMLに対して独自の属性を追加することでDOM操作を行うことができます。
この独自の属性のことをディレクティブと呼んでいます。
ディレクティブ名は全てv-から始まります。」（これはコピペ）

v-で通常の処理を考える

v-for, v-if, v-show

項目	説明
v-for	通常forは繰り返しなので、v-forは繰り返し処理
v-if	通常ifは条件分岐なので、v-ifは条件分岐、v-else-if、v-elseの3種類。これらセットで使う
v-show	通常showというと見る/見えないという意味なので、v-showは表示非表示

→ v-ifは、要素の表示を切り替えるため、非表示になった場合は、DOMから完全に削除されます。一方でv-showの要素は、常にレンダリングされて DOMに残り続けます。つまりv-ifを使用した場合は、v-showと比べてリソースを節約することができます。

v-on

 

項目	説明
v-on	イベントを監視する。v-onでこの要素に対して何かクリックしたり、フォーカス当てたりなどのイベントが発生した際の処理を定義する。通常onはjqueryとかだと何かイベントが起きた時を意味するので(onclickやon("focus", function(){}) など)、イベントが起きた時を意味する。

 

例として、
以下のように省略形で@を使うこともできます。

項目	省略記法	説明
v-on:click	@click	クリックした際の処理
v-on:focus	@focus	フォーカスが当たった際の処理
v-on:blur	@blur	フォーカスが当たった際の処理
v-on:input	@input	入力欄に入力した際の処理
v-on:keydown.enter	@keydown.enter	キーボードで打った際の処理？

→ v-on:clickは@click、v-on:blurは@blur、v-on:focusは@focus、v-on:inputは@input（@inputは欄に入力された時に発動する。）今までのjqueryのような$("").click(function(){})はclickしたときに実行という意味だが、@click="処理する関数名"になる。@keydown.enter

このように@click="methods名"でもいいし、@click="methods名()"で呼んでもいいし、methodsの関数に引数があるなら、@click="methods名( 引数 )"としてもいいし！

無名関数を使う。inputvalue: (value)->{ }     valueに値が入って、それで処理をする。別に関数名いらないから無名関数でいいって感じ。

 

v-model, v-on, v-bind

v-model:
v-bind: v-bindはHTML属性の属性を変更するなどに使うもの。classを変えたい場合は、v-bind:class=""としたり、v-bind:width=""で幅を変更するなど。
v-model = v-bind + v-on
（v-onは@clickや@inputなどhtml側で何かが起きた時にvueの関数を実行するといった感じ。つまりhtml → vue？。v-bindはvueからしか変更できないようにするつまり縛る(bind)ということで、vue→htmlへの変更をする。それぞれ一方向。そしてv-modelは両方が可能。html→vue、vue→html）
ディレクティブの省略記法 「v-bind: ⇒ :」「v-on: ⇒ @」

 

v-text

 

templateタグ

templateタグは、divとか配置してv-ifとかしたいかもだけど、そうする必要のない場所やそういう感じでv-ifを作りたいがためにdivタグなどを用意してDOMが崩れたりしないように、するもの？
だから条件をつけたりしてそのtemplateタグ内にあるタグなどを表示したりする。（レンダリング）

単純に以下のようなものがあったとする。

としたとき、okがfalseなら、上のh1,p,pは表示されず、okがtrueなら

  
Title
  
Paragraph 1
  
Paragraph 2

が読み込まれて表示される。
だからあくまでdivタグなどは用意したくないけど、v-ifなどを使いたいがためにtemplateタグを使ったりもできるよ！templateタグ自体に何かhtmlの意味を持つものではないから描写されたりしないのでただの条件指定などに使える。
https://v2.ja.vuejs.org/v2/guide/conditional#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%A7%E3%81%AE-v-if-%E3%81%AB%E3%82%88%E3%82%8B%E6%9D%A1%E4%BB%B6%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97

 

以下のような例は分かり易いかもですね！

ulとliの間に通常divは入りません。でもv-forを使って繰り返しでliを作成したいとします。
なのでdivを入れるとブロック要素となりおかしくなるので、何も意味を持たないtemplateタグを使ってそこにv-forでリスト化してます。

 

v-forなどvueの機能は使いたいけど、そのためにdivなどをわざわざ設定せずに機能を使いたい場合にtemplateタグを使うイメージなんですかね？

 

Classの変更

jQueryではaddClassやremoveClassでclassの追加をしたり、削除をしたりなどが可能でした。
直感的に、あるid=aaaの要素にクラスを追加したい場合は、
$("#aaa").addClass("class名");
削除であれば、
$("#aaa").removeClass("class名");
で直感的に書くことができました。

これをvueで実現するには「v-bind:class='{classA: 式, classB: 式}'」という形式にして対応をするといった方法になります。

「v-bind:class='{classA: 式, classB: 式}' という形で指定します.
式の評価結果が true か false かに応じて key に指定しているクラスの on/off を切り替えることができます.
今回のサンプルでは, v-bind:class='{active:isActive}' と指定しているので isActive の値に応じて .active クラスの on/off が切り替わります.」（コピペ）

     
     
    
  更新
  
表示



  
  

同じ

dataとは

v-modelで入力欄のvalueを指定して置き、
dataでまず初期値を入れておく。
そして入力をするとonにより、下のテキストに入力したい値を反映してくれる
https://reffect.co.jp/vue/vue-js-input-operate/
そもそもdataってなんで必要？
初期値をいれるだけでしょ？
別に初期値なら直接inputのvalueに入れておいてもいいじゃん。。。
↓
これをvueのインスタンスで定義することで、
vueのコントロール配下にvalue属性を定義したことになるので、これにより、
vueでこの属性をコントロールできるようにしたということになります。
なのでdataは大事で、
これでv-bindつまりその要素とvueをバインディング（紐づける）ことができる。

非同期処理

jQueryであれば、
$.ajax("送り先のphpファイルパス", "送るデータjson形式", function(data){ // 成功した際の処理。データはdataで受け取り });
という形式で処理を書くことができました。

Vueではどのようにしてかけるでしょうか。
クリックした際に非同期処理をするのであれば、なんとなくですが、
@click="ajax"みたいにして、methodプロパティのajax関数を実行させて、その中でajax通信処理を書くことになりそうです。
jQueryではないので、javascriptで標準であるPromiseなどを使って書く感じになります。