ヴュー

1.Vueとは

Vue は進歩的な JavaScript フレームワークです

Vue は、ユーザーインターフェイスの構築に使用できる進歩的な JavaScript フレームワークです。
Vue は習得が簡単で、軽量、効率的、柔軟性に優れています。
Vue は MVVM モデルを採用し、データドリブンなビューによるコンポーネント開発を実現します。
Vue には、Vue Router、Vuex、Vue CLI などの豊富なエコシステムがあります。
Vue は、サーバー側レンダリング、TypeScript およびその他の機能をサポートしており、さまざまな開発ニーズに対応できます。

Vue を使用してユーザーインターフェイスを構築できる

Vue は、ユーザーインターフェイスを構築するための進歩的なフレームワークであり、MVVM パターンを採用し、データを通じてビューを駆動し、応答性の高いコンポーネント化されたアイデアを提供して、開発者が対話型アプリケーションを簡単に構築できるようにします。
Vue はユーザーインターフェイスの構築に使用でき、v-bind、v-model、v-if、v-for などの一連の命令とコンポーネントを提供し、カスタム命令とコンポーネントもサポートしています。これらの命令とコンポーネントを通じて、開発者はフォーム、リスト、ナビゲーションなどのさまざまなタイプのユーザーインターフェイスを迅速に構築できます。

Vue のコアライブラリはビューレイヤーのみに焦点を当てています - Vue のコアライブラリはビューレイヤーのみに焦点を当てているため、学習や他のプロジェクトへの統合が簡単です。

Vue は仮想 DOM を使用してパフォーマンスを最適化し、応答性の高いコンポーネント化された開発を提供します。
Vue はテンプレート構文と JSX 構文をサポートしており、他のライブラリやフレームワークとシームレスに統合できます。

2. Vueの特徴

進歩的な枠組み
データドリブンビュー
コンポーネント開発
軽量
使いやすい

3. Vue の基本文法

テンプレートの構文

補間式: { { }}

<div>{
      
      {
      
       message }}</div>

v-bind ディレクティブ: データを HTML 要素の属性にバインドします
```
<img v-bind:src="imageSrc">
```
v-if ディレクティブ: 式の true または false の値に基づいて要素を条件付きでレンダリングします。
```
<div v-if="isShow">显示的内容</div>
```

v-for ディレクティブ: リストのレンダリング

<ul>
<li v-for="item in items">{
      
      {
      
       item }}</li>
</ul>

v-on ディレクティブ: バインドイベント
```
<button v-on:click="handleClick">点击</button>
```

計算されたプロパティ: 計算された

<div>{
      
      {
      
       reversedMessage }}</div>
...
computed: {
      
      
  reversedMessage: function () {
      
      
    return this.message.split('').reverse().join('')
  }
}

リスニング属性: ウォッチ

watch: {
      
      
 message: function (newVal, oldVal) {
      
      
   console.log('message changed from', oldVal, 'to', newVal)
 }
}

ライフサイクル: 作成、マウント、更新、破棄

created: function () {
      
      
console.log('组件实例创建完成')
},
mounted: function () {
      
      
console.log('组件挂载到DOM上')
},
updated: function () {
      
      
console.log('组件更新')
},
destroyed: function () {
      
      
console.log('组件销毁')
}

命令

v-bind ディレクティブ: src、href などのバインドなど、属性値をバインドするために使用されます。
v-model ディレクティブ: フォームデータの双方向バインディングを実装するために使用されます。
v-if命令: 条件に従って要素を描画するかどうかを判断するために使用されます。
v-for ディレクティブ: レンダリング要素をループするために使用されます。
v-on ディレクティブ: @click、@keyup などのイベントリスナーをバインドするために使用されます。
v-showコマンド: 条件に従って要素を表示するかどうかを決定するために使用されます。
v-text ディレクティブ: 要素のテキスト内容を指定された値に設定するために使用されます。
v-html ディレクティブ: 要素の HTML コンテンツを指定された値に設定するために使用されます。
v-pre 命令: 指定された要素とそのサブ要素のコンパイルプロセスをスキップするために使用され、パフォーマンスを最適化するために使用できます。
v-cloak 命令: ページのフラッシュを防ぐために使用され、CSS と組み合わせて使用できます。
v-once 命令: データの変更に応じて再レンダリングせずに、要素を 1 回だけレンダリングするために使用されます。

フォーム構文:

コマンド名	説明する
vバインド	プロパティ値をバインドするための
v モデル	フォームデータの双方向バインディング
v-if	条件に基づいて要素をレンダリングするかどうかを決定するために使用されます
v-for	要素をループするために使用されます
ヴオン	イベントリスナーをバインドするために使用されます
Vショー	条件に基づいて要素を表示するかどうかを決定するために使用されます
v-テキスト	要素のテキストコンテンツを指定された値に設定するために使用されます
v-html	要素の HTML コンテンツを指定された値に設定するために使用されます。
のために	指定された要素とその子のコンパイルプロセスをスキップするために使用されます。
Vマント	ページのちらつきを防ぐために使用されます
v-once	要素を 1 回だけレンダリングするために使用されます

コンポーネント

例 1:

<template>
<div>
  <h1>{
        
        {
        
        title}}</h1>
  <p>{
        
        {
        
        content}}</p>
</div>
</template>

<script>
export default {
        
        
data() {
        
        
  return {
        
        
    title: '这是标题',
    content: '这是内容'
  }
}
}
</script>

例 2:

<template>
 <div>
   <input v-model="message">
   <p>{
        
        {
        
        message}}</p>
 </div>
</template>

<script>
export default {
        
        
 data() {
        
        
   return {
        
        
     message: ''
   }
 }
}
</script>

ライフサイクル

ライフサイクル

Vue インスタンスには完全なライフサイクルがあります。つまり、作成の開始からデータの初期化、テンプレートのコンパイル、Dom のマウント、レンダリング、更新、アンインストールなどの一連のプロセスです。これを Vue のライフサイクルと呼びます。。一般的に使用されるライフサイクルは次のとおりです。
1. beforeCreate: インスタンスの初期化後、データオブザーバーおよびイベント/ウォッチャーのイベント設定が呼び出される前。
2. created: インスタンスの作成後に呼び出されます。このステップでは、インスタンスはデータオブザーバー、属性とメソッドの操作、監視/イベントイベントコールバックの構成を完了します。ただし、マウントフェーズはまだ開始されておらず、$el プロパティは現在表示されていません。
3. beforeMount: マウントが開始される前に呼び出されます。関連するレンダリング関数が初めて呼び出されます。
4. Mounted: el は新しく作成された vm.$el に置き換えられ、このフックはインスタンスにマウントされた後に呼び出されます。
5. beforeUpdate: データが更新されるとき、仮想 DOM が再レンダリングされてパッチが適用される前に呼び出されます。追加の再レンダリングパスをトリガーすることなく、このフック内でさらに状態を変更できます。
6. updated: このフックは、データ変更により仮想 DOM が再レンダリングされ、パッチが適用された後に呼び出されます。
7. beforeDestroy: インスタンスが破棄される前に呼び出されます。このステップでは、インスタンスはまだ完全に利用可能です。
8. destroy: インスタンスが破棄された後に呼び出されます。この時点で、すべてのコマンドのバインドが解除され、すべてのイベントリスナーが削除され、すべての子インスタンスが破棄されています。

計算されたプロパティ

<template>
  <div>
    <p>{
      
      {
      
       message }}</p>
    <p>{
      
      {
      
       reversedMessage }}</p>
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      message: 'Hello World'
    }
  },
  computed: {
      
      
    reversedMessage() {
      
      
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

ここでは、メッセージの反転文字列を返す計算プロパティ reversedMessage を定義します。テンプレートでは、ロジックコードを記述することなく、reversedMessage を直接使用して、文字列を反転する機能を実現できます。計算されたプロパティの値はキャッシュされ、関連する依存関係が変更された場合にのみ再評価されます。

リスナー - リスナーの基本的な使用法:

var vm = new Vue({
    
    
  data: {
    
    
    message: 'Hello'
  },
  watch: {
    
    
    message: function (newVal, oldVal) {
    
    
      console.log('newVal: ', newVal, ' oldVal: ', oldVal)
    }
  }
})

徹底した監視:

var vm = new Vue({
      
      
  data: {
      
      
    obj: {
      
      
      a: 1
    }
  },
  watch: {
      
      
    'obj.a': function (newVal, oldVal) {
      
      
      console.log('newVal: ', newVal, ' oldVal: ', oldVal)
    }
  }
})

リスナーをすぐに実行します。

var vm = new Vue({
      
      
  data: {
      
      
    message: 'Hello'
  },
  watch: {
      
      
    message: {
      
      
      handler: function (newVal, oldVal) {
      
      
        console.log('newVal: ', newVal, ' oldVal: ', oldVal)
      },
      immediate: true
    }
  }
})

4. Vue の高度な使用法

カスタムディレクティブ

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
      
      
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
      
      
  // 聚焦元素
  el.focus()
}
})

// 局部注册一个自定义指令
directives: {
      
      
focus: {
      
      
  // 指令的定义
  inserted: function (el) {
      
      
    el.focus()
  }
}
}

プラグイン

プラグイン:
- Vue Router: シングルページアプリケーションを構築するための Vue.js の公式ルーティングマネージャー。
- Vuex: Vue.js の公式状態管理ライブラリ。アプリケーションのすべてのコンポーネントの状態を集中管理するために使用されます。
- Vue CLI: Vue.js アプリケーションを迅速に構築するために Vue.js によって提供される公式のスキャフォールディングツール。
- Vue Test Utils: 単体テストと統合テストを作成するための Vue.js 公式テストツールライブラリ。
- Element UI: 豊富な UI コンポーネントとインタラクティブな効果を提供する、Vue.js ベースのコンポーネントライブラリのセット。
- Vue-i18n: Vue.js によって提供される公式の国際化プラグイン。アプリケーションの多言語サポートを実現するために使用されます。
- Vue-meta：Vue.jsが公式に提供しているページのメタ情報を管理するプラグインで、ページのタイトルやキーワード、説明などを簡単に設定できます。
- Vue-lazyload: 画像の遅延読み込み用のプラグイン。ページの読み込み速度とユーザーエクスペリエンスを向上させることができます。
- Vue-axios: HTTP リクエストを開始するために Vue.js によって公式に推奨されているプラグインで、バックエンド API と簡単に対話できます。
- Vue-socket.io: リアルタイム通信やデータ連携を実現できるWebSocket通信用プラグイン。

Mixin混入

Mixin混入

ミックスインは、Vue が提供する再利用可能な機能の 1 つの方法であり、コンポーネントオプションのセットを 1 つのオブジェクトに結合し、複数のコンポーネントのオプションとして使用できるようにします。これにより、複数のコンポーネント間で同じオプションを共有でき、コードの重複を避けることができます。
```
// 定义一个mixin对象
const myMixin = {
      
      
  created() {
      
      
    console.log('mixin created')
  },
  methods: {
      
      
    foo() {
      
      
      console.log('mixin foo')
    }
  }
}

// 在组件中使用mixin
export default {
      
      
  mixins: [myMixin],
  created() {
      
      
    console.log('component created')
  },
  methods: {
      
      
    bar() {
      
      
      console.log('component bar')
    }
  }
}
```
上の例では、myMixin という名前のミックスインオブジェクトを定義しました。このオブジェクトには、作成されたフック関数と foo という名前のメソッドが含まれています。次に、コンポーネントの mixins オプションを使用して、myMixin をコンポーネントに混合します。最後に、コンポーネントには myMixin で定義されたオプションが含まれますが、コンポーネント自体のオプションも保持されます。

コンポーネントとミックスインに同じオプションが含まれている場合、コンポーネントのオプションがミックスインのオプションをオーバーライドします。コンポーネント内のミックスイン内のメソッドを呼び出したい場合は、$emit を使用してミックスイン内のメソッドをトリガーできます。
```
export default {
      
      
  mixins: [myMixin],
  created() {
      
      
    this.$emit('foo')
  }
}
```

トランジションとアニメーション

Vueトランジションの基本的な使い方

<transition>
<p v-if="show">hello</p>
</transition>

Vue トランジションの CSS クラス名

<transition name="fade">
 <p v-if="show">hello</p>
</transition>

Vue遷移用のJSフック関数

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
>
  <p v-if="show">hello</p>
</transition>

Vueアニメーションの基本的な使い方

<transition name="fade" mode="out-in">
 <p :key="message">{
      
      {
      
       message }}</p>
</transition>

Vueアニメーション用のJSフック関数

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
>
 <p :key="message">{
      
      {
      
       message }}</p>
</transition>

Vue アニメーションの複数要素アニメーション

<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item">{
      
      {
      
       item }}</li>
</transition-group>

Vue アニメーションのカスタム CSS クラス名

<transition
 name="fade"
 enter-active-class="animated fadeIn"
 leave-active-class="animated fadeOut"
>
 <p v-if="show">hello</p>
</transition>

Vue アニメーション用のカスタム JS フック関数

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <p v-if="show">hello</p>
</transition>

ルーティング

ルーティングの基本的な使用例:

// 安装路由
npm install vue-router --save

// 引入路由
import VueRouter from 'vue-router'

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      component: Home
    },
    {
    
    
      path: '/about',
      component: About
    }
  ]
})

// 注册路由
new Vue({
    
    
  router,
  render: h => h(App)
}).$mount('#app')

ルートネストの使用例:

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      component: Home,
      children: [
        {
    
    
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})

動的ルーティングの使用例:

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:id',
      component: User
    }
  ]
})

// 跳转路由
this.$router.push('/user/123')

名前付きルートの使用例:

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      component: Home,
      name: 'home'
    }
  ]
})

// 跳转路由
this.$router.push({
    
     name: 'home' })

ルートパラメータの使用例:

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:id',
      component: User
    }
  ]
})

// 跳转路由
this.$router.push({
    
     path: '/user/123', query: {
    
     name: '张三' } })

// 接收参数
this.$route.params.id // 123
this.$route.query.name // 张三

ルートの遅延読み込みの例:

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user',
      component: () => import('./User.vue')
    }
  ]
})

ルートガードの使用例:

// 全局前置守卫
router.beforeEach((to, from, next) => {
    
    
  // 判断是否登录
  if (to.path !== '/login' && !isLogin) {
    
    
    next('/login')
  } else {
    
    
    next()
  }
})

// 全局后置守卫
router.afterEach((to, from) => {
    
    
  // 统计PV
  pv++
})

Vuex 状態管理 - Vuex 状態管理

Vuex は、アプリケーションのすべてのコンポーネントの状態を管理するための Vue の公式状態管理ライブラリです。アプリケーションの状態を 1 か所に集中させ、状態の変更の追跡とデバッグを容易にします。簡単な Vuex 状態管理の例を次に示します。

// 定义一个Vuex store
const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    increment(state) {
    
    
      state.count++
    }
  },
  actions: {
    
    
    incrementAsync({
     
      commit }) {
    
    
      setTimeout(() => {
    
    
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    
    
    doubleCount(state) {
    
    
      return state.count * 2
    }
  }
})

// 在Vue组件中使用Vuex
<template>
  <div>
    <p>Count: {
    
    {
    
     count }}</p>
    <p>Double count: {
    
    {
    
     doubleCount }}</p>
    <button @click="incrementCount">Increment count</button>
  </div>
</template>

<script>
export default {
    
    
  computed: {
    
    
    count() {
    
    
      return this.$store.state.count
    },
    doubleCount() {
    
    
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    
    
    incrementCount() {
    
    
      this.$store.commit('increment')
    }
  }
}
</script>

上の例では、状態countと値incrementをインクリメントするミューテーションを含む単純な Vuex ストアを定義しました。値を非同期にインクリメントするアクションcountも定義します。最後に、 double を計算するためのゲッターを定義します。Vue コンポーネントでは、プロパティを使用して状態とゲッターの値を取得し、プロパティを使用して突然変異をトリガーします。incrementAsynccountdoubleCountcountcomputedmethods

5. Vueのエコシステム

CLI を表示する

Vue CLI は、Vue.js プロジェクトを迅速に構築するための公式コマンドラインベースのツールです。
これは、Webpack 構成、ルーティング、状態管理などを含む Vue プロジェクトのインフラストラクチャを生成するのに役立ちます。
Vue CLI は、Babel、TypeScript、ESLint などの他のツールやライブラリを簡単に統合するのに役立つ豊富なプラグインとプリセットオプションも提供します。
新しいプロジェクトの作成に加えて、Vue CLI は既存の Vue プロジェクトの管理にも使用でき、ビルド、テスト、デプロイなどのさまざまなコマンドとオプションを提供します。
一般に、Vue CLI は Vue エコシステムに不可欠なツールの 1 つであり、開発効率を大幅に向上させることができます。

ルータービュー

Vue Router は Vue.js の公式ルーティングマネージャーであり、Vue.js のコアと深く統合されているため、シングルページアプリケーションの構築が簡単になります。これは、単一ページのアプリケーションを迅速に構築するのに役立ち、Vue.js の公式 API に基づいてルーティングを非常に便利に構成できます。
Vue Router は、ルーティングのネストとコンポーネントの遅延読み込み、およびさまざまなナビゲーションフックをサポートしているため、ルーティングジャンプをより適切に制御できます。

Vuex

Vuex 状態管理ライブラリ
- 公式ドキュメント: https://vuex.vuejs.org/
- Vuex 入門チュートリアル: https://www.runoob.com/w3cnote/vuex-learn.html
- Vuex戦闘: https://juejin.im/post/5c9f5b9e6fb9a05e3c6fdafe
Vuex ヘルパーライブラリ
- Vuex-persistedstate：https://www.npmjs.com/package/vuex-persistedstate
- Vuex-router-sync：https://www.npmjs.com/package/vuex-router-sync
Vuex のケース
- Vuex ショッピングカート: https://github.com/bailicangdu/vue2-manage
- Vuex e コマースプラットフォーム: https://github.com/one-pupil/Vue-Shop
- Vuex 音楽プレーヤー: https://github.com/uncleLian/vue-music

テストユーティリティを表示する

Vue Test Utils は、Vue.js によって公式に提供される単体テストユーティリティライブラリです。これにより、テストケースの作成と実行がより簡単になり、コードの品質と安定性が向上します。
Vue Test Utils を通じて、クリックや入力などのユーザーインタラクション動作をシミュレートし、コンポーネントの動作と状態をテストできます。
Vue Test Utils は、テストに便利なコンポーネントインスタンスを作成およびレンダリングするための、mount、shallowMount などのいくつかの補助関数とツールも提供します。
Vue Test Utils に加えて、Jest、Mocha などのサードパーティのテストツールライブラリもいくつかあり、これらを Vue.js と統合して、より包括的なテストソリューションを提供することもできます。

要素UI

Element UI は、開発者が美しく使いやすいインターフェイスを迅速に構築できるように、豊富なコンポーネントと多様なテーマを提供する Vue 2.0 ベースのデスクトップコンポーネントライブラリです。
サンプルコード:

<template>
  <el-button>默认按钮</el-button>
</template>

<script>
import { ElButton } from 'element-ui'

export default {
  components: {
    ElButton
  }
}
</script>

ヴエティファイ

Vuetify は、開発者が美しい Web アプリケーションを迅速に構築できるようにする豊富なコンポーネントとスタイルを提供する Vue.js ベースの UI フレームワークです。
Vuetify はマテリアルデザイン仕様に完全に従っており、ボタン、カード、フォーム、ダイアログボックスなど、多数のマテリアルデザインスタイルのコンポーネントを提供します。
Vuetify は、データテーブル、タイムライン、カレンダー、ファイルアップロードなど、開発効率を大幅に向上させる高度なコンポーネントも提供します。
Vuetify はカスタムテーマもサポートしており、独自のニーズに応じてアプリケーションの外観を簡単にカスタマイズできます。
Vuetify のドキュメントは非常に詳細で、開発者が学習して使用できる豊富な例と API ドキュメントが提供されています。

Ant Design Vue - Ant Design Vue: Ant Design Vue は、Ant Financial によって開発された Vue.js ベースの UI コンポーネントライブラリであり、ボタン、フォーム、フォーム、ポップアップウィンドウなどの一般的に使用される一連の UI コンポーネントを提供します。 . は、開発者が美しく使いやすい Web アプリケーションを迅速に構築するのに役立ちます。Ant Design Vue は豊富なテーマのカスタマイズ機能も提供しており、開発者は独自のブランドスタイルに合わせた UI コンポーネントをニーズに応じてカスタマイズできます。

6. Vueの長所と短所

6.1 利点

学習と使用が簡単な進歩的なフレームワーク

プログレッシブフレームワーク: Vue は、すべての機能を一度に導入するのではなく、プロジェクトの要件に応じて段階的に導入できるプログレッシブフレームワークであり、それによってプロジェクトの保守性と拡張性が向上します。
学習と使用が簡単: Vue の構文はシンプルで理解しやすく、詳細なドキュメントがあり、使いやすく、初心者にとって非常にフレンドリーなフレームワークです。

データドリブンなビューで開発効率を向上

データドリブンなビューで開発効率を向上
- 例: Vue はデータバインディングによってデータとビューを関連付けます。データの変更に注意するだけでよく、ビューは自動的に更新されるため、開発効率が大幅に向上します。

コンポーネントベースの開発、保守と再利用が容易

コンポーネントベースの開発: Vue は、ページを複数のコンポーネントに分割するコンポーネントベースの開発方法を採用しています。各コンポーネントは、独自のロジックとスタイルのみに焦点を当てているため、コードの可読性と保守性が向上し、コンポーネントの開発が容易になります。
保守と再利用が容易: Vue は豊富な API とプラグインを提供するため、開発者は再利用可能なコンポーネントとモジュールを迅速に構築できると同時に、プロジェクトの保守とアップグレードも容易になります。

軽量、高速読み込み - 軽量: Vue.js はビュー層のみに焦点を当てているため、軽量のフレームワークです。仮想 DOM を使用するため、Angular よりも肥大化しにくく、ビューを迅速にレンダリングしてパフォーマンスを向上させます。

高速読み込み: Vue.js のファイルサイズはわずか約 20KB なので、読み込みも実行も高速です。このため、Vue.js はシングルページアプリケーション (SPA) の構築に最適です。

6.2 欠点

SEO に優しくない

SEO に優しくない

Vue はクライアント側でレンダリングされ、検索エンジンクローラーは HTML のみをクロールするため、Vue の SEO はサーバー側でレンダリングされた Web サイトほど優れておらず、SEO 効果を向上させるには追加の処理が必要です。

React と比較すると、エコシステムは完璧ではありません

React と比較するとエコシステムは完璧ではありません: Vue のエコシステムは React と比較すると完璧ではないため、いくつかの面で不便な点があるかもしれません。たとえば、React には使用できる成熟したサードパーティライブラリが多数ありますが、Vue にはサードパーティライブラリが比較的少ないため、開発者はソリューションを見つけたり、それらを実装するためのコードを記述したりする必要があります。

大規模なアプリケーションの場合は、追加の状態管理ツールが必要です - 大規模なアプリケーションの場合、追加の状態管理ツールが必要です。

たとえば、Vuex は、Vue.js アプリケーション専用に開発された状態管理ライブラリです。アプリケーションが非常に大きく複雑になると、Vue.js だけではすべての状態を処理できない場合があります。この場合、Vuex を使用してアプリケーションの状態を管理できます。

フロントエンドvueチュートリアル（詳細版）

ヴュー

1.Vueとは

Vue は進歩的な JavaScript フレームワークです

Vue を使用してユーザーインターフェイスを構築できる

2. Vueの特徴

3. Vue の基本文法

命令

フォーム構文:

コンポーネント

ライフサイクル

計算されたプロパティ

リスナー - リスナーの基本的な使用法:

リスナーをすぐに実行します。

4. Vue の高度な使用法

カスタムディレクティブ

プラグイン

Mixin混入

トランジションとアニメーション

ルーティング

5. Vueのエコシステム

Vuex

ヴエティファイ

6. Vueの長所と短所

6.1 利点

6.2 欠点

以上がVueの概要ですので、ご参考になれば幸いです。

おすすめ

フロントエンドvueチュートリアル（詳細版）

ヴュー

1.Vueとは

Vue は進歩的な JavaScript フレームワークです

Vue を使用してユーザー インターフェイスを構築できる

2. Vueの特徴

3. Vue の基本文法

命令

フォーム構文:

コンポーネント

ライフサイクル

計算されたプロパティ

リスナー - リスナーの基本的な使用法:

リスナーをすぐに実行します。

4. Vue の高度な使用法

カスタムディレクティブ

プラグイン

Mixin混入

トランジションとアニメーション

ルーティング

5. Vueのエコシステム

Vuex

ヴエティファイ

6. Vueの長所と短所

6.1 利点

6.2 欠点

以上がVueの概要ですので、ご参考になれば幸いです。

おすすめ

Vue を使用してユーザーインターフェイスを構築できる