ӭĸ˲վ!

վ-˲-ռ

˲վ

עĸ˲վ

ҳ > WEB > JavaScript >

ΪʲôҪʹVuejs

ʱ䣺2019-05-22  ༭˲վ      

Vue.jsһJS⣬ʹü򵥣ܹʵӦݰ󶨺ϵͼ

 

Vue.jsʵһJavaScript UI⣬һ web ĽʽܣĿǾܼ򵥵 ʹAPI ʵӦݰ󶨺ϵͼнʹϸΪʲôʹVue.js

ΪʲôҪʹVuejs

ʹ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>

Чͼ

ΪʲôҪʹVuejs

ͨһʵöйӦóϢԼӦüصλá

elԣָӦðװĸԪϣֵõIDԪء

dataԣҪ󶨵ͼеָݣԾпͨģֵĶ

ע⣺IDdiv appǰװӦóĵط

˫Žݰ󶨵ģϣڰڼmessagedataֵָ

ݰ

JSһdzõĹܹھ֮ǰݰ󶨵ͼǿԸ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>

ΪʲôҪʹVuejs

ѭ

Ϊṩһ򵥵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е˫󶨷dz򵥣ֻҪһָͿʵ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ƪµȫˣϣԴѧϰ

ĵַhttp://itbyc.com/web/javascript/20845.html
תע
һֿ֣Ҳһ:
ҳ | WEB | վӪ | CMSʹý̳ ICP14002061-1