1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

#おさらい

vue.jsとは

vue.jsは、Webアプリケーションのユーザインターフェースを効率的に構築するのに適したjavaScriptのフレームワークです。

SPA

SPAは、基本部分が単一のページで構成されるWebアプリケーションです。
JavaScriptでサーバと通信してDOMを操作することでコンテンツを切り替えます。

DOM(Document Object Model)

JavaScriptからHTML文書やXML文書の要素を操作する仕組みです。
Vue.jsはリアクティブなフレームワークであり、JavaScript側のVueインスタンス内のデータとHTMLを基本としてテンプレート構文に記述した内容がバインドされデータを変更すると、それがすぐDOMツリーに反映されWEBブラウザの表示が更新されます。

Vue CLI

Vue CLIは、大規模なVueアプリケーションを効率的に作成するためのツールです。
Node.jsやVueRouterなどと連携していくことにより、シングルページアプリケーション(SPA)を効率的に開発できます。

#vue-cliでプロジェクト作ってみた

vue create hello
cd hello

シングルファイルコンポーネント

拡張子が「.vue」で、javascript,html,cssがひとまとまりになったもの。
(ES2015のモジュール機能を使用している)

Helloしてみた

Hello.vue
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  name: "Hello",
  props: {
    msg: String
  };
</script>

<style scoped>
h1 {
  color: red;
}
</style>

やっぱり、VueCLIよりVueを先に勉強しよう。
なので一旦こちらは休憩します。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?