建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。
公司主營(yíng)業(yè)務(wù)：網(wǎng)站制作、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出嵩明免費(fèi)做網(wǎng)站回饋大家。
Vue 很早就支持 TypeScript，但配置起來(lái)比較麻煩，幸好有了 Vue CLI 3.0。安裝好 vue-cli 之后，使用 vue create 項(xiàng)目名稱(chēng) 來(lái)創(chuàng)建項(xiàng)目，vue 腳本手架自動(dòng)創(chuàng)建以項(xiàng)目名稱(chēng)命名的目錄。
vue-cli 3 生成的項(xiàng)目結(jié)構(gòu)比較科學(xué)，尤其是通過(guò) components 和views 將作為控件的組件和作為頁(yè)面的組件分離開(kāi)來(lái)，結(jié)構(gòu)更清晰?？梢岳斫鉃?views 中定義的組件是要配置在路由中的，而 componets 中定義的組件是被其它組件調(diào)用的。
HTML 需要定義一個(gè)
作為 Vue 應(yīng)用的容器，main.ts 中會(huì)通過(guò) new Vue(…) 生成應(yīng)用實(shí)例并將之與容器綁定。注意 HTML 中定義的
會(huì)被 App.vue 模板中定義的
…
替換掉。
Vue 是一個(gè)組件化的框架，組件是 Vue 的基本元素。一個(gè) Vue 應(yīng)用是由若干組件構(gòu)成的，組件與組件之間的嵌套或并列關(guān)系，最終可以用樹(shù)形來(lái)表示。main.ts 中創(chuàng)建的 Vue 實(shí)例是最頂層組件。
每個(gè) Vue 組件都有三個(gè)組成部分，即骨架（HTML）、樣式（CSS/LESS/SCSS）和腳本（JavaScript/TypeScript）?？梢栽谝粋€(gè) .vue 文件中寫(xiě)完三個(gè)部分，也可以將樣式和腳本部分分別寫(xiě)成獨(dú)立的文件。筆者推薦獨(dú)立文件的方式。
既然我們選用 TypeScript，使用上圖所示的 class-style 來(lái)實(shí)現(xiàn) Vue 組件更為適合。
除了 class-style 之外，也可以使用 config-style。配置風(fēng)格是最早支持的風(fēng)格，將 Vue 的各類(lèi)成員（屬性、數(shù)據(jù)、計(jì)算屬性、方法等）獨(dú)立定義，易于理解 Vue 實(shí)例的內(nèi)部結(jié)構(gòu)，但初學(xué)者容易搞不清楚 this 指向。
Vue 定義的組件需要注冊(cè)才能在其它組件中使用。注冊(cè)的方式分為全局和局部?jī)煞N。使用 TypeScript 和類(lèi)風(fēng)格開(kāi)發(fā) Vue 應(yīng)用時(shí)，推薦使用局部注冊(cè)。局部注冊(cè)比較符合模式化開(kāi)發(fā)思想。
Vue 可以通過(guò) {{ }} 語(yǔ)法在文本中插值。但是如果要將值插入屬性，則應(yīng)使用 : 號(hào)修飾屬性名。組件屬性（指 HTML 標(biāo)簽參數(shù)）可隨意定義，加 @Prop() 修飾即可，如果屬性是必須的，應(yīng)該使用 : 來(lái)定義；可選屬性則使用 !: 來(lái)定義。
在 HTML 或自定義組件標(biāo)簽中使用 @ 前綴的事件名，可以綁定事件處理函數(shù)。Vue 實(shí)現(xiàn)了部分 HTML 事件，比如 @click 可以直接綁定。組件也可以“定義”自己的事件，不需要提前聲明，只需要 this.$emit() 直接觸發(fā)即可。
Vue 本身是數(shù)據(jù)驅(qū)動(dòng)渲染，所以數(shù)據(jù)（包括屬性、計(jì)算屬性等）變化可以觸發(fā)界面數(shù)據(jù)呈現(xiàn)，但是界面的輸入要反饋給組件，就需要用觸發(fā)事件的方式來(lái)反饋。雙向綁定是用于更新屬性事件的語(yǔ)法糖，使用 :屬性名.sync=”…” 綁定。子組件中通過(guò)觸發(fā) update:屬性名 事件來(lái)更新父組件中綁定的數(shù)據(jù)。
路由主要用于組織視圖（頁(yè)面）關(guān)系。最基本的要求是為路由配置每個(gè)路徑對(duì)應(yīng)的組件。name 可以當(dāng)作路徑的簡(jiǎn)短別名。路由操作一般會(huì)使用注入到 Vue 實(shí)例中的 對(duì)象，常用router.push() 和$router.replace() 來(lái)跳轉(zhuǎn)，二者的區(qū)別在于對(duì) URL 歷史的影響（可以想像）
路由項(xiàng)配置中的 component 可以指定為導(dǎo)入的的組件類(lèi)，也可以指定一個(gè)異步（返回 Promise 的）函數(shù)，該函數(shù)動(dòng)態(tài)加載組件并返回包含該組件類(lèi)的 Promise 對(duì)象。上例中使用的 import() 動(dòng)態(tài)引入語(yǔ)法。
做一個(gè)簡(jiǎn)單的登錄界面加深對(duì)前面知識(shí)的理解和記憶。該示例特意避免了 Ajax 調(diào)用，以降低其復(fù)雜程度。
沒(méi)有 Ajax 實(shí)現(xiàn)的遠(yuǎn)程認(rèn)證，我們只能假設(shè)用戶(hù)輸入 pass 時(shí)為正確密碼。用戶(hù)名可任意輸入，如果驗(yàn)證成功則會(huì)顯示該用戶(hù)已登錄。
項(xiàng)目仍然是由 vue-cli 3 創(chuàng)建的。創(chuàng)建好之后去掉了 About 和 HelloWorld，加入了 Login，并將 Home 改造成三部分各自獨(dú)立的文件結(jié)構(gòu)。當(dāng)然，順便還按自己（或團(tuán)隊(duì)）的開(kāi)發(fā)規(guī)范調(diào)整了下 tslint.json 中的配置。
App.vue、main.ts 和 router.ts 可以算得上是一個(gè) Vue 應(yīng)用的入口和基本配置。App.vue 中直接把控制權(quán)交給了 vue-router。注意，import 的時(shí)候不能省略 .vue 擴(kuò)展名。
Login 組件中用到了雙向綁定，由于屬性（由 @Prop() 修飾）不可以在內(nèi)部修改，甚至可以把它聲明為 readonly（也許 Vue 3 會(huì)定義相關(guān)的規(guī)范）。注意到 keypress 事件有一個(gè)后綴，這在 Vue 中稱(chēng)為事件修飾符，可以用于快速處理一些特殊情況，比如 keypress.enter 表示Enter按下時(shí)。
在 Home 中使用 Login 組件時(shí)，Home 的 user 數(shù)據(jù)字段綁定到了 Login 的 user 屬性上，.sync 修飾符表示這是一個(gè)雙向綁定。前面 Login 的代碼中，如果登錄成功，Login 會(huì)通過(guò) $emit(“update:user”, {…}) 來(lái)通知綁定數(shù)據(jù)發(fā)生變化，Vue 框架接收到這個(gè)通知并更新了綁定的 Home.user，這會(huì)導(dǎo)致計(jì)算屬性 message 重算，并最終觸發(fā)呈現(xiàn)“某用戶(hù)已登錄”。
Vue 入門(mén)很簡(jiǎn)單吧！
不過(guò) Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應(yīng)用，仍然需要了解大量 Vue 設(shè)計(jì)概念和操作技巧。建議讀者們仔細(xì)閱讀 Vue 官方提供教程和 API 手冊(cè)，并保持在 Vue 相關(guān)技術(shù)社區(qū)的活躍度。
原碼下載：百度網(wǎng)盤(pán)
新聞名稱(chēng)：快速上手Vue.js
網(wǎng)站URL：http://www.5511xx.com/article/dpcdehi.html
