Vue.js

Vue router 基本設置

首先用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(
SimonAllen

Vue props 命名

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

Vue.js 複習:component 命名

我們在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("
SimonAllen

Keep-alive 保存切換組件時的資料

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

Vue cli Error: No PostCSS Config found in xxxxx

在上傳本地專案到gitlab、github時,理所當然要把node_modules資料夾砍掉 反正clone下來npm install就好了 結果報錯 囧 乍看會以為是Bootstrap的問題,其實不是,因為Bootstrap確實存在於node_modules裡,重點是這句 No PostCSS Config found in xxxxx 上網查詢了一下,發現大家都有這個問題,原來這是webpack3以後才有的問題,這是關於webpack配置產生的錯誤 解決方法,在根目錄新增一個檔案postcss.config.js 沒錯就是根目錄喔,理論上是和package.json和readme.md同一層級 然後在postcss.config.js貼上以下內容 module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } } 存檔後再執行 npm install、npm
SimonAllen

Vue cli 安裝 Bootstrap4、Sass、jQuery 和 Popper.js

紀錄一下環境建置 首先建立vue cli專案 vue init webpack 專案名稱 或 vue init webpack-sample 專案名稱 接著 cd 專案名稱 npm 安裝套件 npm安裝Bootstrap 4 npm install bootstrap -S 現在install bootstrap會自動選bootstrap4 npm安裝jQuery npm install jquery -S npm安裝popper.js npm install popper.js -S npm安裝sass、sass-loader、node-sass npm install sass sass-loader node-sass -S -S等於—save,是要把相依寫入進package.json
SimonAllen