vue全家桶

vue-router：路由組件

文檔：https://router.vuejs.org/zh-cn/

• 安裝
• 基礎
  • 開始
  • 動態路由匹配
  • 嵌套路由
  • 編程式導航
  • 命名路由
  • 命名視圖
  • 重定向 和 別名
  • HTML5 History 模式
• 進階
  • 導航鈎子
  • 路由元信息
  • 過渡動效
  • 數據獲取
  • 滾動行為
  • 懶加載
• API 文檔
  • router-link
  • router-view
  • 路由信息對象
  • Router 構造配置
  • Router 實例
  • 對組件注入

vue-router 60分鍾快速入門--keepfool：

http://www.cnblogs.com/keepfool/p/5690366.html#h1_25

 

vue-router：使用 Vue.js 時，我們就已經把組件組合成一個應用了，當你要把 vue-router 加進來，只需要配置組件和路由映射，然后告訴 vue-router 在哪里渲染它們。

html：1.v-link指令 導航鏈接--2.使用router-view路由出口，渲染組件

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

js：1.創建組件，2.映射路由，3.創建 router 實例，4.創建和掛載根實例

// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
// 我們晚點再討論嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 創建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這么簡單着吧。
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})

// 4. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現在，應用已經啟動了！

 

vuex：狀態管理模式

文檔：https://vuex.vuejs.org/zh-cn/

• 尋找 1.0 文檔？
• 更新記錄
• 安裝
• Vuex 是什么？
• 開始
• 核心概念
  • State
  • Getters
  • Mutations
  • Actions
  • Modules
• 項目結構
• 插件
• 嚴格模式
• 表單處理
• 測試
• 熱重載
• API 文檔

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。