Vue 2.0 の基礎を詳しく解説

Vue 2.0 の基礎を詳しく解説

1. 特徴

MVVMフレームワークです

MVC アーキテクチャから派生し、View (ビュー層)、ViewModel (データビュー層)、Model (データ層) に分かれています。MVVM の最も象徴的な機能はデータ バインディングであり、これによりデータ駆動型ビューとデータのビュー同期が可能になります。

データも一方通行であり、一方向データフローと呼ばれる。

データは常に親コンポーネントから子コンポーネントに渡され、子コンポーネントには親コンポーネントのデータを直接変更する権限はありません (推奨されません)。

IE8以下のブラウザには対応していません

レスポンシブ原則ではes5のObject.definePropertyを使用しますが、このAPIはIE8をサポートしていません。

2. 例

// Vue シングルページインスタンス <template>
    ラベル...
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
      データ () {}、
      メソッド: {},
      計算: {},
      時計: {}
    }
</スクリプト>
<スタイル>
    スタイル...
</スタイル>

3. オプション

データ

ページのデータを定義するために使用される関数

データ() {
    戻る {
        カウント: 2
        コピー数: 1
    }
}

// this.count を使用する // 2

計算された

複雑なロジック処理を簡素化するために使用されるオブジェクト、計算されたプロパティ

// 計算プロパティはパラメータを受け入れず、依存データをキャッシュし、戻り値を持つ必要があります
計算: {
    ダブルカウント: 関数 () {
      this.count *= 2 を返す
    },
}

// this.doubleCount を使用する // 4

方法

ページ機能を定義するために使用されるオブジェクト

メソッド: {
    cLog(メッセージ) {
        コンソール.log(メッセージ)
    }
}

// this.cLog('関数が呼び出されました') を使用します // コンソール出力: 関数が呼び出されました

時計

オブジェクト、属性リスニング、特定のデータの変更を監視し、対応する操作を行うために使用される

時計:
    count(値、[古い値]) {
        // 値: 変更された値 this.copyCount = value + 1
    }
}

// カウントが変更されると自動的にトリガーされます this.count = 2
this.copyCount // 3

コンポーネント

オブジェクト、ページにコンポーネントを登録する

'xxxx' から UploadImg をインポートします

コンポーネント: { UploadImg }

// テンプレート
<アップロード画像>

4. 基本的な文法

一般的な指示

v-html : HTMLをレンダリングする

v-if : 構文を判断し、表示/非表示を制御し、DOMをレンダリングするかどうかを制御します

v-show : 表示/非表示を制御します。v-if に似ていますが、v-show は display 属性によって制御されます。

v-model : 双方向データバインディング、通常はフォームで使用され、デフォルトのバインディング値属性

v-bind :

  • 略称: クラス
  • 動的プロパティバインディングの場合

v-on :

  • @クリック
  • イベントバインディング用

v-for : トラバーサル構文、配列、オブジェクト、文字列をサポート

5. ライフサイクル

beforeCreated : Vueオブジェクトを作成する

created : データの初期化。この時点でインスタンスに対していくつかの事前操作を行うことができます。

beforeMounted : elとデータの初期化

mounted : elとデータをマウントし、httpリクエストを呼び出すことができます

beforeUpdated : DOM を更新する前に、再レンダリング処理をトリガーせずに、この時点で状態をさらに変更することができます。

updated : 変更された仮想 DOM をページに更新します。この時点では、無限ループ更新を回避するためにページを変更しないでください。

beforeDestory : ページが破棄される前に、タイマーや DOM イベントのクリアなどのリセット操作を実行できます。

destoryed : ページは破棄されています。この時点では、Vue インスタンスは削除されており、すべての操作は無効です。

6. ルーティング管理 Vue-Router

公式ルーティング マネージャー。 Vue.js のコアと深く統合されているため、シングルページ アプリケーションを簡単に構築できます。

6.1 ルーティング構成

// NPM ダウンロード npm install vue-router
// ルータ.js
'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter)

//ページルーティングを定義する(パス、コンポーネント)
デフォルトの新しいルーターをエクスポートします({
    { path: '/foo', component: () => import('/pages/foo') }, // ルーティングコンポーネントの遅延読み込み { path: '/bar', component: '/pages/bar'}
})
// メイン.js
'./router.js' からルーターをインポートします。
新しいVue({
  el: '#app',
  router, // ルートを Vue インスタンスにマウントします render: h => h(App)
})

// ページ.vue
<!-- 両者の関係を区別することが重要です -->
this.$router // ルーター、組み込みのプッシュおよび置換ルーティングメソッドにアクセスします this.$route // 現在のルート、組み込みパス、クエリ、およびその他のルーティング属性にアクセスします // app.vue
<!-- ルートに一致するコンポーネントがここでレンダリングされます -->
<ルータービュー></ルータービュー>

6.2 ルーティング

宣言型ルーティング

<ルーターリンク:to="...">
<router-link :to="..." 置換>

プログラムによるルーティング

this.$router.push({ パス: 'register', クエリ: { プラン: 'private' }})
this.$router.replace(...) // push との違いは、履歴レコードが挿入されないことです。 this.$router.go( [Number] n ) // 履歴レコード内の前進または後進のステップ数 // ルート パラメーターに中国語が含まれる場合、文字化けを避けるために、最初に encodeURLComponent を使用してトランスコードすることをお勧めします。

6.3 ルーティングガード

グローバルガード

これは設定されたすべてのルートに適用されますが、内部ルートよりも優先順位が低くなります。

グローバルフロントガード(一般的に使用される)

// ユーザーが認証に失敗した場合は /login にリダイレクトします
router.beforeEach((to, from, next) => {
  // to は入力するルートオブジェクト、from はソースルート、next はフック関数、解放するかどうか if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  そうでなければ次()
})

グローバル解析ガード(理解)

router.beforeResolve((to, from, next) => {
  // ...
})

グローバルポストフック(理解)

router.afterEach((to, from) => {
  // このルート ガードは次のフック関数を受け入れません // ...
})

専用ルーターガード(理解)

このガードは、設定されたルートに対してのみ有効です。これらのガードには、グローバル フロント ガードと同じメソッド パラメータがあります。

const ルーター = 新しい VueRouter({
  ルート: [
    {
      パス: '/foo',
      コンポーネント: Foo、
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

コンポーネント内部ガード(理解)

次のルート ナビゲーション ガードはルート コンポーネントで直接定義でき、現在のコンポーネントにのみ有効になります。

ルートに入る前
beforeRouteUpdate (2.2 の新機能)
ルート出発前


コンポーネントのガード | Vue-Router 公式ドキュメント

7. ステートマネージャー Vuex

7.1 構成

//ストア.js
'vue' から Vue をインポートします
'vuex' から Vuex をインポートします

Vue.use(Vuex)
...

デフォルトの新しいVuex.Storeをエクスポートします({
  州、
  ゲッター、
  突然変異、
  行動、
  モジュール
})
// メイン.js
'./store' からストアをインポートします

Vue.prototype.$store = ストア

8. 5つのコア属性

データソース、状態を直接変更しない

//ストア.js
定数状態 = {
    名前: 'zzz'
}

<!--page.vue-->
// 1. this.$store.state.name // 'zzz' を直接呼び出します
// 2. 補助関数のマッピングが計算されます: {
    ...mapState(['名前'])
}
this.name // 'zzz' 

突然変異

状態を変える唯一の方法

const 変異 = {
    更新名(状態、新しい名前) {
        状態名 = 新しい名前
    }
}

<!--page.vue-->
// 1. this.$store.commit(updateName, 'zzh') を直接呼び出します // state.name: 'zzh'
// 2. 補助関数マッピングメソッド: {
    ...mapMutations(['updateName'])
}
this.updateName('zzh') // 状態名: 'zzh'

アクション

非同期操作を保存し、非同期にミューテーションをトリガーして状態を変更する

定数アクション = {
    asyncUpdateName(コンテキスト) {
        // 非同期操作。たとえば、name=xxx と仮定して、更新された名前を取得するための HTTP リクエストを開始するなど。
        ...
        context.commit('updateName', res.name) // state.name: 'xxx'
    }
}

<!--page.vue-->
// 1. this.$store.dispatch(asyncUpdateName) を直接呼び出す
// 2. 補助関数マッピングメソッド: {
    ...mapActions(['asyncUpdateName'])
}
this.asyncUpdateName()

ゲッター

計算プロパティに似たデータソース処理

定数ゲッター = {
    フォーマット名(状態) {
        状態名 + '2021' を返す
    }
}

<!--page.vue-->
// 1. this.$store.getter.formatName() を直接呼び出します // 'xxx2021'
// 2. 補助関数のマッピングが計算されます: {
    ...mapGetters(['formatName'])
}
this.formatName() // // 'xxx2021'

モジュール

モジュール化により、各モジュールは独自の状態、ミューテーション、アクション、ゲッターのセットを管理できます。

// モジュール内 this.$store.state.name // 内部アクセスには名前空間は必要ありません // モジュール外 this.$store.state.login.name // login はモジュール名前空間です...
その他の特性も同様

モジュール|Vuex公式ドキュメント

9. HTTPリクエストライブラリAxios

プロミスカプセル化に基づく HTTP リクエストライブラリ、公式に推奨

<!-- api.js -->
'axios' から axios をインポートします

// インスタンスを作成して設定する axios.create({
    baseURL: 'http://www.baidu.com', // リクエスト ベース アドレス timeout: 1000 // リクエスト タイムアウト...
})

// リクエストインターセプター axios.interceptors.request.use(request => {
    リクエスト.headers['Content-Type'] = 'application/json'
    ...
})
// レスポンスインターセプター axios.interceptors.response.use(response => {
    ...
    応答データを返す
})
//リクエストエクスポートのデフォルトを設定する{
    getId: () => axios.get('/getId'),
    getNameById: id => axios.post('/getNameById', id)
}

<!-- main.js -->
'./api.js' から api をインポートします。

Vue.prototype.$api = api
<!-- page.vue -->
this.$api.getId().then(res => {
    ...
})。キャッチ()

これで、Vue 2.0 の基礎に関する詳細な記事は終了です。Vue 2.0 の基礎に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue2.0 実践基礎編 (1)
  • 手書きの Vue2.0 データハイジャックの例
  • Vue2.0 でページキャッシュと非キャッシュを実装する方法
  • Vue2.0はhttpインターフェース、コンポーネント開発、ルーティング構成メソッドからデータを取得します
  • Vue2.0+SVGは音楽再生の円形プログレスバーコンポーネントを実現します
  • Vue2.0はシンプルなページングとジャンプ効果を実装します

<<:  Web デザイン: Web ミュージックの実装テクニック

>>:  Linux mysql5.5 を mysql5.7 にアップグレードする手順と落とし穴

推薦する

クリック範囲を拡大する入力チェックボックスを実装する方法

XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...

WeChatアプレットの世界的な状況の詳細な説明

序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...

Ubuntu 16.04.5LTS に SVN をインストールする手順

この記事では、UbuntuシステムでSVNを設定するプロセスを簡単に紹介します。ソースを更新sudo...

Vue でよく使われる高階関数と包括的な例

1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...

Antd+vueは円形属性フォームの動的検証のアイデアを実現します

必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...

Angularコンポーネントライフサイクルの詳細説明(I)

目次概要1. フックの呼び出し順序2. onChangesフック3. 変更検出メカニズムとDoChe...

HTML の空リンク href="#" と href="javascript:void(0)" の違い

# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...

jQueryはクッキーを操作する

コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...

CentOS7.5にHarbor1.7をインストールして設定するプロセス全体

1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...

Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法

<br />読みやすさはウェブサイトにとって非常に重要な部分であり、ウェブサイトの核心と...

IE6 の select を div でカバーできないバグの解決方法

div を使用してマスクを作成したり、ポップアップ ウィンドウをシミュレートしたりします。ただし、I...

Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明

目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...

N キロメートル以内のデータを検索する MySQL の簡単な例

地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...

動的画像読み込み技術の応用とjquery.lazyloadプラグインの使用例

アプリケーション例ウェブサイト http://www.uhuigou.net画像の動的読み込みは目新...