點擊子元素觸發(fā)父元素
<div class="fu" @click="fu()">
????<a class="zi" @click="zi()">點擊</a>
? ? <h1>這是父元素里面的其他內(nèi)容</h1>
</div>
methods:{
????fu(){
? ? ? ? console.log('這是父元素‘);
????},
? ? zi(){
? ? ? ? console.log('這是子元素');
????}
}
如果像上面這么寫的話衣盾，點擊父元素，會輸出父元素內(nèi)容 犀勒，但是點擊子元素摔笤，，父元素和子元素的內(nèi)容都會輸出
這個可以聯(lián)想到j(luò)s中preventDefault和stopPropagation兩個方法的區(qū)別
前者就是阻止默認行為蛤高，比如說a鏈接里面的href屬性寫了地址蚣旱，那么你點擊 就會進入一個新頁面，戴陡，如果你寫了?e.preventDefault(); 或者window.event.returnValue = false; 那么你點擊a就不會跳到一個新的頁面了塞绿，后者就是陰止冒泡。當(dāng)一個元素上的事件被觸發(fā)的時候恤批，比如說鼠標點擊了一個按鈕异吻，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡喜庞。以上是js相關(guān)的用法诀浪。
回歸正題棋返，vue提供了一個方法? @click.stop = "zi()"
.stop?阻止事件繼續(xù)傳播
Vue.js 為?v-on?提供兩個?事件修飾符：.prevent?與?.stop
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop=""></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent=""></form>
<!-- 修飾符是可以串聯(lián)的 -->
<a v-on:click.stop.prevent="">
在這兒鏈接一篇寫得比較全的文章中的內(nèi)容
1. v-text
v-text主要用來更新textContent，可以等同于JS的text屬性笋妥。
這兩者等價：
{{msg}}
2. v-html
雙大括號的方式會將數(shù)據(jù)解釋為純文本懊昨，而非HTML。為了輸出真正的HTML春宣，可以用v-html指令酵颁。它等同于JS的innerHtml屬性。
這個div的內(nèi)容將會替換成屬性值rawHtml月帝，直接作為HTML進行渲染躏惋。
3. v-pre
v-pre主要用來跳過這個元素和它的子元素編譯過程∪赂ǎ可以用來顯示原始的Mustache標簽簿姨。跳過大量沒有指令的節(jié)點加快編譯。
{{message}}//這條語句不進行編譯{{message}}
最終僅顯示第二個span的內(nèi)容
4. v-cloak
這個指令是用來保持在元素上直到關(guān)聯(lián)實例結(jié)束時進行編譯簸搞。
在頁面加載時會閃爍扁位，先顯示:
然后才會編譯為：
5. v-once
v-once關(guān)聯(lián)的實例，只會渲染一次趁俊。之后的重新渲染域仇，實例極其所有的子節(jié)點將被視為靜態(tài)內(nèi)容跳過，這可以用于優(yōu)化更新性能寺擂。
This will never change:{{msg}}//單個元素//有子元素
comment
{{msg}}
//組件- {{i}}
上面的例子中暇务，msg,list即使產(chǎn)生改變，也不會重新渲染怔软。
6. v-if
v-if可以實現(xiàn)條件渲染垦细，Vue會根據(jù)表達式的值的真假條件來渲染元素。
yes
如果屬性值ok為true挡逼，則顯示括改。否則，不會渲染這個元素家坎。
7. v-else
v-else是搭配v-if使用的嘱能，它必須緊跟在v-if或者v-else-if后面，否則不起作用乘盖。
yesNo
8. v-else-if
v-else-if充當(dāng)v-if的else-if塊，可以鏈式的使用多次憔涉《┛颍可以更加方便的實現(xiàn)switch語句。
ABCNot A,B,C
9. v-show
hello world
也是用于根據(jù)條件展示元素兜叨。和v-if不同的是穿扳，如果v-if的值是false衩侥，則這個元素被銷毀，不在dom中矛物。但是v-show的元素會始終被渲染并保存在dom中茫死，它只是簡單的切換css的dispaly屬性。
注意：v-if有更高的切換開銷
v-show有更高的初始渲染開銷履羞。
因此峦萎，如果要非常頻繁的切換，則使用v-show較好忆首；如果在運行時條件不太可能改變爱榔，則v-if較好
10. v-for
用v-for指令根據(jù)遍歷數(shù)組來進行渲染
有下面兩種遍歷形式
//使用in，index是一個可選參數(shù)糙及，表示當(dāng)前項的索引//使用of下面是一個例子详幽，并且在v-for中，擁有對父作用域?qū)傩缘耐耆L問權(quán)限浸锨。
{{parent}}-{{item.text}}varexample =newVue({? ? ? el:'#app',? ? ? data:{? ? ? ? parent:'父作用域'items:[? ? ? ? ? {text:'文本1'},? ? ? ? ? {text:'文本2'}? ? ? ? ]? ? ? }? ? })
會被渲染為：
注意：當(dāng)v-for和v-if同處于一個節(jié)點時唇聘，v-for的優(yōu)先級比v-if更高。這意味著v-if將運行在每個v-for循環(huán)中
11. v-bind
v-bind用來動態(tài)的綁定一個或者多個特性柱搜。沒有參數(shù)時迟郎，可以綁定到一個包含鍵值對的對象。常用于動態(tài)綁定class和style冯凹。以及href等谎亩。
簡寫為一個冒號【：】
<1>對象語法：
//進行類切換的例子<!--當(dāng)data里面定義的isActive等于true時，is-active這個類才會被添加起作用--><!--當(dāng)data里面定義的hasError等于true時宇姚，text-danger這個類才會被添加起作用-->varapp =newVue({? ? ? ? el:'#app',? ? ? ? data: {? ? ? ? ? ? isActive:true,? ? ? ? ? ? ? hasError:false}? ? })
渲染結(jié)果：
<!--因為hasError: false匈庭，所以text-danger不被渲染-->
<2>數(shù)組語法
<!--數(shù)組語法：errorClass在data對應(yīng)的類一定會添加--><!--is-active是對象語法，根據(jù)activeClass對應(yīng)的取值決定是否添加-->12345varapp =newVue({? ? ? ? el:'#app',? ? ? ? data: {? ? ? ? ? ? activeClass:false,? ? ? ? ? ? errorClass:'text-danger'}? ? })
渲染結(jié)果：
<!--因為activeClass: false浑劳，所以is-active不被渲染-->
<3>直接綁定數(shù)據(jù)對象
<!--在vue實例的data中定義了classObject對象阱持，這個對象里面是所有類名及其真值--><!--當(dāng)里面的類的值是true時會被渲染-->12345varapp =newVue({? ? ? ? el:'#app',? ? ? ? data: {? ? ? ? ? ? classObject:{'is-active':false,'text-danger':true}? ? ? ? ? ? ? ? ? }? ? })
渲染結(jié)果：
<!--因為'is-active': false，所以is-active不被渲染-->
12. v-model
這個指令用于在表單上創(chuàng)建雙向數(shù)據(jù)綁定魔熏。
v-model會忽略所有表單元素的value衷咽、checked、selected特性的初始值蒜绽。因為它選擇Vue實例數(shù)據(jù)做為具體的值镶骗。
hello {{somebody}}
varapp =newVue({? ? ? ? el:'#app',? ? ? ? data: {? ? ? ? ? ? somebody:'小明'}? ? })這個例子中直接在瀏覽器input中輸入別的名字，下面的p的內(nèi)容會直接跟著變躲雅。這就是雙向數(shù)據(jù)綁定鼎姊。
v-model修飾符
<1>? .lazy
默認情況下，v-model同步輸入框的值和數(shù)據(jù)∠嗫埽可以通過這個修飾符慰于，轉(zhuǎn)變?yōu)樵赾hange事件再同步。
<2>? .number
自動將用戶的輸入值轉(zhuǎn)化為數(shù)值類型
<3>? .trim
自動過濾用戶輸入的首尾空格
13. v-on
v-on主要用來監(jiān)聽dom事件唤衫，以便執(zhí)行一些代碼塊婆赠。表達式可以是一個方法名。
簡寫為：【@】
varapp =newVue({el:'#app',methods:{consoleLog:function(event){console.log(1)? ? ? ? ? ? }? ? ? ? }? ? })
事件修飾符
.stop阻止事件繼續(xù)傳播
.prevent事件不再重載頁面
.capture使用事件捕獲模式,即元素自身觸發(fā)的事件先在此處處理佳励，然后才交由內(nèi)部元素進行處理
.self只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù)
.once事件將只會觸發(fā)一次
.passive告訴瀏覽器你不想阻止事件的默認行為
<!-- 阻止單擊事件繼續(xù)傳播 --><!-- 提交事件不再重載頁面 --><!-- 修飾符可以串聯(lián) --><!-- 只有修飾符 --><!-- 添加事件監(jiān)聽器時使用事件捕獲模式 --><!-- 即元素自身觸發(fā)的事件先在此處處理休里，然后才交由內(nèi)部元素進行處理 -->...<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) --><!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->...<!-- 點擊事件將只會觸發(fā)一次 --><!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) --><!-- 而不會等待 `onScroll` 完成? --><!-- 這其中包含 `event.preventDefault()` 的情況 -->...
使用修飾符時，順序很重要植兰；相應(yīng)的代碼會以同樣的順序產(chǎn)生份帐。因此，用v-on:click.prevent.self會阻止所有的點擊楣导，而v-on:click.self.prevent只會阻止對元素自身的點擊废境。
作者：klmhly
鏈接：http://www.reibang.com/p/c4a87e1b4ef7
來源：簡書
