Vue.js是一种JS库，它使用简单，容易上手能够实现响应的数据绑定和组合的视图组件
Vue.js其实是一个JavaScript UI库，它是一个构建数据驱动的 web 界面的渐进式框架，的目标是尽可能简单的 使用API 实现响应的数据绑定和组合的视图组件，接下来在文章中将和大家详细介绍为什么使用Vue.js
【推荐课程：Vue.js】
立即学习“前端免费学习笔记（深入）”；
使用vue.js的理由
vue.js上手容易，简单而且拥有很多工具包含API，性能等，它只需要一个脚本就可以体验它的精彩
每个Vue应用程序的入口点都是通过实例创建的。然后，该实例将配置应用程序的其余部分，并在应用程序扩展时得到子成员
例：
new Vue({ el: '#app', data: { message: '这是我的第一个Vue.js文件!' }}){{ message }}
登录后复制
效果图
通过传入一个对象来配置实例，该对象包含有关应用程序的信息以及应该加载的位置。
el属性：指定应该安装在哪个元素上，值是设置的ID元素。
data属性：要绑定到视图数据中的指定数据，该属性具有可通过模板访问值的对象。
注意：带ID的div app是我们安装应用程序的地方
用双花括号将数据绑定到模板上，在绑定配置期间用message在data对象中指定值。
数据绑定
条件
JS框架中一个非常有用的功能是能够在决策之前将数据绑定到视图。我们可以告诉Vue仅在值解析为true时才进行绑定
new Vue({ el: '#app', data:{ demo1:true }})为true时显示demo1
为true时显示demo2
登录后复制
循环
可以为我们提供一个简单的API来循环访问一组绑定数据，该v-for指令将其用于此目的，我们只需要一个数据数组：
需要用到site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名
new Vue({ el: '#app', data:{ sites:[{name:'张三'},{name:'李四'},{name:'王五'} ] }})
- {{site.name}}
登录后复制
双向绑定
Vue中的双向绑定非常简单，只需要一个指令就可以实现v-model。让我们通过将v-model指令附加到文本输入并同时显示数据来看到input框中的值来实现双向绑定
new Vue({ el: '#app', data:{ message:'这是双向绑定', mentor:'', mentors:[] }}){{mentor}}
登录后复制
总结：以上就是本篇文章的全部内容了，希望对大家学习有所帮助。
以上就是为什么要使用Vuejs的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2735883.html
