vue.js框架的基础知识

今天就跟大家聊聊有关vue.js框架的基础知识，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

一.Vue基本介绍

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。

Vue.js 自身不是一个全能框架--它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能完美地驱动复杂的单页应用。

二：Vue的特点

遵循MVVM模式（m->model(数据对象)   v->view(视图)  vm->view model）

编码简洁，体积小，运行效率高，适合移动端/PC端

它本身只关注UI，可以轻松引入Vue插件或其他第三方库开发项目

Vue扩展插件：

1. vue-cli:Vue脚手架

2. vue-resource(axios):ajax请求

3. vue-router:路由

4. vuex:状态管理

5. vue-lazyload:图片懒加载

6. vue-scroller:页面滑动相关

7. mint-ui:基于Vue的UI组件库（移动端）

8. element-ui:基于Vue的UI组件库（PC端）

三.Vue编写“Hello vue”

引入vue.js

创建vue对象

双向数据绑定

显示数据

代码展示：

<p id="app">    //3.双向数据绑定    <input type="text" v-model="username">    //4.显示数据    <p>Hello {{msg}}</p></p>//1.引入vue.js<script type="text/javascript" class="lazy" data-src="../js/vue.js"></script><script type="text/javascript">    //2.创建vue对象    var vm = new Vue({        el:"#app",        data:{            msg:'vue'        }    })

看完上述内容，你们对vue.js框架的基础知识有进一步的了解吗？如果还想了解更多相关内容，欢迎关注编程网行业资讯频道，感谢各位的阅读。