vue.jsに関する知識のまとめ

はじめに

vue.jsの勉強をしていてたまに出てくるワードの解説をこの記事に載せておきます。

SPA

SPAとは「Single Page Application」の頭文字をとったWebアプリケーションのアキーテクチャーのことです。

メリット・デメリット

メリット

1. 通常のWeb ページでは実現できないユーザー体験を実現できる。
2. 高速なページ遷移を実現できる。
3. ネイティブアプリの代わりとして提供することができる。

デメリット

1. 実装コストが大幅に増える。
2. 初期ローディングにかかる時間が増える。
3. 開発者が少ない。

SPAを用いた有名な事例

• Facebook
• Google Map

出てくるライブラリ?や知識

• vue-router
  • router-link
• HTML5 History モード

vulでの実現するにあたって

使い方
@tiwu_official 様
Vue.jsとVuexとvue-routerとwebpackで単一ファイルコンポーネント化してTodoListを作ってみた

表示方法について　$mount VS el

vuejsを勉強していくと表示寺に「$mount」 vs 「el」の二つの記載が存在します。

$mountの場合

$mount必要に応じてVueインスタンスを明示的にマウントできます。
ページに特定の要素が存在するか、非同期プロセスが完了するまでインスタンスのマウントを遅らせることができます。
1秒後に画像を表示するサンプルを作ってみたので確認してみてください。

サンプルの挙動

ソースコード

index.html

<div id="todo"></div>

main.ts

import Todo from './Todo.vue'
import Vue from 'vue'

const todo = new Vue({
  el: '#todo',
  render: h => h(Todo)
})

setTimeout(() => {
  todo.$mount('#todo');
},1000)

Todo.vue

// テンプレートの作成
<template>
  <div class="home">
    <img alt="Vue logo" src="./assets/logo.png">
  </div>
</template>

// cssの作成

elの場合

読み込まれた瞬間にtodoタグにマウントされます。
静的なものに対してはこちらの処理で対応していくべきかと思います。

index.html

<div id="todo"></div>

main.ts

import Todo from './Todo.vue'
import Vue from 'vue'

const todo = new Vue({
  el: '#todo',
  render: h => h(Todo)
})

Todo.vue

// テンプレートの作成
<template>
  <div class="home">
    <img alt="Vue logo" src="./assets/logo.png">
  </div>
</template>

// cssの作成

computed vs methods

vuejsを勉強していくにつれて「computed」と「methods」がでてきます。

どもも 様の記事
Vue.jsとVuexとvue-routerとwebpackで単一ファイルコンポーネント化してTodoListを作ってみた

computed　(演算向け)

演算を行うため
後ほど追加

methods (機能向け)

機能向け
後ほど追加

他にもあれば...

後ほど追加

参考サイト