ランニングコスト0の書籍管理webアプリを開発！ Vueってどんなもの？
※こちらの記事の内容は2022/3/27に執筆したものです。
初めに
この記事は、以下の元記事で紹介しているアプリを構築する際に使ったGASの機能について紹介している記事です。元記事からご覧ください。
Vueってなに？
Vueとはjava scriptのフレームワークで、クライアントサイドでレンダリングをするテンプレートエンジンとして使うことができます。特にjsの変数の値を変えた後に、HTMLに反映させる処理が自動化されているのが気に入っていてよく使います！
なおこちらの記事は初めにで紹介している記事を読みやすくするためのものなので、しっかり理解したい方はこちらの公式リファレンスをご覧ください。
Vueの書き方
最小構成
まずはこれでVueの動きを確認しましょう。このように実装すると、jsの変数textの中身がHTMLに表示されるはずです。(次以降は、HTMLはbodyの中身だけ掲載します。)
index.js
const app = new Vue({
el: '#app',
data: {
text:"ww"
}
});
index.html
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="app">
{{text}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
もちろん変数textの中身を変えれば表示も変わります。
index.js
const app = new Vue({
el: '#app',
data: {
text:"(/・ω・)/にゃー!"
}
});
使える値
オブジェクトでもなんでも使えます。
例えばdict型やlist型もこんな感じに使えます
index.js
const app = new Vue({
el: '#app',
data: {
text:"ww",
dictObj:{
'varInt':100,
'varStr':"100",
},
listObj:[
'a',
'b',
'c',
]
}
});
index.html
<div id="app">
<div>{{text}}</div>
<div>{{dictObj.varInt}}</div>
<div>{{dictObj.varStr}}</div>
<div>{{listObj[0]}}</div>
<div>{{listObj[1]}}</div>
<div>{{listObj[2]}}</div>
</div>
ifやfor
htmlの要素をifで表示を切り替えたり、forで繰り返し表示したりすることができます。その場合jsの値をifの判定に使ったりforで繰り返す要素として使います。
index.js
const app = new Vue({
el: '#app',
data: {
text:"ww",
dictObj:{
'varInt':100,
'varStr':"100",
},
listObj:[
'a',
'b',
'c',
]
}
});
index.html
<div id="app">
<div v-if="text=='ww'">aaaa</div>
<div v-if="text=='aa'">bbbb</div>
<div v-for="key in Object.keys(dictObj)">
<span>{{key}}:{{dictObj[key]+1}}</span>
</div>
<div v-for="val in listObj">{{val}}</div>
</div>
コンポーネント
コンポーネントとは、ざっくりいうと部品という意味です。HTMLの要素を部品化して、繰り返し使えるようにする仕組みです。
index.js
Vue.component('sample-component', {
template:"<div>hello</div>"
});
const app = new Vue({
el: '#app',
data: {
text:"ww",
dictObj:{
'varInt':100,
'varStr':"100",
},
listObj:[
'a',
'b',
'c',
]
}
});
index.html
<div id="app">
<div v-if="text=='ww'">aaaa</div>
<div v-if="text=='aa'">bbbb</div>
<div v-for="key in Object.keys(dictObj)">
<span style="border:solid 1px gray">{{key}}:{{dictObj[key]+1}}</span>
</div>
<div v-for="val in listObj">{{val}}</div>
<sample-component></sample-component>
<sample-component></sample-component>
</div>
コンポーネントを変えれば、それを使っている個所すべてが変わります！
index.js
Vue.component('sample-component', {
template:"<div>hello world</div>"
});
const app = new Vue({
el: '#app',
data: {
text:"ww",
dictObj:{
'varInt':100,
'varStr':"100",
},
listObj:[
'a',
'b',
'c',
]
}
});
コンポーネントの引数
コンポーネントには、値や処理を引き渡すことができます。
index.js
Vue.component('sample-component', {
props:['name'],
template:"<div>hello {{name}}</div>"
});
const app = new Vue({
el: '#app',
data: {
text:"ww",
dictObj:{
'varInt':100,
'varStr':"100",
},
listObj:[
'a',
'b',
'c',
]
}
});
index.html
<div id="app">
<div v-if="text=='ww'">aaaa</div>
<div v-if="text=='aa'">bbbb</div>
<div v-for="key in Object.keys(dictObj)">
<span style="border:solid 1px gray">{{key}}:{{dictObj[key]+1}}</span>
</div>
<div v-for="val in listObj">{{val}}</div>
<sample-component
v-bind:name="'aaa'"
></sample-component>
<sample-component
v-bind:name="'bbb'"
></sample-component>
</div>
ほかにもいろいろありますが、これ以上は難しくなるので本家のページに説明を譲ることとします！
以上にVueついての簡単なあれこれでした！