テキストを表示させてみよう【Vue.js入門】
どうも！最近Vue.jsを勉強し始めました。
最近JQueryはもうええやんみたいな流れになりつつあるWeb業界なので、次に来そうなものを勉強していこうということでVue.jsを勉強しています。
え？もうVue.jsはきてるって？知ってた！！
内容的にかなり初心者向けになりますので、すでにVue.js使ってるぜの方は読む必要もないレベル・・・！と思います。
各段階毎でシリーズとして記事を書けたらと思うので、Vue.js触ってみたいよって方は一緒に勉強していきましょう！
Vue.jsでテキストを表示させる
今回の目標は、Vue.jsを使用してテキストを表示させること。
プログラム系を勉強をしたことがある方ならお決まりのアレですね。
「Hello, World.」ってやつ。
では早速書いていきましょう！
HTMLファイルを用意する
Vue.jsはHTMLファイルが必要になります。
まずHTMLが分からないという人は、HTMLを勉強してから出直すしかない・・・。
必須条件になります。
<!DOCTYPE html> <html lang="js"> <head> <meta charset="UTF-8"> <title>Vuee.jsテスト</title> </head> <body> </body> </html>
こんな感じで雛形を用意します。
HTML5の最低限のタグです。
ではここからVue.jsの準備をします。
Vue.jsの準備
Vue.jsを使用するには、まずVue.jsを読み込む必要があります。
いくつか読み込む方法はありますが、今回はCDNで読み込ませます。
よくjQueryとかでもあるheadとかで読み込ませるあれです、
最近だとbody終わりの前に書くのが主流かな？
Vue.jsのサイトにCDNのリンクは書いてあるのでご確認ください。
CDNの読み込みをつかするとこんな感じ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Vue.jsテスト</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> </body> </html>
これでやっとVue.jsを使用することができる状態になりました。
これからVue.jsを使っていきましょう！
Vue.jsでメッセージを表示
メッセージを表示させてみたのがこちら↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.jsテスト</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app", //IDを指定
data: { //
message: "へろーVue.js" //ID指定内の「nassege」と紐づけて表示
}
});
</script>
</body>
</html>
各項目の説明はコメントアウトで解説しています。
「#app」内の「message」に「へろーVue.js」を入れて表示させる。という指示になります。
Vue.jsでは、この書き方が基本になるようなので、まずは形を覚えるといいかもしれませんね。
