Vue獲取元素

Vue1.*版本中

<div class="box" v-el:myBox>你好</div>

將你好字型顏色設定為紅色：this.$els.my-box.style.color=”red”

Vue2.*版本中

<div class="box" ref="myBox">你好</div>

將字型設定為紅色：this.$refs.myBox.style.color = ‘red’

獲取當前元素

var el = e.target;//當前元素 可修改（可用此方法獲取到其子元素）
var el = e.currentTarget;//當前元素 ，不可修改，無法獲取其子元素
 

jquery

還可以使用jquery獲取元素，但不推薦

自定義事件

Vue例項實現了一個自定義事件介面，用於在元件樹中通訊，這個事件系統獨立於原生DOM事件。

• 使用 $on() 監聽事件
• 使用 $emit()在它上面觸發事件
• 使用 $dispatch()派發事件事件沿著父鏈冒泡
• 使用 $broadcast() 廣播事件，事件向下傳導給所有的後代。

Slot 內容分發

內容分發在父元件使用子元件時可以在子元件中插入內容，在子元件中使用<slot></slot>標籤，父元件中加入的內容會被分發到<slot></slot>

動態元件

多個元件可以使用同一個掛載點，然後動態地在它們之間切換。使用保留的<component>，動態地繫結到它的is特性：

<component :is="currentView">
    <!-- 元件在該部分切換-->
</component>

如果把切換出去的元件保留在記憶體中，可以保留它的狀態或避免重新渲染。可以使用keep-alive標籤

編寫可複用元件

Vue.js元件API來自三部分：prop,事件和slot

• prop允許外部環境傳遞資料給元件；
• 事件允許元件觸發外部環境的action
• slot允許外部環境插入到內容到元件的檢視結構內