![見出し画像](https://assets.st-note.com/production/uploads/images/19775663/rectangle_large_type_2_8e04e5194848d538a13ca3d1de2bcb58.jpeg?width=1200)
Vue.jsでwebアプリを作ろう#02(準備編)
こちらはJavaScript中級者向けの記事となります。前提として、HTML/CSSとJavascriptの基礎知識をお持ちの方が対象です。
前回はvue.jsの導入をしました。
1.BootstrapをCDNで導入
webアプリを作るためにデザインも整えていく必要があります。そこでBootstrapのCSSとJSもCDNを使って導入しておきましょう。
Bootstrap4.2 はじめにのページから
CSSのCDNリンク
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
JSのCDNリンク
こちらの二つのリンクを<head></head>(CSS)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<body>の終わりタグ</body>の前に(JS)のCDNを記載します。
導入後のコードを下記に記載します。前回のvue.jpを導入したコードもお忘れなく記載ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html>
これでアプリ作成の準備ができました。
試しにHTMLで見出しを作って名前を表示してみます。
<script>タグを使ってアプリケーションの変数(app)を作成し、ライブラリから取得したVueオブジェクトを作成します。中括弧{}のなかにオブジェクトの要素を記載していきます。
<script>
var app = new Vue({
}) ;
</script>
【el: 】(elements) HTMLのターゲットとなる要素を指定します。ここでは、appというIDを持つ要素としております。
【data: 】ドキュメントに表示するデータを作成します。そこにnameというキーでHamasanという値を保持してもらいます。
<script>
var app = new Vue({
el: '#app',
data: {
name: 'Hamasan'
}
}) ;
</script>
こちらのデータオブジェクトをHTMLに表示させてみましょう。
ターゲットとなるIDを指定するので、<div>タグでidを指定して、見出し<h2>のなかに先ほど作ったオブジェクトのnameを表示させます。Vue.jsのテンプレート構文を使用して、{{}}二重波括弧の中に記述します。下記のように記載します。
<div id="app">
<h2>{{ name }}</h2>
</div>
2.mt-4をbodyタグに追加する
全体を中央寄せにしたいので、containerクラス(bootstrap)とマージンを上に入れるクラス(mt-4)をbodyタグに追加します。
全体のコードは下記になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body class="container mt-4">
<div id="app">
<h2>{{ name }}</h2>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'Hamasan'
}
}) ;
</script>
</body>
</html>
実際の表示はこちらになります。
これで準備が完了しました。次回から、簡単なTodoリストのアプリを作っていきます。
**
今日は以上です。
Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san
ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346
note専用コミュニティへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec
note専用コミュニティ、作成しました。コミュニティでは質問などを受け付けています。毎月500円となります。
この記事が気に入ったらサポートをしてみませんか?