漸進式代表的含義是:沒有多做職責(zé)之外的事德绿。
vue.js只提供了vue-cli生態(tài)中最核心的組件系統(tǒng)和雙向數(shù)據(jù)綁定。
就好像 vuex、vue-router都屬于圍繞vue.js開發(fā)的庫占锯。
使用Angular,必須接受以下東西:
1缩筛、必須使用它的模塊機制
2消略、必須使用它的依賴注入
3、必須使用它的特殊形式定義組件(這一點每個視圖框架都有瞎抛,這是難以避免的)
所以Angular是帶有比較強的排它性的艺演,如果你的應(yīng)用不是從頭開始,而是要不斷考慮是否跟其他東西集成,這些主張會帶來一些困擾胎撤。
使用React晓殊,你必須理解:
1、函數(shù)式編程的理念
2哩照、需要知道它的副作用
3挺物、什么是純函數(shù)
4、如何隔離飘弧、避免副作用
5识藤、它的侵入性看似沒有Angular那么強,主要因為它是屬于軟性侵入的
Vue與React次伶、Angular的不同是痴昧,但它是漸進的:
1、可以在原有的大系統(tǒng)的上面冠王,把一兩個組件改用它實現(xiàn)赶撰,就是當(dāng)成jQuery來使用
2、可以整個用它全家桶開發(fā)柱彻,當(dāng)Angular來使用
3豪娜、可以用它的視圖,搭配你自己設(shè)計的整個下層使用
4哟楷、可以在底層數(shù)據(jù)邏輯的地方用OO和設(shè)計模式的那套理念
5瘤载、可以函數(shù)式,它只是個輕量視圖而已卖擅,只做了最核心的東西
Vue幾種常用的指令:
1鸣奔、v-if:根據(jù)表達(dá)式的值的真假條件渲染元素。在切換時元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建惩阶。
2挎狸、v-show:根據(jù)表達(dá)式之真假值,切換元素的 display CSS 屬性断楷。
3锨匆、v-for:循環(huán)指令,基于一個數(shù)組或者對象渲染一個列表冬筒,vue 2.0以上必須需配合 key值 使用统刮。
4、v-bind:動態(tài)地綁定一個或多個特性账千,或一個組件 prop 到表達(dá)式侥蒙。
5、v-on:用于監(jiān)聽指定元素的DOM事件匀奏,比如點擊事件鞭衩。綁定事件監(jiān)聽器。
6、v-model:實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定
7论衍、v-pre:跳過這個元素和它的子元素的編譯過程瑞佩。可以用來顯示原始 Mustache 標(biāo)簽坯台。跳過大量沒有指令的節(jié)點會加快編譯炬丸。
8、v-once:只渲染元素和組件一次蜒蕾。隨后的重新渲染稠炬,元素/組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能咪啡。
Vue常用的修飾符:
v-on?指令常用修飾符:
1首启、.stop -調(diào)用 event.stopPropagation(),禁止事件冒泡撤摸。
2毅桃、.prevent -調(diào)用 event.preventDefault(),阻止事件默認(rèn)行為准夷。
3钥飞、.capture -添加事件偵聽器時使用 capture 模式。
4衫嵌、.self -只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)读宙。
5、.{keyCode | keyAlias} -只當(dāng)事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)渐扮。
6、.native -監(jiān)聽組件根元素的原生事件掖棉。
7墓律、.once -只觸發(fā)一次回調(diào)。
8幔亥、.left - (2.2.0)只當(dāng)點擊鼠標(biāo)左鍵時觸發(fā)耻讽。
9、.right - (2.2.0)只當(dāng)點擊鼠標(biāo)右鍵時觸發(fā)帕棉。
10针肥、.middle - (2.2.0)只當(dāng)點擊鼠標(biāo)中鍵時觸發(fā)。
11香伴、.passive - (2.3.0)以 { passive: true } 模式添加偵聽器
(注意N空怼)如果是在自己封裝的組件或者是使用一些第三方的UI庫時,會發(fā)現(xiàn)并不起效果即纲,這時就需要用其他的了
.native修飾符了具帮,如:
//使用示例:
<el-input
??v-model="inputName"
placeholder="搜索你的文件"
??@keyup.enter.native="searchFile(params)"
??>
</el-input>
v-bind指令常用修飾符:
1、.prop -被用于綁定 DOM 屬性 (property)。(差別在哪里蜂厅?)
2匪凡、.camel - (2.1.0+)將 kebab-case 特性名轉(zhuǎn)換為 camelCase. (從 2.1.0 開始支持)
3、.sync (2.3.0+)語法糖掘猿,會擴展成一個更新父組件綁定值的 v-on 偵聽器病游。
v-model指令常用修飾符:
1、.lazy -取代 input 監(jiān)聽 change 事件
2稠通、.number -輸入字符串轉(zhuǎn)為數(shù)字
3衬衬、.trim -輸入首尾空格過濾
而且v-on可以監(jiān)聽多個方法,例如:
<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />
但是同一種事件類型的方法采记,只會響應(yīng)第一個佣耐,例如:
<a href="javascript:;" @click="methodsOne" @click="methodsTwo"></a>
只會響應(yīng)methodsOne方法