資訊專欄INFORMATION COLUMN
摘要：文件是當(dāng)前項(xiàng)目的首頁(yè)文件。以后可能還會(huì)有全局注冊(cè)組件等操作。在上面使用了這是一個(gè)預(yù)定義的路徑，代表目錄。而為了使用好這個(gè)實(shí)例，不要修改的，不然裝載完內(nèi)容后，對(duì)應(yīng)的管理區(qū)域會(huì)指向不明，而導(dǎo)致渲染失敗。
目錄
首發(fā)日期：2019-01-28
修改：
npm是什么?
npm 是 JavaScript 世界的包管理工具。js也是可以建成一個(gè)項(xiàng)目的，很多時(shí)候前端的功能不可能是純粹的自己寫(xiě)的，我們會(huì)去用別人造好的輪子（日歷插件，圖表插件之類的），如果我們自己去找輪子，那么首先要去那個(gè)輪子的官網(wǎng)下載（有時(shí)候這個(gè)步驟會(huì)很麻煩）。而npm的服務(wù)器上會(huì)收集了很多常用的js相關(guān)的文件（不僅僅是js，更準(zhǔn)確的說(shuō)是代碼模塊，通常都是集成一個(gè)包），我們可以利用npm來(lái)下載項(xiàng)目的依賴模塊（包）。
除了依賴，npm還允許用戶從服務(wù)器下載并安裝別人編寫(xiě)的命令行程序到本地使用?！颈热鐅ue-cli,安裝了vue-cli,就可以使用這個(gè)程序來(lái)快速建立一個(gè)基礎(chǔ)的vue項(xiàng)目】
node -v和npm -v，如果輸出了各自的版本號(hào)，那么就是安裝成功了。這些命令可以先暫時(shí)不記，后面用到的時(shí)候還會(huì)提一下。
npm install 包名 【如果要全局安裝，那么要加上參數(shù)-g】【一些第三方的包也是程序，安裝的時(shí)候也是使用npm install 程序名】npm installnpm uninstall 包名 【如果還想從package.json中刪除模塊，那么還需要加上參數(shù)--save,即npm uninstall --save 包名】npm startnpm lsnpm install -g npmnpm install -g cnpm --registry=http://registry.npm.taobao.org1.進(jìn)入命令行，鍵入命令npm install -g vue-cli【這一步是安裝vue腳手架vue-cli，vue-cli能夠快速構(gòu)建一個(gè)vue的基礎(chǔ)項(xiàng)目出來(lái)】
2.使用腳手架來(lái)創(chuàng)建一個(gè)vue項(xiàng)目：vue init webpack my-project 【webpack是創(chuàng)建vue項(xiàng)目的方式，my-project是vue項(xiàng)目的名稱】
3.等待下載完模塊后，使用cd命令進(jìn)入項(xiàng)目文件夾后，輸入npm run dev來(lái)運(yùn)行項(xiàng)目。
4.訪問(wèn)控制臺(tái)提示的url，就可以看到基于npm的hello world了。
5.訪問(wèn)localhost:8080,可以看到如下的界面，說(shuō)明一個(gè)基礎(chǔ)的vue項(xiàng)目已經(jīng)初始化完成了：
為什么不使用靜態(tài)導(dǎo)入來(lái)演示后面的例子了？
在后面，我們將講到多個(gè)組件之間的復(fù)合使用，在有多個(gè)組件的時(shí)候，使用單文件來(lái)注冊(cè)組件是一個(gè)比較好的處理，而且在項(xiàng)目擴(kuò)大的時(shí)候會(huì)涉及到方方面面的問(wèn)題（路由啊，數(shù)據(jù)管理啊等等），這時(shí)候靜態(tài)導(dǎo)入就不太適合了，開(kāi)發(fā)效率太低了。
項(xiàng)目構(gòu)建完之后，讓我們來(lái)分析一下“該在哪個(gè)目錄寫(xiě)下哪些代碼”
上面的文件具體不需要太理解，我們只需要關(guān)注src目錄。我們只需要在src目錄下寫(xiě)代碼就好。下面將介紹怎么在src目錄下寫(xiě)代碼。
項(xiàng)目換到了npm上后，先了解一下前面學(xué)習(xí)過(guò)的內(nèi)容怎么在npm創(chuàng)建的vue項(xiàng)目中使用吧。
1.還需不需要手動(dòng)創(chuàng)建根實(shí)例？
已經(jīng)不需要了，在main.js文件會(huì)自動(dòng)創(chuàng)建一個(gè)根實(shí)例。
2.根實(shí)例管理區(qū)域在哪里？
從main.js文件中，可以看到根實(shí)例所對(duì)應(yīng)的區(qū)域的id還是app,而這個(gè)app在index.html中【你可以嘗試修改index.html，確定一下是這個(gè)區(qū)域，比如說(shuō)可以修改一些頁(yè)面的title】
3.是如何渲染出上面的Hello World頁(yè)面的？
可以看到出來(lái)main.js是核心的入口文件，它創(chuàng)建了一個(gè)根實(shí)例來(lái)管理了index.html的app區(qū)域，并且聲明了內(nèi)部使用的template,所以在渲染的時(shí)候，app區(qū)域里面會(huì)渲染成,而App是一個(gè)組件（這是單文件組件，App.vue），所以也就是把App組件中的內(nèi)容顯示到app區(qū)域中。
4.怎么修改首頁(yè)？
從上面來(lái)看，首頁(yè)就是index.html,核心的顯示區(qū)域是app區(qū)域，而app區(qū)域顯示的是組件App的內(nèi)容，如果我們修改App組件(App.vue)中的內(nèi)容就可以修改首頁(yè)了。
5.怎么注冊(cè)組件？
使用npm來(lái)構(gòu)建項(xiàng)目后，一個(gè)組件可以定義在一個(gè)多帶帶的vue中。
除了以往的那些全局注冊(cè)，局部注冊(cè)，你還可以使用單個(gè)vue文件來(lái)注冊(cè)一個(gè)組件（實(shí)質(zhì)相當(dāng)于局部注冊(cè)）。這個(gè)步驟這里可以簡(jiǎn)單地說(shuō)一下，首先定義一個(gè)vue文件，例如App.vue文件，然后在App.vue中定義組件的內(nèi)容，并且要使用export來(lái)“導(dǎo)出”組件，在需要的地方使用import 來(lái)導(dǎo)入組件，然后就可以使用組件了。（上面的main.js使用App.vue組件的時(shí)候也有一行import App from ./App）
【上圖有個(gè)問(wèn)題，如果你直接打，你會(huì)發(fā)現(xiàn)頁(yè)面的color都變了，如果你想要在當(dāng)前組件生效，那么可以在style后加個(gè)scoped】
6.組件的常用屬性的定義：
基本還是按以前的規(guī)則，比如data要是一個(gè)函數(shù)。
7.router-view是什么？
如果你嘗試修改App.vue，你會(huì)發(fā)現(xiàn)里面有一個(gè)router-view，這是什么呢？這是一個(gè)用于路由顯示的元素。它會(huì)裝載當(dāng)前路由所定義的內(nèi)容。如果你學(xué)過(guò)iframe或者frame，你就明白這個(gè)東西的意義，router-view會(huì)根據(jù)當(dāng)前所處的url來(lái)顯示對(duì)應(yīng)的內(nèi)容（這個(gè)路由對(duì)應(yīng)的內(nèi)容在router目錄下的index.js中）。
這里提一下一些在Vue中常用的ES6語(yǔ)法：
import Hello from @/components/Hello@,這是一個(gè)預(yù)定義的路徑，代表src目錄。這個(gè)預(yù)定義路徑是webpack給我們的。1.新建vue文件
我選擇在src/components下新建一個(gè)Hello.vue
2.定義組件的內(nèi)容
{{msg}}
3.在其他文件中使用組件（這個(gè)所謂的其他文件，也可以是其他組件）:首先使用import來(lái)導(dǎo)入組件，然后使用components來(lái)聲明使用組件，最后在組件的template中使用組件
如果要使用路由，那么首先要開(kāi)啟功能：
路由與內(nèi)容的對(duì)應(yīng)信息定義在router目錄下的index.js文件中。
/hello路由。
所謂路徑參數(shù)，就是形似https://xxxx.xxx.com/info/1011337448中的1011337448這個(gè)參數(shù)。這個(gè)參數(shù)告訴了這個(gè)頁(yè)面該怎么渲染。
在路由中，我們可以使用形如/path/:id的方式來(lái)匹配參數(shù)，:后面跟的是參數(shù)名；
然后在組件中使用this.$route.params.參數(shù)名來(lái)獲取參數(shù)。
路徑參數(shù)是可以有多個(gè)的，如/hello/:id/:name，這是分別利用this.$route.params.參數(shù)名來(lái)獲取參數(shù)。
所謂查詢參數(shù)，就是形如https://xxxx.xxx.com/info?name=lilei中name=lilei的這個(gè)參數(shù)。
給下一個(gè)路由帶查詢參數(shù)可以使用如下的方法：
1./hello?id=001?！具@里使用路由的path來(lái)標(biāo)識(shí)路由】
2.
然后在組件中我們可以使用$route.query.參數(shù)名來(lái)獲取參數(shù)
如果想要監(jiān)聽(tīng)路由參數(shù)變化，那么可以使用watch來(lái)監(jiān)聽(tīng)。
步驟：
1.首先，在路由中使用children來(lái)定義嵌套路由
2.先訪問(wèn)/hello,確認(rèn)App.vue中的router-view渲染了路由/hello的數(shù)據(jù)
3.在Hello.vue中寫(xiě)一些文字，用來(lái)確定路由切換時(shí)，第一級(jí)的router-view的數(shù)據(jù)沒(méi)有被清除。同時(shí)新建一個(gè)router-view。
4.隨便定義一點(diǎn)Child.vue的內(nèi)容。
5.先訪問(wèn)/hello,再訪問(wèn)/hello/child:
router-view的嵌套，如果想要在同一組件內(nèi)使用多個(gè)router-view呢？（為什么會(huì)需要多個(gè)router-view呢？有可能想要發(fā)生某些路由變化的時(shí)候，頁(yè)面某一部分不發(fā)生變化，只在某些情況發(fā)生變化，比如側(cè)邊欄這樣的東西。通常都想要側(cè)邊欄不變化，只有中間的顯示區(qū)域發(fā)生變化，但如果退出登錄了，那么兩個(gè)部分應(yīng)該都發(fā)生變化。）router-view添加一個(gè)屬性name,從而讓router-view有名字。router-view的時(shí)候，路由該怎么定義呢？上面的使用router-link的方式可以稱為聲明式路由，下面講的這種叫做編程式路由。
我們可以使用this.$router.push(路由的path)來(lái)進(jìn)行路由跳轉(zhuǎn)
雷猴
在上面的路由匹配中，如果我們?cè)L問(wèn)了一個(gè)沒(méi)有進(jìn)行定義的路由，那么頁(yè)面會(huì)顯示空白。
我們可以在路由的最下面定義一個(gè)如下的路由：
這樣就可以把匹配不到的路由都渲染成指定的頁(yè)面。
1.首先進(jìn)行安裝：npm install vuex --save
2.然后聲明使用vuex，并創(chuàng)建一個(gè)store:
【對(duì)于大型應(yīng)用，我們會(huì)希望把 Vuex 相關(guān)代碼分割到模塊中。所以下面的代碼寫(xiě)在src/store/index.js中（請(qǐng)手動(dòng)新建）】
import Vue from 'vue'
import Vuex from 'vuex'
// 1. 在srcstoreindex.js中聲明使用vuex
Vue.use(Vuex)
// 2.新建一個(gè)store,用來(lái)存儲(chǔ)數(shù)據(jù)
export default new Vuex.Store({
state: { // store里面的state用來(lái)存儲(chǔ)數(shù)據(jù)，數(shù)據(jù)以鍵值對(duì)形式存儲(chǔ)
global_info: 'global_info_msg'
}
})3.在根實(shí)例中使用store:
上面創(chuàng)建store的時(shí)候存儲(chǔ)了一個(gè)數(shù)據(jù)進(jìn)去，下面講一下怎么操作這個(gè)數(shù)據(jù)。
【由于在根實(shí)例中使用了store，所以所有的子實(shí)例都會(huì)有store，我們可以使用this.$store.state.數(shù)據(jù)名來(lái)獲取數(shù)據(jù)】
改變store中的數(shù)據(jù)有兩種方法，一種是actions->mutations->state;一種是mutations->state。
1.通過(guò)actions來(lái)改變數(shù)據(jù)：
首先派發(fā)action給actions，使用this.$store.dispatch(action名,參數(shù))來(lái)派發(fā)action【派發(fā)action給actions之后，actions會(huì)調(diào)用action來(lái)處理數(shù)據(jù)】
定義action如何處理數(shù)據(jù)，然后使用commit(mutation名, 參數(shù))把數(shù)據(jù)提交給mutations：
定義mutation修改哪個(gè)數(shù)據(jù)，利用賦值表達(dá)式賦值：
上面的修改數(shù)據(jù)的操作遵循了下圖的順序：
2.除了一步步來(lái)修改數(shù)據(jù)，還可以直接通過(guò)mutations來(lái)改變數(shù)據(jù)：this.$store.commit(mutation名,參數(shù))，這時(shí)候我們只需要定義一個(gè)mutations即可。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1257.html
摘要：比如把示例中的數(shù)據(jù)在頁(yè)面中用顯示出來(lái)與輸入框的數(shù)據(jù)綁定表單輸入框有這個(gè)值，在表單輸入框里使用會(huì)把表單輸入框與實(shí)例的數(shù)據(jù)進(jìn)行智能綁定為什么說(shuō)智能，因?yàn)橛行┹斎肟虻臄?shù)據(jù)是屬性，有些不是。目錄上篇內(nèi)容回顧：數(shù)據(jù)綁定表單輸入框綁定單行文本輸入框多行文本輸入框復(fù)選框checkbox單選框radio選擇框select數(shù)據(jù)綁定的修飾符.lazy.number.trim樣式綁定class綁定對(duì)象語(yǔ)法：數(shù)組語(yǔ)...
摘要：如果我們作為一個(gè)后端開(kāi)發(fā)者想掌握一個(gè)前端框架，是一個(gè)好選擇，因?yàn)樗銐虻囊讓W(xué)。是語(yǔ)言的下一代標(biāo)準(zhǔn)。數(shù)據(jù)方法生命周期鉤子函數(shù)其他有些內(nèi)容比較重要，留到后面講定義數(shù)據(jù)定義數(shù)據(jù)定義了數(shù)據(jù)，那么就可以在管理的區(qū)域中使用的獲取數(shù)據(jù)的語(yǔ)法來(lái)獲取數(shù)據(jù)。目錄 前言： iview組件庫(kù)示例 element組件庫(kù)示例 ...
摘要：由服務(wù)器提供的響應(yīng)來(lái)自服務(wù)器響應(yīng)的狀態(tài)碼來(lái)自服務(wù)器響應(yīng)的狀態(tài)信息服務(wù)器響應(yīng)的頭是為請(qǐng)求提供的配置信息所以請(qǐng)求返回后，我們可以通過(guò)來(lái)獲取響應(yīng)情況。攔截器攔截器攔截器用于攔截發(fā)起的請(qǐng)求或用于攔截返回的響應(yīng)。目錄 上節(jié)內(nèi)容回顧 使用第三方組件庫(kù) 如何發(fā)起請(qǐng)求 請(qǐng)求錯(cuò)誤處理 請(qǐng)求帶參 ...
閱讀 847·2023-04-25 19:43
閱讀 4120·2021-11-30 14:52
閱讀 3930·2021-11-30 14:52
閱讀 4027·2021-11-29 11:00
閱讀 3922·2021-11-29 11:00
閱讀 4039·2021-11-29 11:00
閱讀 3770·2021-11-29 11:00
閱讀 6609·2021-11-29 11:00
