Vue.jsを試しに使ってみたので考え方を整理する。

先日、Vue.jsの勉強をして試しにページを作ってみた。
[WinActor]スクリプト実行ライブラリ

使い方、考え方を纏めてみる。

リファレンス見ながら思った機能実装する為に必要な機能だけ掻い摘んで使ってみた解釈なので厳しい突っ込みしないデネ(;^ω^)。。。

HTMLのコード。

<div id='main_menu'>
  <div>
    <ul>
      <li v-for="item in items">
        <a href="#" class="small-font" v-on:click.prevent="detail_load" v-bind:id="item.id">{{ item.title }}</a>
      </li>
    </ul>
  </div>
  <div>
    <table>
      <tbody>
        <tr><th>タイトル</th></tr>
        <tr><th>{{ current.title }}</th></tr>
        <tr><th>イメージ</th></tr>
        <tr><td><img width="500" v-bind:src="current.link" /></td></tr>
        <tr><th>スクリプト　<input type='button' target="src_body" value="コピー" v-on:click="copy_content" /></th></tr>
        <tr><td><textarea id="src_body" class="small-font" rows="20" v-model="current.source"></textarea></td></tr>
        <tr><th>注釈　<input type='button' target="memo" value="コピー" v-on:click="copy_content"/></th></tr>
        <tr><td><textarea id="memo" class="small-font" rows="15" v-model="current.discript"></textarea></td></tr>
      </tbody>
    </table>
  </div>
</div>

Javascriptのコード。

var app = new Vue({
  el: "#main_menu",
  data: {
      items: [{ title: "読み込み中。。。" }],
      current: { title: "上のメニューからライブラリ選択して下さい。" },
      state: "init",
      err: null,
      errored: null
    },
  created: function (){ 
      axios.get('https://yizm.work/ajax/source_ajax.php', { params: {type: "index", category: "winactor"} })
      .then(response => {
        this.items = response.data
      }).catch(err => {
        (this.errored = true), (this.error = err);
      }).finally(() => (this.state = "finally" ));
    },
  methods:{
    detail_load: function(e){
      let rec_id = e.target.getAttribute('id');
      axios.get('https://yizm.work/ajax/source_ajax.php', { params: {type: "detail", category: "winactor", id: rec_id } })
      .then(response => {
        this.current = response.data[0];
      }).catch(err => {
        (this.errored = true), (this.error = err);
      }).finally(() => (this.state = "finally" ));      
    },
    copy_content: function(e){
      let tgt_id = e.target.getAttribute('target');
      document.getElementById(tgt_id).select();
      document.execCommand("Copy");
      alert('コピーしました。');
    }
  }
});

まず、一番外のDivのid使ってVueを要素に紐づけると。。。

<div id='main_menu'>

var app = new Vue({
el: "#main_menu",
data: { ～

『el: 』にクエリセレクタを指定して、new Vue({・・・});のオブジェクトが要素をガブッとかじる訳だ。

すると、その要素の子要素とかで new Vue({ ・・・ });の中の宣言が紐づいちゃう訳だ。

今回、new Vue({ ・・・ });の中身で使ってる宣言は、これこれ。

el: ⇒ クエリセレクタで要素と紐づけを行う。

data: ⇒ ここで保持したデータを要素に紐づけて読み込みさせられる。

created: ⇒ Vueで要素をロードして、最初に実行される関数。

methods: ⇒ 個別に関数名を作って、v-on:って属性で要素のイベントと紐づけしていく。

あとは、イベント処理でdata:で管理してるデータを更新すれば、HTML要素に反映されるっていう便利な仕組み。サイコー。。。

タグの中のラベルにデータを反映する時は、{{ data: の要素 }} 実際の例はこんな感じ。

<tr><th>{{ current.title }}</th></tr>

でも、これだとtextareaみたいにタグで囲まれた範囲がValueと紐づいちゃうとことか、タグの中のラベルを特殊な読み方するタグには使えないので、v-model属性を使って紐づけを行う。

<tr><td><textarea id="memo" class="small-font" rows="15" v-model="current.discript"></textarea></td></tr>

v-model属性を使うと、双方向バインディングになってテキストエリアの内容をユーザが更新するとdata:の管理データが自動的に更新されて処理側でもそのまま使えちゃうとか。サイコー。。。

ちなみに、画像差し込みしてるとこみたいに属性値にデータ反映するときも{{ data: の要素 }}は使えなくて、今度は『v-bind:属性』っていうのを使う。

<tr><td><img width="500" v-bind:src="current.link" /></td></tr>

配列取得したデータで要素を複製して沢山作る場合の処理がここ。

v-for:属性使ってfor分みたいな宣言をいれてく。

<li v-for="item in items">
  <a href="#" class="small-font" v-on:click.prevent="detail_load" v-bind:id="item.id">{{ item.title }}</a>
</li>

itemsって配列を受け取ったのをitemっていうのに入れて、item.id・item.titleを取得してます。

あとは、クリックした時のイベントとmethods:で作った関数をv-on:で紐づけしてく。

v-on:click.preventってとこで紐づけしてるんだけども、.clickでクリックイベント発生するんだけども、そのままだとhrefリンク発生して画面リフレッシュ走っちゃうから.prevent付けるとイベントデフォルトをキャンセルできちゃう。。。超便利。

イベント処理側で、イベントオブジェクトを取得してevent.preventDefault()する必要がないってこと。

イベント処理側の関数では引数で受け取ったオブジェクト(eの場合)から、e.targetでイベント元のDOMが取得できる。

以上、Vue.js練習振り返りの走り書きでしたー。

個人的にはWPFとか使ったことがあって、MVVMパターンの考え方がなんとなくわかったのですんなりできて楽しかった。

Vue.jsを試しに使ってみたので考え方を整理する。

HTMLのコード。

Javascriptのコード。