Vue.js を使ってみよう！
最近話題のVue.js を少しさわってみましょう！。まず公式ホームページです。
Vue.js とは？
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
実際に書いて表示させてみます。
まず、CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>を入れたindex.htmlを作成します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body{
font-family: sans-serif;
}
</style>
<title>Document</title>
</head>
<body>
</body>
</html>これを基本にしてtag,scriptを記述していきます。
まず、tagです。{{ message }}を<div></div>で挟んでid = "app" と名前をつけて操作します。
<div id="app">
{{ message }}
</div>次にscriptを書きます。
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>var appと変数宣言して新しくVueのインスタンスを作ります。
その中の
el:#appで<div id="app"></div>を取得します。
data:{message: 'Hello Vue!'}でmessageという変数に'Hello Vue!'を代入します。
そうすることで <div id="app"></div>の中の{{ message }}にデータが入りブラウザでみると'Hello Vue!'と表示されます。
コード全体です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body{
font-family: sans-serif;
}
</style>
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>ブラウザで表示すると。
Hello Vue!
表示されていますね。
Vue.js で記述された場合はデータと DOM は関連付けられ、そして全てがリアクティブになっている
ということで、ブラウザぼconsoleで確かめられるようです。
Chrome,Safariなどのブラウザで表示させて、右クリックでinspectまたはinspect element（要素を調査）するか、Developper tool,などを表示させてConsoleタブを選択して
app.message = "こんにちは"と入力して、returnしてみましょう！
ブラウザが更新されて、
こんにちは
と表示されたと思います。
これがリアクティブ、描画されたサンプルが状況に応じて更新されるということですね。
この記事が気に入ったらサポートをしてみませんか？