⑱Vue を始めよう

前回、Vue.js のプロジェクトに関わって、今回、チーム担当とは別のVueチームが JSF( .xhtml ) とは別のVue で構成されれた一連のサイトであった。今後の準備のためにもVue.js を細々と研究してきた。

Vue2 から Vue3 形式へ大きく変わっている。今はVue3スタイルが主流。

プロパティ

data
computed
method
色々あり、これらは都度ググるで確認。
以下、Vue 2 ,  3での .vue  ファイルに script , template に HTMLをまとめて記述する方式、など様々の改良がある。
以下、<template>を導入する以前の古典的スタイル。

------   someFor.html ---
<div id="app">
<form>
<input type="button" value="変更" v-on:click="onclick" />
</form>
<ul>
<li v-for="itemm in listXX" v-bind:key="itemm">{{ itemm }}</li>
</ul>
</div>

--- someFor.js ---

new Vue({
  el: '#app',
  data: {
  listXX: [ '赤パジャマ', '青パジャマ', '黄パジャマ' ]     /// Vue2 では配列をこの形式で定義
},
methods: {
  onclick: function() {
    // this.list[1] = '茶パジャマ';     /// →このような直接参照で変更できない。

     Vue.set(this.listXX, 1, '茶茶茶茶茶茶');   /// その他　push, pop(), shift, unshift, splice sort, reverse などあり。
     this.listXX.splice(1, 1, '茶茶茶茶茶');
    }
  }
});

これを Vue 3で記述してみる。
codesandbox　というオンラインコンパイラの活用が環境構築無し、最短ルート。
https://codesandbox.io/s/vue

----- App.vue --------------------------------------------
<template>
  <form>
　<input type="button" value="変更" v-on:click="changeData" />