Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Modeler   Code  
»áÔ±   
 
   
 
 
     
   
 ¶©ÔÄ
  ¾èÖú
vue.js ѧϰ±Ê¼Ç£¨Directives£©
 
×÷ÕߣºByronic À´Ô´£º²©¿ÍÔ° ·¢²¼ÓÚ 2015-12-7
  2996  次浏览      28
 

Ïë±ØÏ²»¶Ç°¶Ë¿ª·¢µÄС»ï°éÃǶ¼»ò¶à»òÉÙ½Ó´¥¹ý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 }
   
2996 ´Îä¯ÀÀ       28
Ïà¹ØÎÄÕ Ïà¹ØÎĵµ Ïà¹Ø¿Î³Ì



Éî¶È½âÎö£ºÇåÀíÀôúÂë
ÈçºÎ±àд³öÓµ±§±ä»¯µÄ´úÂë
ÖØ¹¹-ʹ´úÂë¸ü¼ò½àÓÅÃÀ
ÍŶÓÏîÄ¿¿ª·¢"±àÂë¹æ·¶"ϵÁÐÎÄÕÂ
ÖØ¹¹-¸ÄÉÆ¼ÈÓдúÂëµÄÉè¼Æ
Èí¼þÖØ¹¹v2
´úÂëÕû½àÖ®µÀ
¸ßÖÊÁ¿±à³Ì¹æ·¶
»ùÓÚHTML5¿Í»§¶Ë¡¢Web¶ËµÄÓ¦Óÿª·¢
HTML 5+CSS ¿ª·¢
ǶÈëʽC¸ßÖÊÁ¿±à³Ì
C++¸ß¼¶±à³Ì
×îл¼Æ»®
DeepSeek´óÄ£ÐÍÓ¦Óÿª·¢ 6-12[ÏÃÃÅ]
È˹¤ÖÇÄÜ.»úÆ÷ѧϰTensorFlow 6-22[Ö±²¥]
»ùÓÚ UML ºÍEA½øÐзÖÎöÉè¼Æ 6-30[±±¾©]
ǶÈëʽÈí¼þ¼Ü¹¹-¸ß¼¶Êµ¼ù 7-9[±±¾©]
Óû§ÌåÑé¡¢Ò×ÓÃÐÔ²âÊÔÓëÆÀ¹À 7-25[Î÷°²]
ͼÊý¾Ý¿âÓë֪ʶͼÆ× 8-23[±±¾©]

AndroidÊÖ»ú¿ª·¢£¨Ò»£©
Àí½âJavascript
·ÇµäÐÍajaxʵ¼ù
³¹µ×µÄAjax
javascript ʹÓÃCookies
ʹÓà jQuery ¼ò»¯ Ajax ¿ª·¢

Struts+Spring+Hibernate
»ùÓÚJ2EEµÄWeb 2.0Ó¦Óÿª·¢
J2EEÉè¼ÆÄ£Ê½ºÍÐÔÄܵ÷ÓÅ
Java EE 5ÆóÒµ¼¶¼Ü¹¹Éè¼Æ
Javaµ¥Ôª²âÊÔ·½·¨Óë¼¼Êõ
Java±à³Ì·½·¨Óë¼¼Êõ

ijº½¿Õ¹«Ë¾IT²¿ JavaScriptʵ¼ù
ijµçÊÓÈí¼þ HTML5ºÍJavaScript
Öк½ÐÅ JavaScript¸ß¼¶Ó¦Óÿª·¢
´óÇìÓÍÌï web½çÃæAjax¿ª·¢¼¼Êõ
ºÍÀûʱ ʹÓÃAJAX½øÐÐWEBÓ¦Óÿª·¢