vue基礎(chǔ)入門學(xué)習(xí)文檔

前言看了無數(shù)篇阮一峰、廖雪峰大牛們的博客，也想嘗試著寫一篇像他們一樣通俗易懂的Vue入門的文章。當(dāng)然本人也是入門小白一個，關(guān)于高深層次的技術(shù)性東西自己也不是參悟的很透徹。不過倒是可以與大家一起分享一下自己踩坑以及關(guān)于Vue必學(xué)的一些最基礎(chǔ)方面的知識。Vue作為目前前端開發(fā)中三大框架之一，是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。Vue.js是一個JavaScriptMVVM庫，是一套構(gòu)建用戶界面的漸進(jìn)式框架。它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的，采用自底向上增量開發(fā)的設(shè)計(jì)。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js；同時比起React+Redux相對復(fù)雜的架構(gòu)，Vue.js更加輕量級也更加容易上手，是初創(chuàng)項(xiàng)目的首選前端框架。Vue的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。并且作者是華人的關(guān)系，Vue擁有著對華人開發(fā)者最友好的api文檔和官方教程。一、安裝對于沒有接觸過es6和webpack的同學(xué)來說，不建議直接用官方的腳手架vue-cli構(gòu)建項(xiàng)目，直接引用<scriptsrc="/npm/vue/dist/vue.js"></script>即可。通過webpack來構(gòu)建項(xiàng)目步驟如下：.安裝Node，下載地址：/en/或者/.安裝vue-cli，終端輸入：npminstallvue-cli-g.初始化項(xiàng)目（即構(gòu)建項(xiàng)目），vueinitwebpackvue-test,后面名字（vue-test）是本次項(xiàng)目的名字。.根據(jù)終端提示逐步往下進(jìn)行。當(dāng)進(jìn)行到是否要安裝vue-router時，點(diǎn)擊Y，因?yàn)楹竺嬉茫霈F(xiàn)是否語法檢測（UseESLinttolineyourcode?）我們點(diǎn)擊N。這個很棘手，因?yàn)檎Z法檢測非常嚴(yán)格，有時候甚至你多寫或者在符號前加空格，他都會報(bào)錯?？招幸彩侨绱耍救司捅凰勰ミ^，甚至最后直接重新開始構(gòu)建一個新的項(xiàng)目。.其余的命令為：“是否安裝單元測試工具”以及“是否需要端到端測試工具”，依據(jù)個人情況而定選擇是否安裝。.到此步，一個項(xiàng)目便安裝完成了。進(jìn)入項(xiàng)目cdvue-test,安裝依賴npminstall,一般系統(tǒng)會自動幫你安裝好了依賴，這里可以選擇不用執(zhí)行此命令。.開啟本地服務(wù)npmrundev,在http://localhost：8080中看到vue的一個介紹就表明整個項(xiàng)目構(gòu)建成功。二、起步聲明式渲染老樣子，先來一個HelloWorld，在src/component新建一個test.vue。HelloWorld.vue是構(gòu)建項(xiàng)目完成之后自帶的頁面,如果不再需要它可以將其刪除,若要讓test.vue顯示出來必須要在router.js中修改他的路由。importTestfrom'../coniponents/testVue,use(Router)exportdefaultnewRouter({Iroutes:[{path:1/'jname:'test1ycomponent:Test?}現(xiàn)在開始寫代碼，回歸test.vue,在下列方法中寫入vue自帶的data方法，此方法類似于react的state,用于儲存一些變量的信息、狀態(tài)。隨后通過{{xxx}}的方式渲染在頁面上。Vue的數(shù)據(jù)和DOM已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的<template><hl>{{message}<script>exportdefault(name:T,testfdm。{return(message:'H^llcWorld本人用的是WebStrome2017-3.5,這一版本中新增了vue文件的創(chuàng)建。親測只有從這個版本開始才可以直接創(chuàng)建.vue的文件，當(dāng)然，別的版本可以直接下載插件包也可以使用。.vue文件的好處就是自動幫你把組件的格式寫好，你只需在里面直接寫html的代碼，或者js代碼就好了。事件Vue的命令語句中有一個v-on的方法，他正是用來綁定事件的。以點(diǎn)擊事件為例?！癅”可以替換v-on命令，如："@click二“xxx"”<div><hl>當(dāng)前己點(diǎn)島{{count}}<t>Littoriv0nicLi.elc^,\ciiiit+=ib,>eiLek</button></div></teiFiplate><scriptsfeKportdefault{name:"test",d^ta(>{return(count;9當(dāng)然，也可以通過函數(shù)來觸發(fā)點(diǎn)擊事件，vue將所有的函數(shù)放在methods中，這就意味著我們要在此方法中寫所有的事件函數(shù)<div>dhl'i芋izru"'?{{isTru匕}}￡/hl><bnttonvon:clicks'change'>click</button></div></template>g「ipCdepartdefault{lame:dataC){return(IsTriie:true}Lmethods:{charige:function(){this,islrue=Ithis.isirue)條件與循環(huán)條件判斷通過v-if，v-else，v-else-if等命令來控制。可以把函數(shù)直接寫在標(biāo)簽里，這樣會方便很多<tenpl3te>?liv><divv-if="type=="A",>A<fdiv><divv-else-if="Ftype==="B',F>&</div></div></tempiate><5tript>exportdefault{name;"test"^d總{return(type:'A'注意，v-else-if、v-else必須緊跟在v-if的元素之后，不然不會被識別。循環(huán)使用v-for命令，它會把一個數(shù)組對應(yīng)為一組元素，類似于React-Native中Flatlist組件的renderItem方法，當(dāng)然這一切都類似原生JavaScript的map()方法。個人認(rèn)為v-for是最方便獲取并渲染一組數(shù)據(jù)的方法。<divv-far=<1itemsin￡h2>Jf號為二Ritemmijm}卜內(nèi)容為:{(items.pj)</h2></div>w/di"</tQ(nplate><5-Gript>exportdefault{'tes-t"jg皿)(return{ite-mi[{num:ijOts-g:bfirstitem'}>{num:?,msg;'seconditem'},.{rtkiui：3>msg:hthirdItem'},]表單輸入綁定表單輸入綁定用v-model命令，v-model雖然很像雙向數(shù)據(jù)綁定的Angular,但是vue是單數(shù)據(jù)流，v-model只是語法糖。<tejnplate><div><input8holdd‘戰(zhàn)輸入力[)帖A的內(nèi)容是：k{m「:</div></tenpUte5<$cript>exportdefault(ndine:''test",return(message:''父組件傳值與React.js相似，Vue子父組件之間傳值也是通過props,包括組件之間的通信也是一樣的。首先我們在父組件上引用子組件，并將其寫入容器內(nèi)。<childreni:messag6=rin?<5cript>士叩"tChildrenlfrom(,/children!"exportdefault{componerts:[匚kilMgrrl>>namesdata(){return{巾健ssmge;'h?1loworld'隨后，我們在子組件上面通過props方法來接收父組件傳過來的參數(shù)，接收后便可以直接在頁面上渲染。從裝我件生過來的『"占({me￡sage}}</hi></template><5-(ript>exportdefault{nai!^:"children*\dataO{廣由七uM{1bpraps:[*messae^']}<i/s(!TLpt>父組件可以傳多個值，不同的父組件也可以傳若干的值，因?yàn)閜rops是一個數(shù)組，我們接收的值以數(shù)組的形式放入即可。三、vue-router如果按照之前webpack的方法構(gòu)建出來的項(xiàng)目，我們就不必再次安裝vue-router,因?yàn)樗呀?jīng)為我們一套打包安裝好了。進(jìn)入router文件夾中的index.js，我們需要做的就是兩件事：引入需要跳轉(zhuǎn)路由的組件；在routes方法里添加該路由的路徑、名字及組件importTestfrom1../cojnpcncnts/test1importAnotherfrom'../components/anothervue,iJS￡(Router)exportdefaultnewRouter({routess[(path：,/：name:'te5t'component;Testl]，?{path;■曲notMr'dn^[a>G：'another'jcompofient:AnotherI)1})隨后我們只需要通過vue自帶的標(biāo)簽<router-link>,它相當(dāng)于a標(biāo)簽，是一個鏈接。里面的tab屬性是可以控制router-link的類型，這里我們選擇了讓他變成一個按鈕。<div><router-1inkto=,r/anather"tag=,1buIton">gatoanotherPage</router-1ink></div>c/template>嵌套路由嵌套路由，顧名思義就是路由的多層嵌套。主要寫法在于：把子路由的路徑寫在你需要嵌套的路由里的children方法中。path:1/another1name:1another'component:Another,children:[{path:1child]r-component:Child1)3{path:1child2'>component:ChiId2}j]}在父路由中，通過<router-link>引用即可，注意路徑要寫全，否則不會成功跳轉(zhuǎn)到相應(yīng)的子頁面。<router-view>里面會自動接收來自子路由里的內(nèi)容。<template><div>小2》首頁4外2)<router-linkto=M/another/childl1D>childl</router-link><router-link.to="/anothen/child2,'>child2</router-link><div>crouter-view/></diV></dlv>動態(tài)路由動態(tài)路由運(yùn)用的場景有很多。比如像是網(wǎng)上商城，根據(jù)不同的id顯示出不同的商品。頁面布局是同一個，路徑分別是不同商品的路徑。用法很簡單，首先注冊路由的時候只需要在后面加“:id”。這地方，：id是自己取的，當(dāng)然可以選擇使用別的字符，功能還是可以照樣實(shí)現(xiàn)。patIn1/another/1id*,name:ranotherF,component:Another3在需要跳轉(zhuǎn)的地方，寫上完整的路由即可。<template><router-linkto='7anQther/child3,T>child3</rQirter-lirik></div>路由傳值及函數(shù)路由路由可以用函數(shù)的方式進(jìn)行跳轉(zhuǎn)。在函數(shù)中用this.$router.push(‘/’)即可實(shí)現(xiàn)此功能<template><div>《buttonlijk-”goChild3">gQtoChild3</buttc?n><div><router-view/></div>^/div><script>exportdefault{name:"test'1,methods:{go■匚hildm：function(){this.Srouter,pusfi(R/another/child3*)I})}</script>路由傳參分為標(biāo)簽傳參，和函數(shù)傳參。顧名思義，標(biāo)簽傳值就是把參數(shù)連帶路由直接寫在標(biāo)簽里。<router-link：10="(^111^：20^^pyrans:{k電y：value}}">valueStrir>g</router-link>下面的便是函數(shù)傳參。注意：name為router.js中所定義的名字，而且必須要寫在上面。否則路由雖然能跳轉(zhuǎn)過去，但是值會獲取不到methods:{gdAhOthei':function(){this,irouter,.pushfipath:1another'tnam^:1another".messagf?:"helloworld}力)跳轉(zhuǎn)過后頁面接收值<hi>{{thist$rautefparams.message四、VuexVuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。安裝普通html頁面直接引用*scriptsrc=/patti/ta/T/ue,js?<.script*<scriptsre-/path/to/vuex.jsscriptsNpmnprninstallvuex'--save在需要用到的頁面引用即可importVue-from-hub"importVuexfron'vuexVue.use:Vuex新建一個store.js,引用vueximportVuefrom1vue,importVuexfrom*vuex'Vue,use(Vuex);coj^stStore=newUU總乂?state:{count:e卜mutations:{addcount(state){state.count+t)hactions:[addcount(fcommit}){commit('addC^unt')))>)；exportdef^iwltstore這個便是Vuex最基本的一個結(jié)構(gòu)，Vuex使用單一狀態(tài)樹，用一個對象就包含了全部的應(yīng)用層級狀態(tài)。至此它便作為一個“唯一數(shù)據(jù)源（SSOT）”而存在。這也意味著，每個應(yīng)用將僅僅包含一個store實(shí)例。State中存放的是初始的狀態(tài)值，可以從這里定義一個初始的值，也可以從頁面中傳值過來，如果獲取傳過來的值則需要在mutations中獲取。mutations中放置的是一系列改變狀態(tài)的函數(shù)。更改Vuex的store中的狀態(tài)的唯一方法是提交mutation。Vuex中的mutation非常類似于事件：每個mutation都有一個字符串的事件類型（type）和一個回調(diào)函數(shù)（handler）。這個回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會接受state作為第一個參數(shù)。actions類似于mutation，不同在于：Action提交的是mutation，而不是直接變更狀態(tài)，Action可以包含任意異步操作。在頁面中顯示：importVue-From'vue1imp