#はじめに
こんにちは。
JavaScriptのフレームワークVue.jsについてアウトプットしていきます！
##Vue.jsとは
Vue.jsは、ユーザーインターフェイスを構築するためのJavaScriptフレームワークです。開発で必要な機能がセットになったツールと思ってもらえればわかりやすいと思います。
様々な機能が用意されているため、操作を覚えると扱いやすく少ない記述で実装が可能です。
##フレームワークとは
フレームワークは全体の流れがもともと実装されている「型」のようなもので、その中で実装したい部分のコードを記述して開発していく。VueやReact、Angularなどがある。
##Vue.jsを使用するメリット
JavaScriptのライブラリにjQueryというものがありますが、Vue.jsとの違いとして、
-
Vue.jsの方が、簡潔にコードを記述できる - SPA（シングルページアプリケーション）開発ができる
- シンプルに設計されているため、拡張性が高い
などが挙げられます。
###Vue.jsのコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
Vue.jsの基本的な構文になります。
bodyタグ内で、HTMLでVueとJSファイルを読み込みと、divタグにIDappを指定。
{{ message }}に'Hello World'が置換されて出力される。
#最後に
ここまでVue.jsについてまとめました。
これからVueについての理解を深めるためにアウトプットしていきます！
誤った認識があればご指定いただけると嬉しいです^ ^