【Vue.js勉強日記:その0】Vue.jsとは.特徴をまとめてみた.

IT
この記事は約3分で読めます。

ゼロから始めるVue.js勉強生活,一日目.

今日はVue.jsの特徴と勉強する動機についてまとめました.

jp.vuejs.org

Vue.jsとは

読み方は「ビュー」(viewと同じ).

ユーザインタフェース構築のための,Javascriptで書くプログレッシブフレームワークです.簡単にいうと,Webサイトとかで行う(クリックやドラッグのような)操作に対して,いい感じにページ動作したりさせるための仕組みです.

ただ,今までもjavascriptでインターフェースをいじったり,jqueryでページのデザインやアニメーションを書いたりしていました.

Vue.jsは,今まで使ってきたものと組み合わせたりすることで,より洗練されたデザインを作成することが可能となります.

また,javascriptやjqueryのようなツール・ライブラリでは実現が困難だったことも簡単にできるようになることも,Vue.jsの強みだそうです.

また,アプリケーション開発を行っている人であれば,インターフェースを整えることにも使えるフレームワークとなっているので,かなりおすすめです.

どうやって書くの?

基本的には,javascriptやjqueryと同じように,htmlページ上に書きます.

これまで,javascriptだとで囲む,jqueryだとhead内にプラグインのパスを書くことで導入できました.

導入のやり方は色々あるらしいですが,最も簡単な方法としては以下のコードをhtml内に書くだけで導入できます.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

このコードを書いた後に,javascriptでコードを書いていくって感じです.

コード例

以下のコードを見てください

<!DOCTYPE html>
<html lang="ja">
<head>
<title>vue.jsのサンプル</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>

これは{{ message }}の部分を「Hello Vue!」という文に上書きして表示するといったソースコードです(処理内容に関しては省略します).

見た目なんだかjsonみたいですよね.これがVue.jsの特徴だと言えます.

基本的にこのような形式で書いていくので,とても見やすくて書きやすいコードと言えます.

なぜVue.jsをやりたくなったのか

以下の記事に惹かれました.

www.kabanoki.net

今までマインドマップのような複雑な実装はjavascriptではできないと思っていました.

ただ,Vue.jsではこれができるということを知って,これはやるしかない!!!,と思ったのがきっかけです.

さいごに

できればこの日記は続けて行きたいですね.

アウトプットは知識の定着になるので.

おーよしの紹介
院卒Webエンジニアマン

「プログラミング」や「開発技術」,「大学院の苦労話」について情報発信してます.これからのIT時代を生き抜くため,自分のスキルを磨き続けます.将来は起業できたらいいなという思いがあります.

oyoshiをフォローする
スポンサーリンク
IT プログラミング
スポンサーリンク
にほんブログ村に参加中(^~^)
PVアクセスランキング にほんブログ村
おーよしぶろぐ

コメント

タイトルとURLをコピーしました