詳解vue的資料binding原理

2022-03-15 22:57:25 字數 2782 閱讀 5946

請看原文:

草蓆兩個頁面:

doctype html

>

<

html

>

<

head

>

<

title

>ideal

title

>

<

meta

charset

="utf-8"

>

head

>

<

body

>

<

div

id="test"

>

<

p>}

p>

<

p>}

p>

<

p>}

p>

<

p>}

p>

<

p>}

p>

div>

<

script

>

varbindingmark ='

data-element-binding

'function

element (id, initdata)

//內部暫存繫結資料及dom

data

=self.data

={}

//儲存bingding資料並實現監控

content

=el.innerhtml.replace(

/\\}

/g, marktoken)

el.innerhtml

=content

for(

varvariable

inbindings)

if(initdata)

}function

marktoken (match, variable)

//bindings裡儲存了資料**的字段比如bindings['msg']

return''

+bindingmark +'

="'+variable +'

">'}

function

bind (variable) )

object.defineproperty(data, variable, )

},get:

function

() })}}

var=

newelement(

'test

', )

script

>

body

>

html

>

doctype html

>

<

html

>

<

head

>

<

title

>ideal

title

>

<

meta

charset

="utf-8"

>

head

>

<

body

>

<

input

class

="test"

type

="text"

name

="asd"

onkeyup

="handlechange()"

v-model

="hey"

>

<

input

class

="test"

type

=""name

=""onkeyup

="handlechange()"

v-model

="msg"

>

<

script

>

varbindingmark ='

data-element-binding

'function

element (classa, initdata)

data

=self.data

={}

for(

vari =0

; i

<

el.length; i

++)

for(

varvariable

inbindings)

if(initdata)

}function

marktoken (match, variable)

return

bindingmark +'

="'+variable +'

"'//內填乙個span變為只改它的元素

}

function

bind (variable) )

},get:

function

() })}}

var=

newelement(

'test

', )

function

handlechange(e)

script

>

body

>

html

>

Binding的資料校驗

binding的validationrules 可以每個binding 設定多個資料校驗條件。下面建立乙個規則,必須繼承抽象類 validationrule,下面規則 0 100 public class rangevalidationrule validationrule return new v...

C 中DataGrid的資料Binding的使用

wpf中提供xaml檔案跟後台的c 資料交換的一種新的方式,那就是binding。流程如下 1 定義相應的類 using system using system.collections.generic using system.linq using system.text using system....

WPF使用Binding對資料的校驗

我們通常都會設定對輸入的數值進行校驗,在wpf也一樣,在本示例中,我們使用兩個控制項,分別是textbox1和slider1,通過文字控制項,輸入符合slider的值,如果值不在此範圍則顯示文字框為紅色,反映輸入值不正確,控制項不會因此改變。1 xaml 2 為了進行校驗,我們準備了乙個valida...