/Vue-Vuex-Demo

Primary LanguageJavaScriptMIT LicenseMIT

Vue-Vuex-Demo

練習vue及vuex的範例專案

Resources

Note

Command

  • npm install 安裝相依套件
  • npm run dev 執行開發模式

Keyword

  • v-modal 將資料名稱綁定到元素上。
  • v-if 當條件成立時，會在瀏覽器上繪製此元素 (適用於大區塊)。
  • v-show 當條件不成立時，會使用隱藏的方式，不顯示元素 (適用於小區塊、頻繁切換)。
  • v-for 迴圈。
  • v-on:click @click 事件處理。

Install

  • npm install -g vue-cli 安裝 vue-cli
  • vue init webpack your-project-name 建立vue專安
  • npm install vue-router --save-dev 安裝vue-route
  • npm install vuex --save 安裝vuex

vue-route

  • 建立路由
> router/index.js

export default new Router({
  routes: [
    {
      path: '/hello', # 一般路由
      name: 'Hello',
      component: Hello
    }, {
      path: '/c2f',
      name: 'c2f',
      component: CtoF
    }, {
      path: '/*', 
      redirect: '/hello' # 重新導向
    }
  ]
})
  • 建立連結
<router-link :to="{path: '/hello'}">Hello</router-link>
<router-link :to="{name: 'c2f'}">CtoF</router-link>

<router-view></router-view> # 轉跳後所載入的 component 最後會顯示在此
  • 使用Slot重複利用元件
<div slot="right">
# 放入 code
</div>

<slot name="right"> 
# 定義區域(挖洞)
</slot>

Vue-API

  • data: 放資料的地方。
  • props: 自定義 component 的 attribute 的地方，例如:<container :list="list" />。
  • Computed: 需要計算後才顯示的data可以放在computed裡，當data改變時會立即計算結果。
  • methods: 存放function的地方。