原文:Vue.js 源碼分析(十六) 指令篇 v-on指令詳解

可以用 v on 指令監聽 DOM 事件,並在觸發時運行一些 JavaScript 代碼,例如: 渲染結果為: 我們給測試按鈕添加了一個mouseenter和click事件,鼠標移上去式控制台輸出: 當點擊時,輸出為: Vue的事件綁定有很多種寫法,例如: 可以看到v on對應事件可以很多種格式的,可以是當前Vue實例的一個方法 一個表達式 一個函數,或者一個箭頭函數 源碼分析 writer by ...

2019-07-02 17:26 1 736 推薦指數:

查看詳情

Vue.js 源碼分析(十九) 指令 v-html和v-text指令詳解

雙大括號會將數據解釋為普通文本,而非 HTML 代碼。為了輸出真正的 HTML,你需要使用 v-html 指令,例如: 渲染結果為: <p>{{message}}</p>里的message被解釋為了普通文本,而不是輸出真正的 HTML,而<p ...

Fri Jul 05 17:44:00 CST 2019 0 781
Vue.js 源碼分析(十八) 指令 v-for 指令詳解

我們可以用 v-for 指令基於一個數組or對象來渲染一個列表,有五種使用方法,如下: 挺簡單的,后台只要提供一個接口,返回一個數組或對象,前端通過v-for就可以渲染了,我們以上面對象的第三個格式為例講一下源碼,如下: writer by:大沙漠 QQ ...

Thu Jul 04 17:30:00 CST 2019 0 1043
Vue.js 源碼分析(十五) 指令 v-bind指令詳解

指令Vue.js模板中最常用的一項功能,它帶有前綴v-,比如上面說的v-if、v-html、v-pre等。指令的主要職責就是當其表達式的值改變時,相應的將某些行為應用到DOM上,先介紹v-bind指令 v-bind用於動態地綁定一個或多個特性,或一個組件 prop 到表達式 ...

Mon Jul 01 18:48:00 CST 2019 0 649
Vue.js 源碼分析(二十) 指令 v-once指令詳解

數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值,例如:<p>Message: {{ msg }}</p>以后每當msg屬性發生了改變,插值處的內容都會自動更新。 可以給DOM節點添加一個v-once指令,這樣模板只會在第一次更新時顯示數據 ...

Mon Jul 08 18:26:00 CST 2019 1 441
Vue.js 源碼分析(二十二) 指令 v-model指令詳解

Vue.js提供了v-model指令用於雙向數據綁定,比如在輸入框上使用時,輸入的內容會事實映射到綁定的數據上,綁定的數據又可以顯示在頁面里,數據顯示的過程是自動完成的。 v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據,並對一些極端場景進行一些特殊處理 ...

Wed Jul 10 08:02:00 CST 2019 0 702
Vue.js 源碼分析(十七) 指令 v-if、v-else-if和v-else 指令詳解

v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回true值的時候被渲染。 v-else-if,顧名思義,充當 v-if 的“else-if 塊”,可以連續使用: 也可以使用 v-else 指令來表示 v-if 的“else 塊”: 挺好理解的,就和大多數的語言 ...

Thu Jul 04 02:05:00 CST 2019 0 2543
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM