Vue.jsの練習をする
練習のためHexoブログ記事内でVue.jsを動かす。
最新のVue3.0を使う。
記事ファイル「〇〇.md」中に直接書いたら動く。
本文中に以下のように書く。
1
| <script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>
|
1
2
3
| <script>
source code
</script>
|
すると反映される。
1. v-modelで入力テキスト取得
テキストボックスに入力した文字列を取得してリアルタイムで下のテキストを書き換える。
以下のように書く。
記述は多いがシンプル。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {% raw %}
<div id="app">
<input type="text" v-model="message" />
<p>入力したテキスト → 「{{ message }}」</p>
</div>
{% endraw %}
<script>
Vue.createApp({
data: function() {
return {
message: "test",
}
},
}).mount("#app")
</script>
|
2. v-onでイベント実行
ボタンを押すとイベントが発生して内部の数値が増える。
増えた値をテキストに反映させる。
ボタン押すと増える → 「{{ count }}」
以下のように書く。
methodsで関数が作れる。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| {% raw %}
<div id="app2">
<button type="button" v-on:click="Count">Count</button>
<p>ボタン押すと増える → 「{{ count }}」</p>
</div>
{% endraw %}
<script>
Vue.createApp({
data: function() {
return {
count: 1,
}
},
methods: {
Count: function(event){
this.count *= 2
},
},
}).mount("#app2")
</script>
|
3. v-bindで画像変化
ボタンを押すとイベントが発生してHTML要素が変更される。
img srcを変更することで画像を変化させる。
以下のように書く。
関数内でいろいろ書ける。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| {% raw %}
<div id="app3">
<button type="button" v-on:click="Change">画像変化</button>
<div>
<img v-bind:src="imgSrc" alt="" />
</div>
</div>
{% endraw %}
<script>
Vue.createApp({
data: function() {
return {
imgSrc: "/../images/post27_001.jpg",
isChange: false
}
},
methods: {
Change: function(event){
this.isChange = !this.isChange
if (this.isChange){
this.imgSrc = "/../images/post23_014.jpg"
}
else{
this.imgSrc = "/../images/post27_001.jpg"
}
},
},
}).mount("#app3")
</script>
|
4. transitionでアニメーション
ボタンを押すとv-showが切り替わり表示・非表示が変化する。
transitionタグ内の要素が表示・非表示するときの動作をCSSで制御する。
以下のように書く。
opacity(不透明度)を800msかけて緩やかに変化させている。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <br>
<style>
.v-enter-from,
.v-leave-to {opacity: 0;}
.v-enter-to,
.v-leave-from {opacity: 1;}
.v-enter-active,
.v-leave-active{transition: opacity 800ms ease;}
</style>
{% raw %}
<div id="app4">
<button v-on:click="isShow = !isShow">アニメーション</button>
<transition>
<div v-show="isShow">
<img src="/../images/post23_014.jpg" alt="" />
</div>
</transition>
</div>
{% endraw %}
<script>
Vue.createApp({
data: function() {
return {
isShow: true,
}
},
}).mount("#app4")
</script>
<br>
|
5. componentで使いまわす
ボタンを押すと背景色が切り替わるテンプレートを作成。
それを3つ並べると独立して動く。
以下のように書く。
テンプレートはＨＴＭＬ側で書いている。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| {% raw %}
<div id="app5">
<color-change/>
<color-change/>
<color-change/>
</div>
<script type="text/x-template" id="template">
<div v-bind:style="{ 'background-color': bgColors[N%6]}">
<button v-on:click="N += 1">色変化</button>
</div>
</script>
{% endraw %}
<script>
Vue.createApp({
components: {
"color-change": {
data: function() {
return {
N: 0,
bgColors: ["navy", "teal", "green", "olive", "maroon", "purple"],
}
},
template: "#template"
}
}
}).mount("#app5")
</script>
|
