为啥要使用Vuejs

<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>
双向绑定
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>
总结：以上就是本篇文章的全部内容了，希望对大家学习有所帮助。
以上就是为什么要使用Vuejs的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：为啥要运用Vuejs