你真的知道元件中的v model嗎？

目錄

元件中的v-model

html

<

divid
=>
<
input
v-model
="poin"
>
}div
>

new

vue(
})

理論上data中的值發生變化是會出發事件的，但是我們沒看見？

其實在vue的文件中有說明:

<

input
v-model
="something"
>

<

input
v-bind:value
="something"
v-on:input
="something = $event.target.value"
>

當或元素的值更改時，dom input 事件會同步觸發。(對於 type = checkbox 或 type = radio 的輸入元素，當使用者單擊控制項時，輸入事件不會觸發，因為value屬性不會更改。) 此外，當內容更改時，它會在 contenteditable 的編輯器上觸發。在這種情況下，事件目標是編輯主機元素。如果有兩個或多個具有 contenteditable 的元素為真，「編輯主機」是其父級不可編輯的最近的祖先元素。同樣，它也會在 designmode 編輯器的根元素上觸發。

我們先看一下**

el-input.vue

<

template
>
<
div>
<
p>
input的封裝
p>
<
input
type
="text"
ref=
"input"
:value
="value"
@input
="updatevalue($event.target.value)"
@focus
="selectall"
>
div>
template
>
<
script
>
export
default
,  },
methods
: ,    selectall(event) , 0)}}}
script
>
<
style
>
style
>

每次使用的時候都會在後面加個1

但是問題來了，我們要如何在tom.vue中取到這個值呢？

這裡就體現出了v-model的強大了，因為上面的語法糖，自動的繫結了input事件。所以我們可以利用這個特性去做些事情。

將tom.vue的**修改一下

<

template
>
<
div>
<
v-el-input
v-model
="elevalue"
>
v-el-input
>
elevalue的值:
}div
>
template
>
<
script
>
import
velinput 
from
'./el-input.vue'
export
default
,  data () 
}}script
>

輸入後的狀態

然後當我們輸入的值發生變化的時，我們預想的elevalue依舊沒有發生變化,而el-input.vue中的value確發生了變化

也是就是說value發生變化後沒有傳遞(同步)到父元件中,這也就是vue1中的.sync的用處，而在vue2中已經廢棄了。

修改el-input.vue**，增加this.$emit('input', value*1)

...

updatevalue (value) ,
...

你真的知道 strtotime 嗎？

課堂小提問 echo date y m d strtotime 1 month strtotime 2017 03 31 輸出什麼？echo date y m d strtotime 1 month strtotime 2017 08 31 輸出又是什麼？現在公布正確答案了 echo date y ...

你真的知道HTML嗎？

經過幾次面試當中，被問及到最基礎的東西，沒想到回答不上來，有點蛋痛，今天特地的複習了一下！內容 1.doctype 文件型別 的作用是什麼？有多少文件型別？2.瀏覽器標準模式和怪異模式之間的區別是什麼？3.html dhtml xhtml是什麼？以及它們的區別是什麼？一 doctype 文件型別 的...

程式設計 你真的知道開源嗎？

開源，opensource 全稱為開放源 開源就是要使用者利用源 在其基礎上修改和學習的，但開源系統同樣也有版權，同樣也受到法律保護。你對原始碼進行二次開發進行修改bug修復等版權可以標為自己開發。開源被非盈利軟體組織 美國的opensourceinitiative協會 註冊為認證標記，並對其進行了...