Vue 2.0 の基礎を詳しく解説

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

データ（） {
    戻る {
        カウント: 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 }

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

// 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
<!-- ルートに一致するコンポーネントがここでレンダリングされます -->
<ルータービュー></ルータービュー>

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

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

// ユーザーが認証に失敗した場合は /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 の新機能)
ルート出発前

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

Vue.use(Vuex)
...

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

Vue.prototype.$store = ストア

//ストア.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 はモジュール名前空間です...
その他の特性も同様

<!-- 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 => {
    ...
}）。キャッチ（）