テキスト変換ツール①ー概要 ではフレームワークのVue3を使ってます。勉強したばかりなので、忘備録を残します。
CDN
Vue3のCDNです。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
v-model
双方向バインディング。変数が変わるだけで表示が変わるので便利です。
<input
type="checkbox"
value="continuous_space_deletion"
v-model="space_deletion"
>
</div>
<p>{{space_deletion}}</p>
data()で初期値を設定できます。
const { createApp } = Vue;
createApp({
data() {
return {
space_deletion[continuous_space_deletion],
};
},
}).mount("#app");
v-on:click
クリックイベントです。
<input type="button" value="メソッド" v-on:click="my_method" /><
クリックするとmy_methodを呼び出すことができます。
const { createApp } = Vue;
createApp({
data() {
return {
};
},
methods: {
my_method() {
},
},
}).mount("#app");
v-on:change
チェックボックスやラジオボタンが変更になった時のイベントです。
クリックイベントではチェックボックスやラジオボタンが切り替わるときのに間に合わないので、v-on:changeを使います。
<input
type="checkbox"
value="continuous_space_deletion"
v-on:change="my_method"
>
const { createApp } = Vue;
createApp({
data() {
return {
};
},
methods: {
my_method() {
},
},
}).mount("#app");