目錄

專案初始化元件資料區域性化處理子元件父元件路由邏輯跳轉案例元件間通訊父傳子子元件父元件子傳父子元件父元件元件的生命週期鉤子路由傳參第一種配置：router/index.js傳遞：GoodsBox.vue接收：GoodsDetail.py第二種配置：router/index.js傳遞：GoodsBox.vue接收：GoodsDetail.py全域性配置自定義css與jsglobal.csssettings.jsmain.js小結專案初始化

1.跟元件: App.vue

<template> <div id="app"> <router-view /> </div></template>

2.路由配置：router--index.js

const routes = [ { path: '/', name: 'Home', component: Home },];

3.元件：views和components資料夾

2）初始化Home.vue

<template> <div class="home"> <h1>主頁</h1> </div></template>

3)刪除logo和HollWorld.vue

4)在assets中新建css、img、js三個資料夾

global.css

html, body { margin: 0;}a { color: black; text-decoration: none;}ul { margin: 0; padding: 0;}

settings.js

export default { base_url: 'https://127.0.0.1:8000'}

main.js

//1) 配置全域性cssimport '@/assets/css/global.css'// import global_css from '@/assets/css/global.css' // 資源需要用變數儲存,方便以後使用// require('@/assets/css/global.css')// let global_css = require('@/assets/css/global.css') // 資源需要用變數儲存,方便以後使用// 2) 配置自定義js設定檔案import settings from '@/assets/js/settings.js'Vue.prototype.$settings = settings;// 在任何一個元件中的邏輯,可以通過 this.$settings訪問settings.js檔案的{}資料

小結

"""專案：\t環境；node -> npm -> cnpm -> vue/cli\t建立：vue create proj\t配置：配置npm啟動項\t專案目錄結構：依賴、環境、入口、核心程式碼們\t元件：\t構成：template + script + style\t匯入：import 別名 from '路徑'\t父加子：1）匯入 2）註冊 3）使用\t元件資料：元件化處理 data(){ return {} }\t傳參：父傳子 - 自定義元件屬性 | 子傳父 - 自定義元件事件\t生命週期鉤子：created() { //完成後臺請求等 }路由：\t根元件中的頁面佔位：<router-view />\t導航欄中的頁面跳轉：<router-link to=""></router-link>\t程式碼中的邏輯跳轉：this.$router.push() | this.$router.go()\t路由傳參：兩種方式\t兩個路由物件：\t\tthis.$router - 控制路由跳轉 this.$route - 控制路由資料"""

選擇了IT，必定終身學習

出處：http://dwz.date/csJf