はじめに
vue.jsの勉強をしていてたまに出てくるワードの解説をこの記事に載せておきます。
SPA
SPAとは「Single Page Application」の頭文字をとったWebアプリケーションのアキーテクチャーのことです。
メリット・デメリット
メリット
1. 通常のWeb ページでは実現できないユーザー体験を実現できる。
2. 高速なページ遷移を実現できる。
3. ネイティブアプリの代わりとして提供することができる。
デメリット
1. 実装コストが大幅に増える。
2. 初期ローディングにかかる時間が増える。
3. 開発者が少ない。
SPAを用いた有名な事例
出てくるライブラリ?や知識
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 (機能向け)
機能向け
後ほど追加
他にもあれば...
後ほど追加