vue(vue怎么學(xué))

1.vue怎么學(xué)

如果你是 Vue 開發(fā)新手，可能已經(jīng)聽過很多行話術(shù)語，比如單頁面應(yīng)用程序、異步組件、服務(wù)器端渲染，等等。

你可能還聽說過與 Vue 有關(guān)的一些工具和庫(kù)，比如 Vuex、Webpack、Vue CLI 和 Nuxt。 浸沒在術(shù)語和工具的浩瀚海洋中難免會(huì)令人感到沮喪，但其實(shí)并不是只有你一個(gè)人有這種感受，所有經(jīng)驗(yàn)水平的開發(fā)人員都會(huì)持續(xù)感覺到這種莫名的壓力。

分享一張圖給你看看基礎(chǔ)知識(shí)：vue的生命周期： beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、beforeDestory/destoryedvue常用指令： v-for、v-bind（縮寫形式 ：prop）、v-on（縮寫形式 @click='sss'）、v-if/v-else/v-else-if、v-model、v-once、v-html、v-show。vue自定義組件： Vue.component('componentName',{ props:['p1','p2'], template: '{{ p1 }}'})vue常用實(shí)例方法和屬性： data/$data、methods/$methods、$el、computed（計(jì)算屬性）、$watch、$set、$event、$emit。

如果需要更新的屬性需要緩存，則使用計(jì)算屬性的方式，否則可以使用 methods里的方法來更新屬性（ methods里的方法每次重新渲染都會(huì)執(zhí)行）計(jì)算屬性默認(rèn)提供了 getter，你還可以給它設(shè)置 setter當(dāng)你數(shù)據(jù)變化是異步或者開銷較大時(shí)，可以使用 watch偵聽器來響應(yīng)數(shù)據(jù)的變化v-bind:class的值可以是一個(gè)對(duì)象，可實(shí)現(xiàn)類似 react中 classnames模塊的功能自定義組件上的 class會(huì)被渲染拼接到 template的根節(jié)點(diǎn)的 class屬性上（自定義組件上可使用 v-bind:class來做class的判斷顯示邏輯）v-bind:style可以用來綁定內(nèi)聯(lián)樣式，這個(gè)內(nèi)聯(lián)樣式的值可以由一個(gè)對(duì)象來定義（類似css in js的模式），且可以被定義為數(shù)組（多個(gè)樣式對(duì)象）v-bind:style可以使用多重值的形式： v-if/v-else/v-else-if的時(shí)候，可以用key來管理可復(fù)用的元素v-if是'真正'的渲染，它會(huì)確保在切換條件過程中條件塊內(nèi)的元素的事件監(jiān)聽器和子組件適時(shí)的銷毀和重建v-if是惰性的，初始為假，什么也不做，直到為真的時(shí)候才渲染元素v-show總是渲染元素，只是簡(jiǎn)單的進(jìn)行切換v-if的切換開銷大， v-show則是初始渲染開銷大，頻繁切換使用 v-show，運(yùn)行時(shí)經(jīng)常改變則使用 v-ifv-if和 v-for一起使用時(shí)， v-for的優(yōu)先級(jí)更高v-for可遍歷數(shù)組，第二個(gè)參數(shù)是索引v-for可遍歷對(duì)象，第二個(gè)參數(shù)是 key，第三個(gè)參數(shù)是索引v-for和 搭配可減少渲染次數(shù)v-for和自定義組件使用時(shí)，需要使用 props來傳遞值盡可能的為遍歷子元素加上 key，獲得渲染優(yōu)化數(shù)組變異方法： push/pop/unshift/shift/splice/sort/reverse改變?cè)紨?shù)組數(shù)組非變異方法： filter/concat/slice 不改變?cè)紨?shù)組，總是返回新數(shù)組Vue不能檢測(cè)到數(shù)組索引賦值（使用 vm.$set解決）和修改 length長(zhǎng)度賦值（使用 splice解決）的情況Vue不能檢測(cè)對(duì)象屬性的添加和刪除（使用 vm.$set或 Object.assign）is=“todo-item”這種屬性的寫法比較適合DOM模板事件修飾符，它們可串聯(lián)使用： .stop、.prevent、.capture、.self、.once、.passive（尤其適合移動(dòng)端）.passive不用同時(shí)和 .prevent使用，后者會(huì)被忽略按鍵修飾符： .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right系統(tǒng)按鍵修飾符： .ctrl、.alt、.shift、.meta（?|?|◆）、.exact（允許精確控制系統(tǒng)修飾符組合鍵觸發(fā)）鼠標(biāo)修飾符： .left、.right、.middlev-model會(huì)忽略表單元素的 value、checked、selected，僅僅使用實(shí)例中的數(shù)據(jù)作為數(shù)據(jù)源表單事件修飾符： .lazy、.number、.trim組件是可復(fù)用的vue實(shí)例，具有vue實(shí)例大多數(shù)屬性和方法組件可復(fù)用，每個(gè)組件有獨(dú)立的空間組件上的data必須是一個(gè)函數(shù)，這樣做避免影響了其他組件通過 Vue.component（)全局注冊(cè)的組件可在其被注冊(cè)后的任何通過 newVue（)創(chuàng)建的實(shí)例所使用，包含其組件樹中的所有組件通過插槽 分發(fā)內(nèi)容（其實(shí)就是類似于react的children）動(dòng)態(tài)組件 配合屬性 is來實(shí)現(xiàn)解析DOM模板時(shí)需要注意下可能會(huì)有不生效的情況，需要使用is來傳遞組件。

2.Vue.js入門先學(xué)什么

Vue是一個(gè)全新的前臺(tái)頁面框架，所用的語言只限于HTML元素，CSS規(guī)則，Javascript代碼，對(duì)于一個(gè)新手，這就是所需要的所有東西，但是目前的頁面開發(fā)，不可避免的會(huì)用到一些有名的JS框架，例如Jquery,BootStrap，所以還是需要了解這些js框架的使用

Vue開發(fā)需要用到npm，這是nodejs的組件管理工具，但事實(shí)上不需要學(xué)習(xí)nodejs的內(nèi)容。

Vue需要用到的一些組件，例如webpack,vuex，都是一些組件或者是工具，不需要學(xué)習(xí)特別的語言，只要學(xué)習(xí)簡(jiǎn)單的調(diào)用就可以了