とある企業様のLP制作で恥ずかしながら初めてVueを使いました。そのときの使い勝手なりをVue初心者の目線で書きます。
目次
はじめてのVue
先述の通り、LP制作でVueを使う必要が出てきたため、はじめてVueを触りました。
Vueを採用した理由は、まずLP内に簡単な計算シミュレータを作らなくてはならなかったのですが、①LPなので簡単に早く作りたかった ②Vueを実戦投入したかった といったところです。
特にVueはCDNで気軽に導入できるので今回の案件にはぴったりです。
以前から実戦で使用したくて勉強はちょくちょくしていたのですが、NuxtやVue CLIなんか自分にはまだお早い感じがしてたので、computedひとつで仕様が完結する今回の案件にぴったr（何回言うんだ）
自分用Vue CDNスターターキット
今回Vueを使ってみて、新技術を取り入れる怖さみたいなものが多少は薄れた気がするので、今後はどんどん新しいことに挑戦していきたい所存です。
ついでに下にコピペ用Vue CDNスターターキットHTML5を載せておきます。
※自分用なので人によって必要ないコードが多数含まれます。
こんなもの使う人いないとは思いますが、使う際は連絡不要で取って貼ってしちゃってください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no">
<meta discription="簡単コピペVueはじめようセット">
<title>簡単コピペVueはじめようセット</title>
<!-- stylesheet -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>ヘッダーだよん</header>
<div id="app">
<h1>コンテンツ部文</h1>
<h2>{{ txtExample }}</h2>
<p>{{ sumExample }}</p>
</div>
<footer>
<p>© EXAMPLE All Rights Reserved.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
txtExample: 'テキスト',
},
computed: {
sumExample: function() {
return 1 + 2 + 3 + 4 + 5;
},
},
})
</script>
</body>
</html>
まとめ
LP制作に必要な技術が少なかったので今回はVueを限定的に使用する感じでしたが、今後はもっと大きな案件でサイト自体をVueで作れるように精進していきたいと思います！
シミュレートは複数の値が同時に変更されるのでモノを作った感じがして入門におすすめかも知れないと感じた今日このごろでした。
それではまたお会いしましょう。
