鏈枃浠嬬粛Like+Follow+Favorite=瀛︿細浣跨敤绗笁鏂筓I缁勪欢搴撳悗锛屼綘浼氬彂鐜颁綘鍙互鍦ㄥ畠浠殑缁勪欢涓婁娇鐢╲-model锛屾瘮濡侲lement-UI鎴栬€匛lement-plus鐨別l-input.v-model鐢ㄤ簬鏁版嵁缁戝畾銆傛湰鏂囦互input鍏冪礌涓轰緥锛屽湪鑷畾涔夌粍浠朵腑浣跨敤v-model瀹炵幇鏁版嵁缁戝畾銆傛垜鍒涘缓浜嗕竴涓悕涓簔-input鐨勮嚜瀹氫箟缁勪欢銆傚笇鏈涚埗缁勪欢鍙互浣跨敤v-model鏉ョ粦瀹氭暟鎹€備唬鐮佸涓嬶細鏈枃灏嗕娇鐢╒ue2鍜孷ue3.2鏉ユ紨绀篤ue2銆傚彲浠ヤ娇鐢╲ue-cli鑴氭墜鏋跺垱寤洪」鐩紝涔熷彲浠ヤ娇鐢╲ite鍒涘缓Vue2椤圭洰銆傚鏋滀綘涓嶇煡閬撳浣曚娇鐢╲ite鍒涘缓Vue2椤圭洰锛屽彲浠ヨ窡闅忋€奦ite 鎼缓 Vue2 椤圭洰锛圴ue2 + vue-router + vuex锛夈€嬨€傜ず渚嬬埗缁勪欢鑷畾涔夌粍浠讹細z-input璇存槑涓婇潰浠ｇ爜涓紝鐖剁粍浠剁殑閫昏緫姣旇緝绠€鍗曘€傚湪缁勪欢鍚庢坊鍔?p>鏍囩锛岀敤浜庢祴璇曞瓙缁勪欢鑳藉惁閫氳繃v-model鏀瑰彉鐖剁粍浠剁殑鍊笺€傞噸鐐规槸z杈撳叆缁勪欢銆傜粍浠朵笂鐨剉-model榛樿浣跨敤鍚嶄负value鐨刾rop鍜屽悕涓篿nput鐨勪簨浠躲€備絾鏄痾-input缁勪欢鐨刾rops涓病鏈夊畾涔夊€硷紝杩欐槸鎬庝箞鍥炰簨锛熷鏋滄垜浠湪鐖剁粍浠朵腑浣跨敤v-model缁欒嚜瀹氫箟缁勪欢浼犲€硷紝閭ｄ箞鑷畾涔夌粍浠剁殑props搴旇杩欐牱鍐?inputtype="text":value="value">杩欐椂鍊欏瓙缁勪欢鍙互閫氳繃v-model鎺ユ敹鍒扮埗缁勪欢浼犲叆鐨勫€硷紝浣嗘槸杩欎釜鍊兼槸娌℃湁瀹氫箟鐨勫湪鈥渆xample鈥濆瓙缁勪欢鐨刾rops灞炴€т腑锛屽啓涓簃sg1銆傚鏋滅洿鎺ュ皢props.msg1鏇挎崲涓簆rops.value锛岀劧鍚庢洿鏀筰nput:value="msg1"锛屽垯涓嶄細缁戝畾鏁版嵁銆傗€滅ず渚嬧€濅腑浣跨敤鐨勯瓟娉曟槸model銆俶odel:{prop:'msg1'}model.prop鍙互瀹氫箟鐖剁粍浠堕€氳繃v-model浼犲叆鐨勫€煎簲璇ュ搴旇嚜瀹氫箟缁勪欢props鐨勫睘鎬с€傛墍浠-input涓畾涔夌殑props.msg1鏄笓闂ㄧ敤鏉ユ帴鏀秜-model浼犲叆鐨勫€肩殑銆傜劧鍚庨€氳繃model.event瀹氫箟鍚戜笂瑙﹀彂鐨勪簨浠跺悕绉癿odel:{event:'change1'}鏈€鍚庨€氳繃HTML鍏冪礌涓婄殑$emit鍚戜笂瑙﹀彂浜嬩欢锛屼紶鍏ョ殑鍊煎彲浠ヨ嚜瀹氫箟銆傜敱浜庢湰渚嬩娇鐢ㄤ簡input鍏冪礌锛屾墍浠ュ彲浠ヤ笂浼犺緭鍏ユ鐨勫€笺€傝緭鍏ユ鐨勫彇鍊兼柟寮忥細$event.target.value銆備互涓婃槸Vue2涓嚜瀹氫箟缁勪欢v-model鐨勭敤娉曪紝Vue3.2浣跨敤鐨勬槸鍏跺疄鍘熺悊绫讳技浜嶸ue2銆傚彧鏄娉曟洿鏀广€傚湪鑴氭湰璁剧疆鐨勮娉曚腑锛岄渶瑕佷娇鐢╩odelValue鏉ユ帴鏀剁埗缁勪欢浼犲叆鐨勫€笺€備娇鐢╱pdate:modelValueup浣滀负up瑙﹀彂浜嬩欢鐨勪簨浠跺悕绉般€傛帹鑽愰槄璇火煈嶃€奦ue3 杩?0绉嶇粍浠堕€氳鏂瑰紡銆嬸煈嶃€奦ue3 - $attrs 鐨勫嚑绉嶇敤娉曪紙1涓垨澶氫釜鏍瑰厓绱犮€丱ptions API 鍜?Composition API锛夈€嬸煈嶃€妚ite vue3 濡備綍鍦?js 涓娇鐢?scss 鍙橀噺锛熴€嬸煈嶃€奦ue3 閫掑綊缁勪欢銆嬸煈嶃€奅lement Plus 鐨?el-icon 鍒板簳鎬庝箞鐢紵銆嬸煈嶃€婁簩娆″皝瑁?el-icon銆嬬偣璧?鍏虫敞+鏀惰棌=瀛︿範浜?/p>
