VUE全家桶 REACT jQuery

VUE

VUE.js是一款JavaScript框架，Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
VUE只关注视图层，Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
他借鉴了angular的模板和数据绑定技术，借鉴了react的组件化和虚拟DOM技术，当然，该技术也存在一个Vue全家桶，例如vue脚手架：vue-cli，ajax请求：vue-resource，路由：vue-router，状态管理：vuex，图片懒加载：vue-lazyload，移动端UI组件库：min-ui，PC端组件库：element-ui，页面滑动：vue-scroller等等插件；

VUE使用

下面展示一些 内联代码片。

<div id="app">
    <input type="text" v-model="username">
    <p>Hello {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //创建Vue实例
    const vm = new Vue({ // 配置对象
        el:'#app', // element:选择器
        data:{ //数据（Model）
            username:'世界'
        }
    })
</script>

使用vue首先引入Vue.js，然后创建Vue对象，其中el表示指定的根element选择器，data是指初始化数据，双向数据绑定使用v-model，显示数据使用语法：{{xxx}}；
vue的MVVM的体现就是：model代表模型，上述代码就是数据对象（data）,view代表视图，就是vue中的模板页面，viewModel代表是视图模型（vue实例）；

使用vue-cli创建模板项目

vue-cli是vue官方提供的脚手架工具，首先确认安装了node和npm，最好安装一个cnpm，使用方法如下：

npm install -g vue-cli
vue init webpack vue_demo 其中 vue_demo是项目名
cd vue_demo
npm install或者npm run dev

VUE 组件（自定义组件）

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

https://www.runoob.com/vue2/vue-component.html

VUE UI组件库

• ELEMENT-UI

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。Element是饿了么前端开源维护的Vue UI组件库，更新频率还是很高的，基本一周到半个月都会发布一个新版本。组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。没有实际使用过，网上的Element教程和文章比较多。Element应该是一个质量比较高的Vue UI组件库。
Element官网：http://element.eleme.io/#/zh-CN

• iView
  iView 是一套基于 Vue.js 的 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。
  iView官网：https://www.iviewui.com/

• Vue Antd

这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言，Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉Ant Design的在使用Vue时，很容易的上手。
Ant Design Vue官网：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

• Mint UI组件库
  Mint UI基于 Vue.js 的移动端组件库，同样出自饿了么前端的项目。Mint UI是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于Mint UI来讲的，开发移动端web项目还是很方便，文档也很简介明了。很多页面Mint UI组件都已经封装好，基本可以照着例子写，简单的调整一下就可以实现。不过，在GitHub上看最后一次代码提交在2018年1月16日。不知道是项目比较稳定没有更新，还是项目有被废弃的可能。
  Mint UI官网：http://mint-ui.github.io/#!/zh-cn

• Bootstrap-Vue UI组件库
  Bootstrap-VUE提供了基于vue2的Bootstrap V4组件和网格系统的实现，完成了广泛和自动化的WAI ARA可访问性标记。Bootstrap 4是最新发布的版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。想当初刚流行响应式网站的时候，Bootstrap是世界上最受欢迎的建立移动优先网站的框架，Bootstrap可以说风靡全球。就算放在现在很多企业网站都是采用Bootstrap做的响应式。Bootstrap-Vue可以让你在Vue中也实现Bootstrap的效果。
  Bootstrap-Vue官网：https://bootstrap-vue.js.org/

Vue.js Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise（ES6中用于处理异步的） 的 HTTP 库，可以用在浏览器和 node.js 中。
Github开源地址： https://github.com/axios/axios
GET读取接口json数据：
GET 实例

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})