SimonAllen

延續先前 Vuex 筆記，其實我們要註冊引入vuex，可以不用在main.js引入註冊vuex，但這種方法不推薦。 不推薦的寫法 main.js import Vue from 'vue'; import App from './App.vue'; //註解 import store from './store'; new Vue({ //註解 store, el: '#app', render: h => h(App) }) 改到app.vue的<script>引入 import

首先用vue cli建立專案，這裡用webpack-simple模板建立 vue init webpack-simple 專案名稱 cd 專案名稱 npm install nom rub dev 接著安裝vue router npm install -s vue-router 編輯器或IDE打開專案，要用Vue-router，首先到main.js檔案上方import程式碼區塊新增 import 名稱 from 'vue-router' 這裡我這樣寫 import VueRouter from 'vue-router' 接著程式碼在「import」和「new Vue({」區塊間新增 Vue.use(名稱) 因為我import的名稱是VueRouter，所以程式碼自然是新增 Vue.use(

我們會用props來獲取資料，但是如果是直接定義在HTML的模板： 假設組件的props是 props: ['myData'] HTML的模板要寫 <div :my-data = "data"></div> 因為HTML沒有大寫 假設是寫在JS、.vue組件內的template，用字串模板` ` template:`<div :myData = "data"></div>` 就沒有大寫的限制囉！ vue組件的props：[ ]是單向資料流，也是就是由上而下的傳遞資料，跟v-model的雙向綁定不一樣。

我們在Vue使用組件，一般都是用Vue.component( )來寫Vue.component( )的第一個參數是組建名稱，第二個參數是物件，裡頭會有data、template、methods...etc Vue.component("組件名稱", { <u>//....</u> } 組件名稱基本上會有三種命名方式 1.kebab-case 串燒式命名法 各單字之間用「-」隔開 2.camelCase  駝峰式命名法 首個單字小寫，後面各單字開頭大寫 3.PascalCase 帕斯卡命名法 首個單字大寫，後面各單字開頭也大寫 Vue組件可以使用以上三種方式命名，但要注意的是，轉換成組件標籤後，一律是kebab-case 串燒式命名法 例如： //kebab-case 串燒式命名法 Vue.component("

使用Vue 動態切換組件時(或SPA)，有時我們在切換組件時想保存原本組件的資料： 例如有一個組件是表單，寫到一半點選其他組件，網頁把表單組件置換成別的組件，這時再切回表單組件時，會發現原本寫表單寫到一半的文字資料不見了。 這其實很合理，因為組件切換是把原本組件刪除，切換回來是再次動態產生，所以新組件自然沒有保存被刪除置換前的資料。 想解決這方法，只要在表單組件(或想暫時保存資料的組件)外，用<Keep-alive>標籤把該組件<組件>標籤包起來就好了！ 原本是組件1和組件2切換 <組件1></組件1> <組件2></組件2> 改成這樣即可 <Keep-alive> <組件1></組件1> <