vue2高階之v model在元件上的使用

2022-05-01 16:30:12 字數 654 閱讀 4021

v-model 用在 input 元素上時

v-model雖然很像使用了雙向資料繫結的 angular 的 ng-model,但是 vue 是單項資料流,v-model 只是語法糖而已:

第一行的**其實只是第二行的語法糖

我們仔細觀察語法糖和原始語法那兩行**,可以得出乙個結論:

在給 元素新增 v-model 屬性時,缺省會把 value 作為元素的屬性,然後把 'input' 事件作為實時傳遞 value 的觸發事件

v-model 用在元件上時

v-model 不僅僅能在 input上用,在元件上也能使用,下面是乙個和 vue 官網教程類似的例子(在看這個例子時我們要考慮兩個問題):

}

如果你知道這兩個問題的答案,那麼恭喜你真正掌握了 v-model,如果你沒明白,那麼可以看下這段**:

現在你知道 value 和 input 從哪來的了吧。與上面總結的類似:

給元件新增 v-model 屬性時,缺省會把 value 作為元件的屬性,然後把 'input' 值作為給元件繫結事件時的事件名

關於v-model更詳細解釋)

Vue2 元件封裝

接觸乙個前端框架,除了基礎的使用語法以外我們接下來都會很關心元件和復用的問題。以下就是個簡單的例子。下面是在父元件中引入子元件的 片段 booklist out container booklist container for book in books book book div button c...

vue 2 元件之間傳值

對vue2版本的元件之間傳值的乙個簡單整合 父元件 子元件 props 和 refs props parent this.ref.helloworld.msg子元件 父元件 自定義事件 child this.emit send msg parent 兄弟元件 通過共同祖輩搭橋 par ent或 pa...

vue2之物件屬性的監聽

物件屬性監聽的兩種方法 1.普通的watch data watch 2.物件屬性的watch data watch deep true tips 只要bet中的屬性發生變化 可被監測到的 便會執行handler函式 如果想監測具體的屬性變化,如pokerhistory變化時,才執行handler函式...