vue(vue怎么學)

1.vue怎么學

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

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

分享一張圖給你看看基礎(chǔ)知識：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常用實例方法和屬性： data/$data、methods/$methods、$el、computed（計算屬性）、$watch、$set、$event、$emit。

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

2.Vue.js入門先學什么

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

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

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