摘要:導(dǎo)語(yǔ)承接上文實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)一在上一篇文章中,我詳細(xì)敘述了如何創(chuàng)建項(xiàng)目框架和引入各種后臺(tái)常用插件,做好這些準(zhǔn)備工作后,我們就可以著手進(jìn)行頁(yè)面的開(kāi)發(fā)了。如果傳入的數(shù)據(jù)不符合規(guī)格,會(huì)發(fā)出警告。
1. 導(dǎo)語(yǔ)
承接上文:Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)(一)
2. 常見(jiàn)需求 01. 父子組件通信在上一篇文章中,我詳細(xì)敘述了如何創(chuàng)建項(xiàng)目框架和引入各種后臺(tái)常用插件,做好這些準(zhǔn)備工作后,我們就可以著手進(jìn)行頁(yè)面的開(kāi)發(fā)了。在開(kāi)發(fā)過(guò)程中,會(huì)遇到一些常見(jiàn)的需求和問(wèn)題,我整理了一下,有以下幾點(diǎn)。
a. 父 -> 子(父組件傳遞數(shù)據(jù)給子組件)
使用 props,具體查看文檔 - 使用 Prop 傳遞數(shù)據(jù)(https://cn.vuejs.org/v2/guide...使用-Prop-傳遞數(shù)據(jù))
b. 父 -> 子(在父組件上調(diào)用子組件內(nèi)的方法)
使用 ref,具體查看文檔 - 子組件索引(https://cn.vuejs.org/v2/guide...子組件索引)
// 父組件 script this.$refs.profile.someMethod();
注意:如果在子組件上設(shè)置 ref 屬性,則可以通過(guò) this.$refs 獲取到該子組件對(duì)象,如果在普通的 html 標(biāo)簽上設(shè)置 ref 屬性,則獲取到的是 Dom 節(jié)點(diǎn)。
c. 子 -> 父(在父組件上獲取子組件內(nèi)的數(shù)據(jù))
同上,也是利用 ref
// 父組件 script let childData = this.$refs.profile.someData;
d. 子 -> 父(子組件內(nèi)觸發(fā)事件,父組件監(jiān)聽(tīng)事件)
父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽(tīng)子組件觸發(fā)的事件,具體查看文檔 - 使用 v-on 綁定自定義事件(https://cn.vuejs.org/v2/guide...使用-v-on-綁定自定義事件)
// 父組件 script methods: { parentHandle(params){ // 這個(gè)方法在子組件 emit childTrigger 事件后會(huì)執(zhí)行 // params 為子組件里觸發(fā)事件時(shí)傳的參數(shù) } }
// 子組件 user-profile script this.$emit("childTrigger", params);
e. 子 -> 父(子組件傳值,父組件里使用,具體實(shí)現(xiàn)見(jiàn) 03)
01總結(jié):
應(yīng)用場(chǎng)景示例:在父組件上打開(kāi)側(cè)邊欄子組件,可以傳 prop visible(true)來(lái)控制側(cè)邊欄打開(kāi);側(cè)邊欄內(nèi)部有關(guān)閉按鈕,就在點(diǎn)擊關(guān)閉按鈕后觸發(fā)一個(gè)事件,父組件監(jiān)聽(tīng)事件執(zhí)行方法將 data visible 改為 false。
PS:父組件傳值到子組件,傳的值是 Object 類(lèi)型,子組件使用 v-model 可以修改該值(將某個(gè)表單元素的 v-model 設(shè)為該值),父組件可直接獲取到改變后的值。
有時(shí)候會(huì)用到一些工具類(lèi)函數(shù),希望可以全局調(diào)用,而不是局限于某個(gè)組件中。
Step 1:
在 項(xiàng)目根目錄/static/js/ 目錄下新建一個(gè) util.js 文件,將常用的工具函數(shù)寫(xiě)在這里面。
Step 2:
在 index.html 里面引入 util.js,就可以在 .vue 文件里使用那些方法了,如下:
02總結(jié):
使用這個(gè)方法可以使得一些使用頻率高的函數(shù)可以在所有 .vue 文件中被調(diào)用,笨拙而又簡(jiǎn)單。
03. slot以前看文檔時(shí)一直不理解如何使用 slot,現(xiàn)在用多了 elementui 的組件之后,就漸漸發(fā)現(xiàn)了它的實(shí)用性。
簡(jiǎn)單來(lái)說(shuō),使用 slot 可以使我們做到:在父組件里使用子組件時(shí),在子組件里插入一些自定義的內(nèi)容(html 代碼啥的),具體查看文檔:http://cn.vuejs.org/v2/guide/...使用-Slot-分發(fā)內(nèi)容;
更神奇的功能是 作用域插槽,可以讓我們?cè)?strong>父組件里使用子組件時(shí),獲取子組件傳來(lái)的數(shù)據(jù),具體查看文檔:http://cn.vuejs.org/v2/guide/...作用域插槽。
簡(jiǎn)單應(yīng)用示例:
這里寫(xiě)的東西會(huì)覆蓋子組件里的 slot 標(biāo)簽所在的位置
渲染結(jié)果:
可以應(yīng)用簡(jiǎn)單的 slot 來(lái)達(dá)到為不同的按鈕填充文字的目的:
詳情 搜索
作用域插槽示例:
在父級(jí)中,具有特殊屬性 scope 的 元素,表示它是作用域插槽的模板。scope 的值對(duì)應(yīng)一個(gè)臨時(shí)變量名,此變量接收從子組件中傳遞的 prop 對(duì)象:
渲染結(jié)果: 03總結(jié): 應(yīng)用場(chǎng)景示例:elementui 的 button 組件中有簡(jiǎn)單插槽的使用,table 組件則使用到了 作用域插槽。 vue-router 的使用,簡(jiǎn)單來(lái)說(shuō)就是通過(guò)配置,實(shí)現(xiàn)在不同的 url 路徑下,頁(yè)面渲染不同的組件。具體查看文檔:vue-router 2。 使用示例 二級(jí)路由(路由可嵌套): router 配置: 引入 router 配置: 04總結(jié): 關(guān)于 vue-router 的使用,看文檔一般都能解決你的疑問(wèn),vue-router 2。 使用 Vue 開(kāi)發(fā)單頁(yè)應(yīng)用時(shí),前后端分離開(kāi)發(fā),進(jìn)度不一。因此前端有時(shí)候就需要自己模擬接口的 json 文件,然后直接使用異步請(qǐng)求方法(如 ajax) 去獲取數(shù)據(jù),渲染頁(yè)面,測(cè)試代碼等。 Step 1: Step 2: 05總結(jié): 在后端尚未提供接口時(shí),我都是用這個(gè)方法來(lái)測(cè)試前端獲取數(shù)據(jù)和處理數(shù)據(jù)的代碼是否正確。 我們可以為組件的 props 指定驗(yàn)證規(guī)格。如果傳入的數(shù)據(jù)不符合規(guī)格,Vue 會(huì)發(fā)出警告。當(dāng)組件給其他人使用時(shí),這很有用。 示例如下: 愚蠢的我每次想要傳 Number 或者 Boolean 類(lèi)型的值到子組件時(shí),都在父組件里定義好值,然后再綁定到子組件上: 小技巧:當(dāng)某個(gè) prop 類(lèi)型為 Boolean 時(shí),可以直接把該 prop 的名稱(chēng)寫(xiě)在組件上,默認(rèn)會(huì)傳 true,不寫(xiě)的話(huà)默認(rèn)為 false。比如 有些人會(huì)問(wèn)如何在項(xiàng)目里使用 autoprefixer 插件,事實(shí)上使用 vue-cli 的 webpack 模板生成的項(xiàng)目里已經(jīng)帶有 autoprefixer 的使用了,如下圖: 對(duì)項(xiàng)目進(jìn)行 npm run build 操作后,發(fā)現(xiàn)生成的文件超大(比想象中的大),尤其是那些 .map 文件,不過(guò),我們可以通過(guò)配置選擇不生成該類(lèi)文件。 一句話(huà),有空多看文檔,可以避免很多實(shí)踐中的問(wèn)題。 文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/83334.html 摘要:導(dǎo)語(yǔ)下文實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)二該文章將從頭到尾梳理我是如何使用開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目的,我會(huì)將自己遇到的問(wèn)題貼出,希望可以幫助到其他人。構(gòu)建項(xiàng)目框架準(zhǔn)備對(duì)于大陸用戶(hù),建議將的注冊(cè)表源設(shè)置為國(guó)內(nèi)的鏡像,如淘寶鏡像,可以大幅提升安裝速度。
1. 導(dǎo)語(yǔ)
下文:Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)(二)
該文章將從頭到尾梳理我是如何使用 Vue 2 開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目的,我會(huì)將自己遇到的問(wèn)... 平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址:http://www.kancloud.cn/jsfron...
03月份前端資源分享
1. Javascript 175453545
Redux compose and middleware 源碼分析
深入 Promise(二)——進(jìn)擊的 Promise
Effective JavaScript
leeheys blog -... 平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址:http://www.kancloud.cn/jsfron...
03月份前端資源分享
1. Javascript 175453545
Redux compose and middleware 源碼分析
深入 Promise(二)——進(jìn)擊的 Promise
Effective JavaScript
leeheys blog -... 平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址:http://www.kancloud.cn/jsfron...
03月份前端資源分享
1. Javascript 175453545
Redux compose and middleware 源碼分析
深入 Promise(二)——進(jìn)擊的 Promise
Effective JavaScript
leeheys blog -... 閱讀 914·2021-09-29 09:35 閱讀 1259·2021-09-28 09:36 閱讀 1528·2021-09-24 10:38 閱讀 1078·2021-09-10 11:18 閱讀 638·2019-08-30 15:54 閱讀 2506·2019-08-30 13:22 閱讀 1972·2019-08-30 11:14 閱讀 706·2019-08-29 12:35
04. router 使用小記
一級(jí)路由:
// router/index.js
import Vue from "vue";
import Router from "vue-router";
// 引入組件
import index from "page/index"; // 該組件包含一個(gè)頂部欄和側(cè)邊菜單欄,內(nèi)容區(qū)使用 router-view 來(lái)根據(jù) url 路徑顯示子組件
import notFoundComponent from "page/404"; // 該組件為 404 頁(yè)面,當(dāng)你路由使用 history 模式時(shí)需要用到
import monitorIndex from "page/monitor/index"; // 該組件為一個(gè)監(jiān)控頁(yè)面,用于顯示在 page/index.vue 頁(yè)面上的 router-view 處(即頁(yè)面的內(nèi)容區(qū)域)
Vue.use(Router);
// 定義 scrollBehavior 方法
const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
export default new Router({
mode: "history",
// mode 默認(rèn) hash 值,但是 hash (url中包含 # 符號(hào))不太好看也不符合我們一般的網(wǎng)址瀏覽習(xí)慣
// 當(dāng)你使用 history 模式時(shí),URL 就像正常的 URL,例如 http://yoursite.com/user/id,也好看!
linkActiveClass: "active",
// 默認(rèn)值: "router-link-active",就是當(dāng)前組件被激活,相應(yīng)路由會(huì)自動(dòng)添加類(lèi) "router-link-active",這里是為了全局設(shè)置激活類(lèi)名,如果不設(shè)置,直接用默認(rèn)的也是可以的
// 如:使用 router-link 組件來(lái)導(dǎo)航,通過(guò)傳入 `to` 屬性指定鏈接
//
// main.js
import Vue from "vue";
// 引入 element ui 組件
import { Dropdown, DropdownMenu ...} from "element-ui";
// 引入 App.vue
import App from "./App";
// 引入 router 配置
import router from "./router"; // 默認(rèn)會(huì)找到 router 文件夾下的 index.js 文件
// 引入項(xiàng)目圖標(biāo)的 sprite css,可以簡(jiǎn)單的通過(guò)這種方式引入 css 文件
import "./assets/css/sprite.css"
// 使用 element ui 組件
Vue.use(Dropdown)
Vue.use(DropdownMenu)
...
new Vue({
el: "#app",
router, // 使用 router 配置
template: "
其他參考文章:Vue.js系列之vue-router(中)(4)
PS:使用 history 模式的話(huà),還需要 后臺(tái)配置 支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶(hù)端應(yīng)用,如果后臺(tái)沒(méi)有正確的配置,當(dāng)用戶(hù)在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404(因?yàn)榈拇_找不到該頁(yè)面),這就不好看了。并且在后臺(tái)配置后,還需要前端來(lái)提供 404 頁(yè)面,我上面的示例代碼中有提到,可供參考。
在 項(xiàng)目根目錄/static/api/ 目錄下新建一個(gè) test.json 文件,寫(xiě)入模擬的接口數(shù)據(jù):{
"status": true,
"data": {
...
}
}
在 .vue 組件文件里任意需要請(qǐng)求數(shù)據(jù)的方法里(如 created 鉤子,或者某個(gè) methods 方法里)編寫(xiě)相關(guān)代碼:let vm = this;
// ajax 請(qǐng)求數(shù)據(jù)
$.ajax({
type: "GET",
url: "static/api/test.json",
data: "",
beforeSend: function() {
// 顯示 Loading
vm.loading = true;
},
complete: function() {
// 隱藏 Loading
vm.loading = false;
},
success: function(data) {
// 處理返回?cái)?shù)據(jù)
...
},
error: function() {
// 數(shù)據(jù)請(qǐng)求失敗,給用戶(hù)適當(dāng)?shù)姆答佇畔? ...
},
dataType: "json"
});
props: {
// 基礎(chǔ)類(lèi)型檢測(cè) (`null` 意思是任何類(lèi)型都可以)
propA: Number,
// 多種類(lèi)型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數(shù)字,有默認(rèn)值
propD: {
type: Number,
default: 100
},
// 數(shù)組/對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
propE: {
type: Object,
default: function () {
return { message: "hello" }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
}
}
// 這樣會(huì)報(bào)錯(cuò),因?yàn)?show type 為 Boolean,rows type 為 Number
// 默認(rèn)情況下直接傳值,子組件接收到的都是 String 類(lèi)型
// template
// 于是我這樣做:
// template
// 實(shí)際上可以直接這樣做:
// template
02. autoprefixer
03. build 時(shí)不生成 .map 文件
// 項(xiàng)目根目錄/config/index.js
var path = require("path")
module.exports = {
build: {
...
productionSourceMap: false, // 將該值設(shè)為 false,就不會(huì)生成 .map 文件了
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ["js", "css"],
...
},
dev: {
...
}
}
4. 總結(jié)
相關(guān)文章
Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)(一)
2017年3月份前端資源分享
2017年3月份前端資源分享
2017年3月份前端資源分享
發(fā)表評(píng)論
0條評(píng)論
Ilikewhite
男|高級(jí)講師
TA的文章
閱讀更多
【送書(shū)啦】Python操作Mysql(連接、數(shù)據(jù)探查、寫(xiě)Excel)
程序員工具網(wǎng)站(比較有意思)
CYUN:全場(chǎng)VPS八折,老用戶(hù)限量5折,香港VPS月付14.5元起
Hostdare:搬瓦工同機(jī)房,CN2 GIA線(xiàn)路,9折優(yōu)惠中,年付$44.99起
前端每日實(shí)戰(zhàn):73# 視頻演示如何用純 CSS 創(chuàng)作一只卡通狐貍
強(qiáng)大的hexo--如何利用hexo平臺(tái)搭建個(gè)人博客
css實(shí)現(xiàn)水平/垂直居中效果
利用 Css 制作精美的卡片UI