資訊專欄INFORMATION COLUMN
摘要：是中的條件指令，根據(jù)返回的布爾值動(dòng)態(tài)添加或移除元素。傳值方式我是標(biāo)題需要在中定義函數(shù)傳的值為字符串，不需要前綴傳的值為非字符串?dāng)?shù)字布爾值函數(shù)數(shù)組對象，為前綴，值為表達(dá)式計(jì)算結(jié)果在程序中，如引用的值。為該組件內(nèi)，元素綁定的事件處理函數(shù)。
視圖
包含內(nèi)容#NavigationBar、#TabBar、#MainContext；
為什么#NavigationBar、#TabBar分在Layout中，而不是components中？
代碼上實(shí)際上是沒有差別的，只是認(rèn)為#NavigationBar、#TabBar是加載一次的，而非復(fù)用，且屬于頁面布局內(nèi)容。
App.vueVue實(shí)例化的根組件，我們在這里進(jìn)行布局：
src/App.vue文件：
在這里，我們使用標(biāo)識(shí) 其內(nèi)部的HTML為Vue Template。
內(nèi)部必有一個(gè)且唯一的節(jié)點(diǎn)（這里是div#app）包裹內(nèi)容（即使只是一串字符）-->若存在同級(jí)節(jié)點(diǎn)，則會(huì)報(bào)錯(cuò)（這是因?yàn)閂Node會(huì)通過createElement("div")來創(chuàng)建真實(shí)節(jié)點(diǎn)，只能是單個(gè)元素）；
通過components屬性以鍵值對的形式引入組件，模板（HTML）中使用的標(biāo)簽名為鍵名（自定義元素VNode），值為導(dǎo)入的組件模塊；
通過components定義組件使用的方式，限制了組件應(yīng)用的范圍。即：如果你在其它文件直接使用
局部注冊的組件要求：如果在某一文件中應(yīng)用該組件，必須要使用components注冊一次。
導(dǎo)入組件import TabBar from "@/views/layout/TabBar";路徑以@起，這是因?yàn)?b>build/webpack.base.conf.js中配置的路徑別名"@" === "resolve("src")"：
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
"vue$": "vue/dist/vue.esm.js",
"@": resolve("src"), //可以追加當(dāng)前項(xiàng)目下，想快捷訪問的文件目錄
}
},
臨時(shí)定義的組件文件：
src/views/layout/NavigationBar.vue文件：
NavigationBar
在這里，我們通過style[scoped]定義一份樣式，其作用范圍僅限于當(dāng)前文件（又可稱模塊）模板中的元素。
像下邊，在TabBar.vue中的header元素就沒有使用到該文件中的對應(yīng)樣式，這就是局部作用域的樣式。
局部作用域的樣式只對當(dāng)前文件中的元素起作用，想改變body的樣式，不好意思，請全局導(dǎo)入或不使用局部作用域。
src/views/layout/TabBar.vue文件：
顯示效果： NavigationBar測試是否和NavigationBar一樣的效果
#NavigationBar中分左右結(jié)構(gòu)，左邊按鈕后退，右邊按鈕更新頁面。
更新頁面只是更新數(shù)據(jù)，而不是整個(gè)頁面的刷新，每個(gè)頁面更新數(shù)據(jù)的接口不同，所以，要作為組件屬性傳入。
在src/views/layout/navigationBar.vue中：
{{title}}
該部分為單文件組件#NavigationBar的Template部分。
@click是v-on:click的簡寫，用于綁定點(diǎn)擊事件。
v-if是Vue中的條件指令，根據(jù)返回的布爾值動(dòng)態(tài)添加或移除DOM元素。
該部分為單文件組件#NavigationBar的組件配置對象。
props為父級(jí)（調(diào)用該組件的組件）傳過來的屬性。
傳值方式
title傳的值為字符串，不需要:前綴；
:refresh傳的值為非字符串（數(shù)字、布爾值、函數(shù)、數(shù)組、對象...），:為前綴，值為Javascript表達(dá)式計(jì)算結(jié)果；
在程序中，如this.title引用props的值。
在模板中，作元素的innerHTML內(nèi)容時(shí)，如{{title}}引用。
methods為該組件內(nèi)，元素綁定的事件處理函數(shù)。
在程序中，如this.refresh()引用。
在模板中，如@click="onRefresh"調(diào)用，傳入的是函數(shù)應(yīng)用；若傳參，如@click="onRefresh(param)"調(diào)用。
computed本身寫法和函數(shù)定義一致，然而，其本身是一個(gè)data（數(shù)據(jù)源），字段名為函數(shù)名，值為函數(shù)的返回值。
使用方式與props一致。
| 區(qū)別 | method | computed |
|---|---|---|
| 類型 | 函數(shù) | 數(shù)據(jù)變量 |
| 參數(shù) | 可以帶參 | 不帶參（非函） |
| 觸發(fā) | 交互時(shí)觸發(fā) | 聲明內(nèi)部的this屬性的值變化時(shí)執(zhí)行 |
這里樣式請大家隨意設(shè)定，我使用的是flexBox布局。
點(diǎn)擊刷新，我定義了console.log("refresh success")。
TabBar#TabBar分以下情況：
無
一個(gè)按鈕
兩個(gè)按鈕
每個(gè)視圖中#TabBar按鈕是不同的，所以，按鈕的配置要當(dāng)作組件屬性傳入（控制變化的量）。
測試數(shù)據(jù)源const tabBars = [
{
label: "提交",
eventType: "click",
disabled: false,
callBack(vm) {
console.log("單擊，提交");
}
},
{
label: "取消",
eventType: "dblclick", //該事件在手機(jī)模式下無法響應(yīng)呢，只能在PC模式下調(diào)試
disabled: false,
callBack(vm) {
console.log("雙擊，取消");
}
}
]
src/views/layout/TabBar.vue的模板：
v-for="tab in tabBars"是Vue中的循環(huán)結(jié)構(gòu)，搭配:key使用，優(yōu)化Vue的渲染機(jī)制；
對tabBars進(jìn)行遍歷，tab為數(shù)組中的元素。
同樣key值，在更新時(shí)，會(huì)復(fù)用組件，而不是銷毀后，再創(chuàng)建一個(gè)新的組件。
$parent是組件實(shí)例#TabBar的父實(shí)例（#App）。
src/views/layout/TabBar.vue組件配置對象：
這里使用了另一種方式定義組件tabButton，其與 單文件組件 的區(qū)別僅僅在于使用render方法定義模板。
優(yōu)勢：定義出來的組件更具有靈活性，在這里on屬性可以動(dòng)態(tài)綁定事件類型。
注意：這里的事件類型[this.event]是作為參數(shù)傳進(jìn)來的呢！
組件本質(zhì)上只是一個(gè)JavaScript對象（虛擬DOM），該對象按Vue規(guī)定的成員屬性構(gòu)建，區(qū)別只在于Template的寫作模式。
這里應(yīng)用了Slot，指代該組件嵌套的子節(jié)點(diǎn)。
這里使用了underscore.js（_.isArray），需要在build/webpack.base.conf.js中配置：
const webpack = require("webpack");
...
module.exports = {
...
module:{
...
},
plugins:[
new webpack.ProvidePlugin({
_: "underscore",
}),
],
...
然后，underscore在全局可用。
因?yàn)檫@里的配置對dev和prod環(huán)境是一致的，所以，直接在build/webpack.base.conf.js中配置了。
顯示效果 整體Layout布局最終，我們要做一個(gè)頂天立地的內(nèi)滾動(dòng)結(jié)構(gòu)（使用flexBox布局即可）：
src/App.vue樣式中：
其中src/styles/mixins.scss：
@mixin flex($direction:row, $alignItems: stretch, $justifyContent: space-between, $basis: auto,$wrap:nowrap) {
display: flex;
flex-direction: $direction;
align-items: $alignItems;
justify-content: $justifyContent;
flex-basis: $basis;
flex-wrap: $wrap;
}
章節(jié)回顧
我這里面省略了將寫好的#NavigationBar、#TabBar替換原臨時(shí)搭建的對應(yīng)組件，我相信你能處理好，對吧？！
#App小節(jié)中，是怎樣注冊局部組件的，如果想要在項(xiàng)目所有模板中可以直接使用標(biāo)簽名來應(yīng)用組件，該怎么處理呢？
#App小節(jié)中，如何定義局部樣式的，如果想讓app.vue中header的樣式全局可用，該怎么處理呢？
父組件如何傳值給子組件，若想傳布爾值，該如何操作？
render函數(shù)如何渲染組件模板，使用該方法如何定義組件？
slot用于什么情況下呢，有什么好處？
思考接下來要實(shí)現(xiàn)列表了呢，怎么做列表數(shù)據(jù)呢？
番外Vue Slot應(yīng)用
組件定義
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/96575.html
摘要：頁面布局頁面整體布局分上中下上下部門導(dǎo)航欄，每個(gè)頁面所共有頁面的主體，隨內(nèi)容可滾動(dòng)欄，頁面可選，有的有，有的無可分離組件日期組件審批流組件列表組件可分離的工具庫申請單類型事假病假年假對應(yīng)數(shù)據(jù)類型應(yīng)該為，需要一個(gè)轉(zhuǎn)換為對應(yīng)的方法申請單狀 頁面布局 showImg(https://segmentfault.com/img/bVbeCjT?w=663&h=451); App頁面整體布局分...
摘要：目前，我們還沒有創(chuàng)建項(xiàng)目，進(jìn)入預(yù)期項(xiàng)目目錄的上一級(jí)文件目錄下即可。使用腳手架初始化項(xiàng)目最后一個(gè)為項(xiàng)目名稱，可以自定義其它名稱。 本章以下命令都是在cmd命令行中進(jìn)行的。 安裝命令行 npm i -g vue-cli 安裝完成后，輸入vue -V返回版本號(hào)，即安裝成功； 初始化項(xiàng)目 切換到項(xiàng)目目錄下 項(xiàng)目目錄，即項(xiàng)目所在目錄。 目前，我們還沒有創(chuàng)建項(xiàng)目，進(jìn)入 預(yù)期項(xiàng)目目錄 的上一級(jí)文件目...
摘要：若需要傳參，傳第二個(gè)參數(shù)不接受多個(gè)參數(shù)的傳入，最多只接收兩個(gè)參數(shù)請求數(shù)據(jù)目前，通過以上步驟，我們獨(dú)立的構(gòu)建了模擬數(shù)據(jù)和狀態(tài)管理，但還沒有將它們結(jié)合起來。驗(yàn)證如果你想驗(yàn)證寫出來的模擬數(shù)據(jù)是否正確，可以在示例頁打開控制臺(tái)，直接運(yùn)行。 關(guān)于模擬數(shù)據(jù)，這里使用Mock.js這個(gè)庫，關(guān)于用法，官網(wǎng)說的也比較詳細(xì)，這里我就簡單的帶一下。 列表數(shù)據(jù) 我們先將項(xiàng)目中src/components/Hel...
摘要：至于，為什么跟蹤文件因?yàn)檫@個(gè)功能是開發(fā)環(huán)境下獨(dú)有的，要修改開發(fā)環(huán)境吖，必然找開發(fā)環(huán)境的配置文件進(jìn)行跟蹤。測試可行性重啟項(xiàng)目后，在瀏覽器中輸入是你本地，可通過查看能夠訪問，就說明局域網(wǎng)內(nèi)的其他端可以訪問。然而，這樣并沒有結(jié)束。 本章內(nèi)容包含上一章思考的解決，還有一些其它的定制... CSS預(yù)處理 關(guān)于對.vue文件模塊處理規(guī)則的配置依次可在build/webpack.base.conf....
摘要：淘寶鏡像是一個(gè)完整鏡像，你可以用此代替官方版本只讀，同步頻率目前為分鐘一次以保證盡量與官方服務(wù)同步。全功能的，包括熱加載，靜態(tài)檢測，單元測試一個(gè)簡易的，以便于快速開始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先 首發(fā)博客: 我的博客 項(xiàng)目源碼: 源碼 項(xiàng)目預(yù)覽: 預(yù)覽 因?yàn)閭€(gè)人的喜好和工作的需要,一直...
閱讀 1286·2021-11-24 09:39
閱讀 2210·2021-11-22 13:54
閱讀 2256·2021-09-08 10:45
閱讀 1525·2021-08-09 13:43
閱讀 3041·2019-08-30 15:52
閱讀 3167·2019-08-29 15:38
閱讀 2902·2019-08-26 13:44
閱讀 3113·2019-08-26 13:30
