Ïë±ØÏ²»¶Ç°¶Ë¿ª·¢µÄС»ï°éÃǶ¼»ò¶à»òÉÙ½Ó´¥¹ýMVVMÕâ¸ö¸ÅÄ˵ÆðMVVM£¬µÚһʱ¼äÏëµ½µÄ±ãÊÇangularjs£¬knockoutjsµÈÒѾ±»¹ã·ºÔËÓõÄMVVM¿ò¼Ü£¬Ö®Ç°ÎÒҲûÓÐÔÚÕâ·½ÃæÓкܶàÁ˽⣬×î½üÔÚ×öÏîÄ¿µÄ¹ý³ÌÖнӴ¥ÁËVue.js,ÕâÊÇÒ»¸öСÇɾ«Ö£¬ÐÔÄÜÓÅÒìµÄMVVM¿ò¼Ü£¬¿ÉÒÔ˵¶Ô³õѧÕßÊDZȽÏÈÝÒ×ÈëÃŵģ¬¸Ã¿ò¼ÜµÄÓ¢ÎÄÎĵµÐ´µÃºÜºÃ£¬µ«ÊÇÖÐÎİæ·ÃÎÊ»¹²»Ì«Îȶ¨£¬·ÒëÒ²Óдý¸Ä½ø£¬ËùÒÔ×Ô¼ºÒ»±éѧϰ£¬Ò»±é¼Ç¼×Ô¼ºµÄ˼¿¼£¬Óë¸÷λ¹²ÏíѧϰµÄ¾Ñé¡£
µÚһƪÖ÷ÒªÊÇÏë̸̸vue.jsÖеÄDirectives¼´Ö¸ÁÔÚvue.jsÖÐÖ¸Áî¾ÍÊÇÒ»¸ö֪ͨ¿â½øÐÐijЩ¾ßÌåµÄdom²Ù×÷µÄ¿ÚÁÔÚhtmlÖбíÏÖΪÈçÏÂÐÎʽ£º
<element prefix-directiveId="[argument:] expression [| filters...]"> </element> |
Directives·ÖΪ1.Reactive Directives¡¢2.Literal
Directives¡¢3.Empty Directives£¬ÏÂÃæ½áºÏ¾ßÌåµÄapi²ûÊöËûÃǵÄ×÷Óãº
1.Reactive Directives£¨ÏìӦʽָÁ
Reactive Directives¿ÉÒÔ°ó¶¨ÔÚVueʵÀý»òÕßÔÚVueʵÀýÉÏÏÂÎÄÖÐÇóÖµµÄ±í´ïʽÉÏ£¬µ±°ó¶¨µÄ¶ÔÏó·¢Éú¸Ä±äʱ£¬Ö¸ÁîÖеÄupdate()»áÔÚÏÂÒ»¸öϵͳµ¥Î»Ê±¼ä·¢ÉúÒì²½ÏìÓ¦£¬ÎÒÃÇÀ´¿´¿´¾ßÌåµÄÓ÷¨£º
v-text:¸üÐÂÔªËØµÄtextContent£¬ÊÂʵÉÏÔÚhtmlÖÐ{{mustache}}ÐÎʽµÄ²åÈëÖµÒ²»á±»±àÒëΪÕë¶ÔÒ»¸ötextNodeµÄv-textÖ¸Áî¡£
v-html:¸üÐÂÔªËØµÄinnerHTML£¬ÓÉÓÚ¿ÉÄܲåÈë¶ñÒâ´úÂ룬ʹÓÃʱҪעÒâ±£Ö¤À´Ô´°²È«¡£
v-show:¸ù¾Ý°ó¶¨ÖµµÄtrue»òfalseÀ´¾ö¶¨ËùÔÚÔªËØÔÚÍøÒ³ÖÐÕý³£ÏÔʾ»¹ÊÇÏÔʾΪ¿Õ¡£
v-class£ºÕâ¸öÖ¸ÁîÓÐÒ»¸ö¿ÉÑ¡²ÎÊý£¬ÎÞ²ÎÊýʱ½«°ó¶¨Öµ£¨Ò»°ãΪclassÃû£©Ìí¼Óµ½ËùÔÚÔªËØµÄclasslistµ±ÖУ¬²¢ÇÒÒ»µ©¼ì²â°ó¶¨ÖµÓи͝£¬±ãËæÖ®¸Ä±äclasslistÀï¶ÔÓ¦µÄclass£»Ìṩ²ÎÊýʱ²ÎÊýµÄtrue»òfalse½«¾ö¶¨°ó¶¨Öµ£¨class£©ÊÇ·ñ±»Ìí¼Óµ½ËùÔÚÔªËØµÄclasslistÖУ¬Ê¾ÀýÈçÏ£º
<span v-class=" red : hasError, bold : isImportant, hidden : isHidden "></span> |
v-attr:¸üÐÂËùÔÚÔªËØµÄijЩÊôÐÔ£¨ÓɲÎÊý±íʾ£©¡£
<canvas v-attr="width:w, height:h"></canvas> |
v-style:¸üÐÂËùÔÚÔªËØµÄÑùʽ£¬»áÖÇÄÜÌí¼Óä¯ÀÀÆ÷¹©Ó¦ÉÌǰ׺£¬·½±ãÎÒÃÇÊéдÑùʽ¡£Õâ¸öÖ¸ÁîÓÐÒ»¸ö¿ÉÑ¡²ÎÊý£¬ÎÞ²ÎÊýʱ£¬Èô°ó¶¨ÖµÎªStringÔò½«°ó¶¨ÖµÉèÖÃÎªÔªËØµÄstyle.cssText£¬Èô°ó¶¨ÖµÎªObjectÔò½«ObjectÖеÄÑùʽ¼üÖµ¶Ô·ÅÈëÔªËØµÄstyle
objectµ±ÖУ»
<div v-style="myStyles"></div>
// myStyles can either be a String: "color:red; font-weight:bold;" // or an Object: { color: 'red', // both camelCase and dash-case works fontWeight: 'bold', 'font-size': '2em' } |
Ìṩ²ÎÊýʱ£¬²ÎÊýÖ¸Ã÷ÁËcssÊôÐԵĶÔÓ¦Öµ:
<div v-style=" top: top + 'px', left: left + 'px', background-color: 'rgb(0,0,' + bg + ')' "></div> |
v-on:ÎªÔªËØÌí¼Ó²¢¸üÐÂʼþ¼àÌýÆ÷£¬²ÎÊý¿ÉÒÔÊÇÒ»¸ö´¦Àíº¯Êý»òÕßÒ»¸öº¯ÊýÓï¾ä¡£
<div id="demo"> <a v-on="click: onClick">Trigger a handler</a> <a v-on="click: n++">Trigger an expression</a> </div> |
ÎÒÃÇ¿ÉÒÔΪ´¦Àíº¯ÊýÌṩ²ÎÊý£¬ÆäÖÐthisÖ¸µÄÊǵ±Ç°µÄViewModel£¬ÈçÏÂÀýÖÐͨ¹ý´«Èëthis²ÎÊý¸Ä±äÔªËØµÄtextÖµ£º
<ul id="list"> <li v-repeat="items" v-on="click: toggle(this)">{{text}}</li> </ul>
new Vue({ el: '#list', data: { items: [ { text: 'one', done: true }, { text: 'two', done: false } ] }, methods: { toggle: function (item) { item.done = !item.done } } })
|
ÎÒÃÇ»¹¿ÉÒÔ´«Èë$event±íʾ´¥·¢´¦Àíº¯ÊýµÄDOMʼþ£¬ÈçÏÂÀý´«Èë$event×èֹʼþðÅÝ£º
<button v-on="click: submit('hello!', $event)">Submit</button>
/* ... */ { methods: { submit: function (msg, e) { e.stopPropagation() } } } /* ... */ |
ÔÚ¼àÌý¼üÅÌʼþʱÓÉÓÚÒªÅжϰ´¼üÖµ£¬¿ÉÒÔ½áºÏfilterд³ÉÈçÏÂÁ½ÖÖÐÎʽ£º
<!-- only call vm.submit() when the keyCode is 13 --> <input v-on="keyup:submit | key 13">
<!-- same as above --> <input v-on="keyup:submit | key enter"> |
µ±ViewModelÏú»Ùʱ£¬v-on°ó¶¨µÄʼþ»á×Ô¶¯Ïû³ý£¬ÎÒÃDz»±ØÇ××ÔÈ¥ÇåÀíÕâЩ°ó¶¨Ê¼þ£¬ÕâÒ²·ÀÖ¹ÁËÄÚ´æµÄй¶¡£
v-model:Ϊ±íµ¥ÔªËØ´´½¨Ò»¸öË«Ïò°ó¶¨£¬Ïêϸ½éÉÜÇë¿´ÕâÀï
v-if:¸ù¾Ý°ó¶¨ÖµµÄtrue»òfalseÀ´²åÈë»òÒÆ³ýÔªËØ£¬ÈçÀý×ÓÖÐÎÒÃǽ«¸ù¾ÝtestµÄÕýÈ·Óë·ñ¾ö¶¨Á½¸ö<p
class="artcon">ÔªËØÊÇ·ñ²åÈë<template>µ±ÖÐ
<template v-if="test"> <p class="artcon">hello</p> <p class="artcon">world</p> </template> |
v-repeat:Ϊ°ó¶¨Êý×é»ò¶ÔÏóÖеÄÿһ¸öitem´´½¨Ò»¸ö×ÓViewModel£¬»òÕßΪ°ó¶¨µÄÊý×ÖÖµ´´½¨¶ÔÓ¦ÊýÁ¿µÄ×ÓViewModel¡£²¢¸ù¾Ý°ó¶¨ÖµµÄ¸Ä±äËæÊ±¸üС£Ã»ÓÐÌṩ²ÎÊýʱ×ÓViewModel»áÖ±½ÓʹÓðó¶¨Êý×éÖеķÖÅäµ¥Ôª×÷ΪËüµÄ$data£¬Èç¹ûÖµ²»ÊÇÒ»¸ö¶ÔÏó£¬Ôò»á´´½¨Ò»¸öÊý¾Ý°ü×°¶ÔÏ󣬶øÖµ»á±»ÉèÖÃÔÚ±ðÃûΪ$valueµÄ
key ÉÏ¡£
<ul> <li v-repeat="users"> {{name}} {{email}} </li> </ul> |
Èç¹ûÌṩÁ˲ÎÊý£¬ÎÒÃǽ«´´½¨Ò»¸öÊý¾Ý°ü×°¶ÔÏ󣬽«²ÎÊý×÷Ϊ¶ÔÏóµÄkey£¬´Ó¶ø·ÃÎʶÔÏóÄ£°åÖеÄÊôÐÔ£º
<ul> <li v-repeat="user : users"> {{user.name}} {{user.email}} </li> </ul> |
v-with£ºÕâ¸öÖ¸ÁîÖ»ÄܽáºÏ½ÓÏÂÀ´½²µ½µÄv-componentÖ¸ÁîʹÓã¬×÷ÓÃÊÇÈÃ×ÓViewModel¿ÉÒԼ̳и¸ViewModelµÄÊý¾Ý£¬ÎÒÃÇ¿ÉÒÔ´«È븸ViewModelµÄÊôÐÔ¶ÔÏó»òµ¥¸öÊôÐÔ£¬ÔÚ×ÓViewModelÖзÃÎÊ£º
// parent data looks like this { user: { name: 'Foo Bar', email: 'foo@bar.com' } } |
¼Ì³Ð¶ÔÏó£º
<my-component v-with="user"> <!-- you can access properties without `user.` --> {{name}} {{email}} </my-component> |
¼Ì³Ðµ¥¸öÊôÐÔ£º
<my-component v-with="myName: user.name, myEmail: user.email"> <!-- you can access properties with the new keys --> {{myName}} {{myEmail}} </my-component> |
v-events£ºÕâ¸öÖ¸ÁîÒ²Ö»ÄܽáºÏ½ÓÏÂÀ´½²µ½µÄv-componentÖ¸ÁîʹÓã¬ËüʹµÃ¸¸ViewModelÄܹ»¼àÌý×ÓViewModelÉϵÄʼþ£¬ÎÒÃÇҪעÒâÇø·Öv-onÓëv-events,v-events¼àÌýµÄÊÇͨ¹ývm.$emit()´´½¨µÄ
Vue ×é¼þϵͳʼþ£¬¶ø²»ÊÇ DOM ʼþ¡£ÎÒÃǾÙÀý˵Ã÷£º
<!-- inside parent template --> <div v-component="child" v-events="change: onChildChange"></div> |
µ±×ÓViewModelµ÷ÓÃthis.$emit('change', ¡)ʱ»á´¥·¢¸¸ViewModelµÄonChildChange()·½·¨£¬²¢ÇÒ°Ñemitº¯ÊýÖи½¼ÓµÄ²ÎÊý´«¸øonChildChange()·½·¨¡£
2.Literal Directives(×ÖÃæÖ¸Áî)
×ÖÃæÖ¸ÁûÓа󶨵½Ä³Ò»¸ö¶ÔÏóÉÏ£¬×ÖÃæÖ¸ÁîÊǰÑËüÃǵIJÎÊý×÷Ϊ´¿×Ö·û´®´«¸øbind()º¯ÊýÖÐÖ´ÐÐÒ»´Î£¬×ÖÃæÖ¸Áî¿ÉÒÔ½ÓÊÜ{{mustache}}±í´ïʽ£¬µ«ÊǸñí´ïʽֻ»áÔÚ±àÒë½×¶ÎÖ´ÐÐÒ»´Î£¬²»»á°ó¶¨Êý¾ÝµÄ¸Ä±ä£º
ÏÂÃæ¿´Ò»¿´¾ßÌåµÄapi£º
v-component£ºÖ®Ç°Ìáµ½¹ý£¬ÕâÊÇʹÓÃÎÒÃÇÌáǰÉùÃ÷²¢×¢²áºÃµÄ×é¼þ¹¹ÔìÆ÷½«µ±Ç°ÔªËرàÒëΪ×ÓViewModel£¬´Ó¶øÊµÏÖÊý¾Ý¼Ì³Ð£¬Ö®ºóµÄÎÄÕ»áÏêϸ½éÉÜ×é¼þϵͳ¡£
v-ref£ºÔÚ¸¸ViewModelÖд´½¨×ÓViewModelµÄÒýÓ㬷½±ã¸¸ViewModelÖеÄ$¶ÔÏó·ÃÎÊ×Ó×é¼þ£º
<div id="parent"> <div v-component="user-profile" v-ref="profile"></div> </div>
var parent = new Vue({ el: '#parent' }) // ·ÃÎÊ×Ó×é¼þ var child = parent.$.profile |
Õâ¸öÖ¸ÁîÖ»ÄÜÓëv-componentºÍv-repeatÒ»ÆðʹÓã¬Óëv-repeatÒ»ÆðʹÓÃʱ£¬ÆävalueÊÇÓë°ó¶¨Êý¾ÝÊý×é¶ÔÓ¦µÄ×Ó×é¼þÊý×é¡£
v-el£ºÎªµ±Ç°domÔªËØ´´½¨Ò»¸öÒýÓ㬹©Æä×ÔÉívueʵÀýʹÓã¬ÀýÈç<div
v-el="hi">¿ÉÒÔʹµÃvm.$$.hi·ÃÎʵ½¸ÃdomÔªËØ
v-partial£º½«µ±Ç°domÔªËØÖеÄinnerHTMLÌæ»»ÎªÊÂÏÈ×¢²áµÄpartial£¬ÓÐÁ½ÖÖд·¨£¬{{
mustache}}¿ÉÒÔÈÃdomÔªËØËæÊý¾Ý¸Ä±ä¶ø¸üÐÂ:
<!-- content will change based on vm.partialId --> <div v-partial="{{partialId}}"></div> |
ÁíÒ»ÖÖд·¨ÔòûÓÐÊý¾Ý¸úËæ¸üеÄЧ¹û£º
<div>{{> my-partial}}</div> |
v-transition£ºÎªµ±Ç°domÔªËØÔÚÖ¸¶¨²ÎÊýÖµ×÷ÓÃʱÌí¼Ó¶¯»Ð§¹û£¬ºóÐøÎÄÕ»áÏêϸ½éÉÜ
3.Empty Directives(×ÖÃæÖ¸Áî)
v-pre£ºÕâ¸öÖ¸ÁîÊÇ֪ͨ±àÒëÆ÷Ìø¹ýµ±Ç°domÔªËØºÍÆäËùÓÐ×ÓÔªËØ£¬ÕâÊÇΪÁËÔÚÎÒÃDZà³Ì¹ý³ÌÖжÔÎÞÐè±àÒëµÄÔªËØ½ÚÊ¡±àÒëʱ¼ä
v-cloak£ºÔÚµ±Ç°ÔªËرàÒëÍê³É֮ǰ¸ÄÖ¸Áî¶¼»á´æÔÚ£¬ÎÒÃÇÒ»°ãʹÓÃÕâ¸öÖ¸ÁîÀ´ÔÚÔªËØ±àÒëδÍê³ÉʱÒþ²ØÔʼµÄ
{{ Mustache }} Ä£°å£¬¿ÉÒÔÔÚcssÖÐÕâÑùд£º
[v-cloak] { display: none } |
|