前回、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" />
