Vue鐨勫弻鍚戞暟鎹粦瀹氬湪鐜颁唬鍓嶇闈㈣瘯涓鍙楀叧娉紝鍫О蹇呰€冪偣銆傚嵆浣挎棤娉曠幇鍦哄畬缇庡疄鐜帮紝涔熻嚦灏戝簲鑳介槓杩板叾鍘熺悊銆傛湰鏂囧皢浠跨収Vue锛屽疄鐜颁竴涓悕涓簃yVue鐨勫弻鍚戞暟鎹粦瀹氬疄渚嬶紝缁撳悎璇︾粏娉ㄩ噴锛屼互鏈熷澶у鏈夋墍鍔╃泭銆?/p>涓€銆佸師鐞嗙畝杩?/h3>浜屻€佸疄渚嬪疄鐜?/h3>

椤甸潰缁撴瀯绠€娲佹槑浜嗭紝鍏蜂綋濡備笅锛?/p>

1. 涓€涓噰鐢╲-model鎸囦护鐨刬nput杈撳叆妗?/p>

2. 涓€涓噰鐢╲-click鎸囦护鐨刡utton鎸夐挳

3. 涓€涓噰鐢╲-bind鎸囦护鐨刪3鏍囩

璁╂垜浠竴姝ユ鏋勫缓杩欎釜绠€鍗曠殑myVue瀹炰緥銆?/p>

鎴戜滑闇€瑕佸畾涔夋暟鎹璞″強鍒濆鍖栫姸鎬併€傚湪Vue涓紝鎴戜滑閫氬父閫氳繃data鍑芥暟杩斿洖涓€涓璞℃潵瀹炵幇銆傝繖閲屾垜浠垱寤轰竴涓悕涓篸ata鐨勫璞″苟璁剧疆鍒濆鍊笺€?/p>

鎺ヤ笅鏉ワ紝鎴戜滑灏嗗疄鐜皏-model鎸囦护銆傚湪Vue涓紝v-model鏄弻鍚戞暟鎹粦瀹氱殑鏍稿績锛屽畠瀹為檯涓婃槸value鍜宨nput浜嬩欢鐨勮娉曠硸銆傛垜浠渶瑕佺洃鍚琲nput鍏冪礌鐨刬nput浜嬩欢鏉ユ洿鏂版暟鎹璞′腑鐨勫€硷紝骞堕€氳繃璁剧疆input鍏冪礌鐨剉alue灞炴€ф潵鍙嶆槧鏁版嵁瀵硅薄涓殑鍙樺寲銆?/p>

鐒跺悗锛屾垜浠皢瀹炵幇v-click鎸囦护銆傚湪Vue涓紝v-click鐢ㄤ簬鐩戝惉鍏冪礌鐨勭偣鍑讳簨浠躲€傛垜浠彲浠ョ洿鎺ヤ负button鍏冪礌娣诲姞涓€涓猚lick浜嬩欢澶勭悊鍣ㄦ潵瀹炵幇杩欎竴鍔熻兘銆傚湪浜嬩欢澶勭悊鍣ㄤ腑锛屾垜浠彲浠ヨ闂埌褰撳墠鐨勬暟鎹璞″苟瀵瑰叾杩涜鏇存柊銆?/p>

鎴戜滑灏嗗疄鐜皏-bind鎸囦护銆傚湪Vue涓紝v-bind鐢ㄤ簬鍔ㄦ€佺粦瀹欻TML灞炴€с€傛垜浠彲浠ョ洿鎺ヤ负h3鍏冪礌鐨勬枃鏈唴瀹圭粦瀹氫竴涓彉閲忔潵瀹炵幇杩欎竴鍔熻兘銆傚綋鏁版嵁瀵硅薄涓殑瀵瑰簲鍊煎彂鐢熷彉鍖栨椂锛宧3鍏冪礌鐨勬枃鏈唴瀹逛篃浼氳嚜鍔ㄦ洿鏂般€?/p>

鎴戜滑鏈€缁堝皢閲囩敤绫讳技Vue鐨勬柟寮忔潵瀹炵幇鍙屽悜鏁版嵁缁戝畾锛岄€氳繃缁撳悎鎴戜滑鐨勬暟鎹粨鏋勫苟娣诲姞娉ㄩ噴鏉ュ畬鍠勩€傛兂璞′竴涓嬫垜浠鍦ㄥ垱寤轰竴涓悕涓簃yVue鐨勭濂囨瀯閫犲嚱鏁帮紝瀹冨皢涓烘垜浠殑搴旂敤绋嬪簭甯︽潵鐢熷懡鍔涖€?/p>

鎴戜滑瀹氫箟浜嗚繖涓绉樼殑myVue鏋勯€犲嚱鏁帮紝瀹冩帴鍙椾竴涓悕涓簅ptions鐨勫弬鏁般€備负浜嗗垵濮嬪寲杩欎釜寮哄ぇ鐨勬瀯閫犲嚱鏁帮紝鎴戜滑缁欏畠澧炲姞浜嗕竴涓猒init灞炴€э紝灏卞儚缁欎竴搴уぇ鍘︽墦涓嬬ǔ鍥虹殑鍩虹煶銆?/p>

鍦╩yVue鐨勫師鍨嬩笂锛屾垜浠畾涔変簡_init鏂规硶锛屽畠鎺ュ彈options浣滀负鍙傛暟銆傝繖涓柟娉曚富瑕佽礋璐ｅ垵濮嬪寲鎴戜滑鐨勫簲鐢ㄥ疄渚嬨€傚畠鑾峰彇浼犲叆鐨別l銆乨ata鍜宮ethods绛夐€夐」锛屽苟灏嗗畠浠繚瀛樺湪瀹炰緥鐨勫睘鎬т腑銆傜壒鍒湴锛屽綋澶勭悊data鏃讹紝鎴戜滑闇€瑕佸鍏惰繘琛岀壒娈婂鐞嗕互纭繚鏁版嵁鐨勫彉鍖栬兘澶熷疄鏃跺弽鏄犲湪鐣岄潰涓娿€?/p>

鐒跺悗锛屾垜浠紪鍐欎簡涓€涓寚浠ょ被Watcher锛屽畠鐨勪綔鐢ㄦ槸缁戝畾鏇存柊鍑芥暟锛屽疄鐜板DOM鍏冪礌鐨勬洿鏂般€傛瘡褰撴暟鎹彂鐢熷彉鍖栨椂锛學atcher灏变細鏀跺埌閫氱煡锛屽苟瑙﹀彂鐩稿簲鐨勬洿鏂板嚱鏁帮紝纭繚DOM鍏冪礌鐨勫唴瀹逛笌鏁版嵁淇濇寔鍚屾銆傝繖涓猈atcher灏卞儚鏄垜浠殑鐣岄潰鍜屾暟鎹箣闂寸殑妗ユ锛屼繚璇佷簡淇℃伅鐨勭晠閫氭棤闃汇€?/p>

鐜板湪锛岃鎴戜滑鎯宠薄涓€涓嬭繖涓満鏅細鍦╩yVue瀹炰緥涓紝姣忓綋number鏁版嵁鍙戠敓鍙樺寲鏃讹紝Watcher灏变細瀵熻鍒拌繖涓€鍙樺寲锛屽苟绔嬪嵆鏇存柊鐩稿簲鐨凞OM鍏冪礌銆傝繖灏卞儚鏄竴鍦虹簿褰╃殑鑸炶箞锛宮yVue銆乄atcher鍜孌OM鍏冪礌涔嬮棿榛樺鍦伴厤鍚堬紝鍏卞悓鍒涢€犲嚭浠や汉鎯婂徆鐨勮瑙夋晥鏋溿€?/p>

鍦?Vue 鐨勪笘鐣岄噷锛屾垜浠鍏堣杩涜鐨勬槸鍒濆鍖栨搷浣滐紝杩欏氨鏄?`_init` 鍑芥暟鐨勪娇鍛姐€傚湪 `myVue.prototype._init` 鍑芥暟涓紝褰撴垜浠紶鍏ヤ竴涓?`options` 鍙傛暟鏃讹紝鎴戜滑寮€濮嬩簡 Vue 瀹炰緥鐨勬梾绋嬨€傚湪杩欎釜杩囩▼涓紝鎴戜滑鍒涘缓浜嗕竴涓悕涓?`_binding` 鐨勭┖瀵硅薄銆傝繖涓?`_binding` 鏈夌潃闈炲父閲嶈鐨勪娇鍛斤紝瀹冧繚瀛樼潃 model 涓?view 涔嬮棿鐨勬槧灏勫叧绯汇€傜畝鍗曞湴璇达紝瀹冨氨鏄垜浠殑 Watcher 瀹炰緥鐨勯泦缁撳湴銆備竴鏃?model 鍙戠敓鍙樺寲锛岃繖浜?Watcher 瀹炰緥灏变細绔嬪埢琛屽姩锛岃Е鍙戠浉鍏崇殑鎸囦护绫昏繘琛屾洿鏂帮紝纭繚 view 涔熻兘瀹炴椂鏇存柊銆?/p>

鎺ヤ笅鏉ユ槸 `_obverse` 鍑芥暟鐨勮鑹层€傝繖涓嚱鏁扮殑浠诲姟鏄瀵熷苟鍝嶅簲瀵硅薄鐨勫彉鍖栥€傚綋浼犲叆涓€涓璞?`obj` 鏃讹紝鎴戜滑棣栧厛妫€鏌ヨ繖涓璞℃槸鍚︽嫢鏈夋煇涓睘鎬?`key`銆傚鏋滄嫢鏈夛紝鎴戜滑灏卞湪 `_binding` 涓负杩欎釜 `key` 鍒涘缓涓€涓柊鐨勫疄渚嬨€傝繖涓疄渚嬪寘鍚簡涓€涓?`_directives` 鏁扮粍銆傜劧鍚庯紝鎴戜滑浣跨敤 `Object.defineProperty` 瀵?`this.$data` 杩涜瀹氫箟锛屾坊鍔犱竴涓睘鎬?`key`銆傝繖涓睘鎬х殑 `set` 鍑芥暟灏辨槸鎴戜滑杩涜鏁版嵁缁戝畾鐨勫叧閿€傚綋杩欎釜灞炴€х殑鍊煎彂鐢熷彉鍖栨椂锛屾垜浠細鎵撳嵃鍑烘柊鐨勫€硷紝骞舵鏌ユ柊鏃у€兼槸鍚︿笉鍚屻€傚鏋滀笉鍚岋紝鎴戜滑灏辨洿鏂?`value` 鐨勫€硷紝骞惰Е鍙?`_binding[number]._directives` 涓殑姣忎竴涓?Watcher 瀹炰緥杩涜鏇存柊銆?/p>

閭ｄ箞濡備綍灏?view 涓?model 杩涜缁戝畾鍛紵杩欏氨闇€瑕佹垜浠殑 `_compile` 鍑芥暟浜嗐€傝繖涓嚱鏁扮殑浠诲姟鏄В鏋愭垜浠殑鍚勭鎸囦护锛堝 v-bind, v-model, v-click 绛夛級锛屽苟鍦ㄨВ鏋愮殑杩囩▼涓畬鎴?view 涓?model 鐨勭粦瀹氥€傚湪杩欎釜杩囩▼涓紝鎴戜滑浼氭繁鍏ヨВ鏋愭瘡涓寚浠わ紝寤虹珛 model 涓?view 鐨勮仈绯伙紝纭繚褰?model 鍙戠敓鍙樺寲鏃讹紝view 鑳藉瀹炴椂鏇存柊銆傝繖鏍凤紝鎴戜滑鐨?Vue 瀹炰緥灏辫兘瀹炵幇鏁版嵁鐨勫弻鍚戠粦瀹氫簡銆?/p>

鍦╒ue鐨勪笘鐣岄噷锛屾瘡涓猇ue瀹炰緥鍦ㄥ惎鍔ㄤ箣鍒濋兘浼氱粡鍘嗕竴涓绉樼殑鏃呯▼鈥斺€斿垵濮嬪寲銆傝繖涓繃绋嬪紑濮嬩簬 `_init` 鏂规硶锛屽畠鏄疺ue瀹炰緥鐨勭敓鍛界嚎銆傝鎴戜滑璺熼殢杩欎釜鏂规硶娣卞叆鎺㈢┒銆?/p>

鎯宠薄涓€涓嬶紝鎴戜滑鏈変竴涓悕涓簃yVue鐨刅ue瀹炰緥銆傝繖涓疄渚嬪紑濮嬪叾鐢熷懡鍛ㄦ湡鏃讹紝棣栧厛鎵ц `_init` 鍑芥暟锛岃繖涓嚱鏁版帴鏀朵竴涓€夐」瀵硅薄浣滀负鍙傛暟銆傚湪杩欎釜鍑芥暟涓紝鎴戜滑鏈変竴涓叧閿楠も€斺€斿Vue瀹炰緥杩涜缂栬瘧锛屽嵆璋冪敤 `_compile` 鏂规硶骞朵紶鍏ユ牴鍏冪礌 `$el`銆?/p>

閭ｄ箞锛屼粈涔堟槸 `_compile` 鏂规硶鍛紵绠€鍗曟潵璇达紝瀹冨氨鏄В鏋愭垜浠殑妯℃澘骞朵负姣忎竴涓壒娈婃寚浠ょ敓鎴愬搷搴斿紡琛屼负鐨勪唬鐮併€傜幇鍦紝鎴戜滑涓€璧锋潵娣卞叆浜嗚В杩欎釜杩囩▼銆?/p>

鎴戜滑瑕佹壘鍒版垜浠殑鏍瑰厓绱犮€傝繖涓厓绱犳槸甯︽湁id涓篴pp鐨勫厓绱犮€備竴鏃︽壘鍒板畠锛屾垜浠細鑾峰彇鍏舵墍鏈夊瓙鍏冪礌鑺傜偣銆傚浜庢瘡涓€涓瓙鍏冪礌鑺傜偣锛屾垜浠兘浼氳繘琛屾繁搴﹂亶鍘嗗苟澶勭悊瀹冧滑銆傝繖涓繃绋嬫秹鍙婁笁涓叧閿寚浠わ細v-click銆乿-model鍜寁-bind銆?/p>

瀵逛簬甯︽湁 `v-click` 鎸囦护鐨勫厓绱狅紝鎴戜滑鐭ラ亾鐢ㄦ埛甯屾湜鍦ㄦ鍏冪礌涓婅Е鍙戜竴涓簨浠讹紙渚嬪increment浜嬩欢锛夈€傚綋杩欎釜鍏冪礌琚偣鍑绘椂锛屾垜浠細鐩戝惉瀹冪殑 `onclick` 浜嬩欢骞舵墽琛岀浉搴旂殑鍑芥暟銆傝繖鏄疺ue瀹炵幇浜嬩欢缁戝畾鐨勬柟寮忋€?/p>

鎺ヤ笅鏉ユ槸 `v-model` 鎸囦护銆傚綋鍏冪礌鏄?`INPUT` 鎴?`TEXTAREA` 鏃讹紝鎴戜滑鐭ラ亾杩欐槸涓€涓弻鍚戠粦瀹氬満鏅€傛垜浠細鍦ㄥ厓绱犱笂鐩戝惉 `input` 浜嬩欢锛屽綋鍏冪礌鐨勫€兼敼鍙樻椂锛孷ue浼氬悓姝ユ洿鏂版暟鎹腑鐨勫€笺€傚綋鏁版嵁涓殑鍊兼敼鍙樻椂锛孷ue涔熶細鏇存柊鍏冪礌鐨勫€笺€傝繖鏄€氳繃Watcher瀹炵幇鐨勶紝Watcher鏄竴涓瀵熻€呭璞★紝瀹冧細鐩戝惉鏁版嵁鐨勫彉鍖栧苟鍚屾鏇存柊瑙嗗浘銆傝繖灏辨槸Vue鐨勫弻鍚戠粦瀹氭満鍒躲€?/p>

瀵逛簬甯︽湁 `v-bind` 鎸囦护鐨勫厓绱狅紝鎴戜滑鍙渶瑕佺‘淇濆厓绱犵殑灞炴€у€奸殢鐫€鏁版嵁鐨勬敼鍙樿€屾洿鏂般€傚綋鏁版嵁涓殑鍊兼敼鍙樻椂锛孷ue浼氭洿鏂板厓绱犵殑灞炴€у€笺€傝繖涔熸槸閫氳繃Watcher瀹炵幇鐨勩€傞€氳繃杩欎釜杩囩▼锛屾垜浠疄鐜颁簡绠€鍗曠殑Vue鍙屽悜缁戝畾鍔熻兘锛屽寘鎷瑅-bind銆乿-model鍜寁-click涓変釜鎸囦护鐨勫簲鐢ㄣ€傝繖鏍凤紝鎴戜滑灏辫兘澶熷垱寤轰竴涓姩鎬佸搷搴斻€佹槗浜庝氦浜掔殑Vue搴旂敤鍟︼紒Vue涓栫晫涓殑绮惧僵鍛堢幇馃専

璧拌繘鈥渕yVue鈥濓紝浣犱細鍙戠幇涓€涓厖婊℃椿鍔涗笌鍒涢€犲姏鐨勪笘鐣屻€俛pp涓嬬殑姣忎竴澶勭粏鑺傦紝閮芥祦闇插嚭绮惧績璁捐鐨勭棔杩广€傛枃鏈榻愭柟寮忕殑璁捐锛屼笉浠呬粎鏄竴涓畝鍗曠殑鎺掔増锛屾洿鏄鐢ㄦ埛浣撻獙鐨勬繁鎬濈啛铏戙€傛瘡涓€琛屼唬鐮佽儗鍚庯紝閮介殣钘忕潃涓板瘜鐨勭煡璇嗗拰鍒涙剰銆?/p>

鍦ㄨ繖閲岋紝鎴戜滑榧撳姳浣犲叧娉ㄦ垜浠殑Github锛岀偣浜偅棰楄薄寰佺潃璁ゅ彲涓庢敮鎸佺殑Star馃専銆傛垜浠畾鏈熷垎浜獼S涓殑鐭ヨ瘑瀹濊棌锛屾棤璁烘槸鍒濆鑰呰繕鏄祫娣卞紑鍙戣€咃紝閮借兘鍦ㄨ繖閲屾壘鍒板睘浜庤嚜宸辩殑涔愯叮銆?/p>

鎯宠浜嗚В鏇村锛熼偅灏辫窡闅忔垜浠竴璧锋帰绱㈠惂锛佸湪杩欎釜鍏呮弧娲诲姏涓庡垱鏂扮殑鏃呯▼涓紝浣犲皢鏀惰幏婊℃弧鐨勭煡璇嗕笌蹇箰銆傛杩庢潵鍒板憜澶村憜鑴戜付鐨勪笘鐣岋紝閾炬帴鐩磋揪锛歔