ÕùÔõ·ÓÉÍø£ºÊÇÒ»¸öÖ÷Òª·ÖÏíÎÞÏß·ÓÉÆ÷°²×°ÉèÖþ­ÑéµÄÍøÕ¾£¬»ã×ÜWiFi³£¼ûÎÊÌâµÄ½â¾ö·½·¨¡£

ΪʲôҪʹÓÃVuejs

ʱ¼ä£º2024/4/29×÷ÕߣºÎ´ÖªÀ´Ô´£ºÕùÔõ·ÓÉÍøÈËÆø£º

ÍøÒ³µÄ±¾ÖʾÍÊdz¬¼¶Îı¾±ê¼ÇÓïÑÔ£¬Í¨¹ý½áºÏʹÓÃÆäËûµÄWeb¼¼Êõ£¨È磺½Å±¾ÓïÑÔ¡¢¹«¹²Íø¹Ø½Ó¿Ú¡¢×é¼þµÈ£©£¬¿ÉÒÔ´´Ôì³ö¹¦ÄÜÇ¿´óµÄÍøÒ³¡£Òò¶ø£¬³¬¼¶Îı¾±ê¼ÇÓïÑÔÊÇÍòάÍø£¨Web£©±à³ÌµÄ»ù´¡£¬Ò²¾ÍÊÇ˵ÍòάÍøÊǽ¨Á¢ÔÚ³¬Îı¾»ù´¡Ö®Éϵġ£³¬¼¶Îı¾±ê¼ÇÓïÑÔÖ®ËùÒÔ³ÆΪ³¬Îı¾±ê¼ÇÓïÑÔ£¬ÊÇÒòΪÎı¾Öаüº¬ÁËËùν¡°³¬¼¶Á´½Ó¡±µã¡£
Vue.jsÊÇÒ»ÖÖJS¿â£¬ËüʹÓüòµ¥£¬ÈÝÒ×ÉÏÊÖÄܹ»ÊµÏÖÏìÓ¦µÄÊý¾Ý°ó¶¨ºÍ×éºÏµÄÊÓͼ×é¼þ

Vue.jsÆäʵÊÇÒ»¸öJavaScript UI¿â£¬ËüÊÇÒ»¸ö¹¹½¨Êý¾ÝÇý¶¯µÄ web ½çÃæµÄ½¥½øʽ¿ò¼Ü£¬µÄÄ¿±êÊǾ¡¿ÉÄܼòµ¥µÄ ʹÓÃAPI ʵÏÖÏìÓ¦µÄÊý¾Ý°ó¶¨ºÍ×éºÏµÄÊÓͼ×é¼þ£¬½ÓÏÂÀ´ÔÚÎÄÕÂÖн«ºÍ´ó¼ÒÏêϸ½éÉÜΪʲôʹÓÃVue.js

¡¾ÍƼö¿Î³Ì£ºVue.js¡¿

ʹÓÃvue.jsµÄÀíÓÉ

vue.jsÉÏÊÖÈÝÒ×£¬¼òµ¥¶øÇÒÓµÓкܶ๤¾ß°üº¬API£¬ÐÔÄܵȣ¬ËüÖ»ÐèÒªÒ»¸ö½Å±¾¾Í¿ÉÒÔÌåÑéËüµÄ¾«²Ê

ÿ¸öVueÓ¦ÓóÌÐòµÄÈë¿Úµã¶¼ÊÇͨ¹ýʵÀý´´½¨µÄ¡£È»ºó£¬¸ÃʵÀý½«ÅäÖÃÓ¦ÓóÌÐòµÄÆäÓಿ·Ö£¬²¢ÔÚÓ¦ÓóÌÐòÀ©Õ¹Ê±µÃµ½×Ó³ÉÔ±

Àý£º

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <p>{{ message }}</p>
</div>
<script type="text/javascript">
	new Vue({
  el: '#app',
  data: {
    message: 'ÕâÊÇÎҵĵÚÒ»¸öVue.jsÎļþ!'
  }
})
</script>

Ч¹ûͼ

ͨ¹ý´«ÈëÒ»¸ö¶ÔÏóÀ´ÅäÖÃʵÀý£¬¸Ã¶ÔÏó°üº¬ÓйØÓ¦ÓóÌÐòµÄÐÅÏ¢ÒÔ¼°Ó¦¸Ã¼ÓÔصÄλÖá£

elÊôÐÔ£ºÖ¸¶¨Ó¦¸Ã°²×°ÔÚÄĸöÔªËØÉÏ£¬ÖµÊÇÉèÖõÄIDÔªËØ¡£

dataÊôÐÔ£ºÒª°ó¶¨µ½ÊÓͼÊý¾ÝÖеÄÖ¸¶¨Êý¾Ý£¬¸ÃÊôÐÔ¾ßÓпÉͨ¹ýÄ£°å·ÃÎÊÖµµÄ¶ÔÏó¡£

×¢Ò⣺´øIDµÄdiv appÊÇÎÒÃÇ°²×°Ó¦ÓóÌÐòµÄµØ·½

ÓÃË«»¨À¨ºÅ½«Êý¾Ý°ó¶¨µ½Ä£°åÉÏ£¬ÔÚ°ó¶¨ÅäÖÃÆÚ¼äÓÃmessageÔÚdata¶ÔÏóÖÐÖ¸¶¨Öµ¡£

Êý¾Ý°ó¶¨

Ìõ¼þ

JS¿ò¼ÜÖÐÒ»¸ö·Ç³£ÓÐÓõŦÄÜÊÇÄܹ»ÔÚ¾ö²ß֮ǰ½«Êý¾Ý°ó¶¨µ½ÊÓͼ¡£ÎÒÃÇ¿ÉÒÔ¸æËßVue½öÔÚÖµ½âÎöΪtrueʱ²Å½øÐаó¶¨

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <h2 v-if="demo1">ΪtrueʱÏÔʾdemo1</h2>
  <h2 v-else="demo2">ΪtrueʱÏÔʾdemo2</h2>
</div>
<script type="text/javascript">
	new Vue({
  el: '#app',
  data:{
   demo1:true
  }
})
</script>

Ñ­»·

¿ÉÒÔΪÎÒÃÇÌṩһ¸ö¼òµ¥µÄAPIÀ´Ñ­»··ÃÎÊÒ»×é°ó¶¨Êý¾Ý£¬¸Ãv-forÖ¸ÁÆäÓÃÓÚ´ËÄ¿µÄ£¬ÎÒÃÇÖ»ÐèÒªÒ»¸öÊý¾ÝÊý×飺

ÐèÒªÓõ½site in sites ÐÎʽµÄÌØÊâÓï·¨£¬ sites ÊÇÔ´Êý¾ÝÊý×é²¢ÇÒ site ÊÇÊý×éÔªËصü´úµÄ±ðÃû

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <ul>
  	<li v-for="site in sites">{{site.name}}</li>
  </ul>
</div>
<script type="text/javascript">
	new Vue({
  el: '#app',
  data:{
   sites:[
{name:'ÕÅÈý'},
{name:'ÀîËÄ'},
{name:'ÍõÎå'}
   ]
  }
})
</script>

δ±êÌâ-4.jpg

Ë«Ïò°ó¶¨

VueÖеÄË«Ïò°ó¶¨·Ç³£¼òµ¥£¬Ö»ÐèÒªÒ»¸öÖ¸Áî¾Í¿ÉÒÔʵÏÖv-model¡£ÈÃÎÒÃÇͨ¹ý½«v-modelÖ¸Á¼Óµ½Îı¾ÊäÈ벢ͬʱÏÔʾÊý¾ÝÀ´¿´µ½input¿òÖеÄÖµÀ´ÊµÏÖË«Ïò°ó¶¨

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
 <p>
 	<input type="text" v-model="mentor">{{mentor}}
 </p>
</div>
<script type="text/javascript">
	new Vue({
  el: '#app',
  data:{
  message:'ÕâÊÇË«Ïò°ó¶¨',
  mentor:'',
  mentors:[]
  }
})
</script>

δ±êÌâ-5.jpg

×ܽ᣺ÒÔÉϾÍÊDZ¾ÆªÎÄÕµÄÈ«²¿ÄÚÈÝÁË£¬Ï£Íû¶Ô´ó¼ÒѧϰÓÐËù°ïÖú¡£

ÒÔÉϾÍÊÇΪʲôҪʹÓÃVuejsµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢phpÖÐÎÄÍøÆäËüÏà¹ØÎÄÕ£¡


ÍøÕ¾½¨ÉèÊÇÒ»¸ö¹ãÒåµÄÊõÓº­¸ÇÁËÐí¶à²»Í¬µÄ¼¼ÄܺÍѧ¿ÆÖÐËùʹÓõÄÉú²úºÍά»¤µÄÍøÕ¾¡£



¹Ø¼ü´Ê£ºÎªÉ¶ÒªÔËÓÃVuejs




Copyright © 2012-2018 ÕùÔõ·ÓÉÍø(http://www.zhengzen.com) .All Rights Reserved ÍøÕ¾µØͼ ÓÑÇéÁ´½Ó

ÃâÔðÉùÃ÷£º±¾Õ¾×ÊÔ´¾ùÀ´×Ô»¥ÁªÍøÊÕ¼¯ ÈçÓÐÇÖ·¸µ½ÄúÀûÒæµÄµØ·½Ç뼰ʱÁªÏµ¹ÜÀíɾ³ý£¬¾´Çë¼ûÁÂ!

QQ:1006262270   ÓÊÏä:kfyvi376850063@126.com   ÊÖ»ú°æ