01、Vue-入门基础

Vue中文网

一、MVVM框架

• MVVM框架好处

  - 针对具有复杂交互逻辑的前端应用
  - 提供的结构抽象
  - 主要目的是为了解决应用程序展示结构、业务逻辑之间的紧耦合关系
  - 通过ajax数据持久化，保证前端用户体验(部分异步刷新)

MVVM框架
Angular.js/React.js/Vue.js
Angular.js 文件大小在60KB左右，相对学习曲线较为波折，而且每个版本的语法改动特别大；
React.js 文件大小40KB左右，需要学习专门的语法；
Vue.js 文件大小18KB左右，借鉴Angular的指令和React组件化；

MVVM框架

MVC组成

• 模型(Model): 处理数据和业务逻辑
• 视图(View): 向用户展示数据的界面
• 控制器(Controller): 组织调度相应的处理模型

二、Vue简介

Vue是一个前端的双向绑定类的框架，新的Vue版本参考了React的部分设计，当然也有自己独特的地方，比如Vue的单文件组件开发方式都很有创新，另外Vue自身的一些绑定的语法、用法等都非常精炼，很容易上手，而且第三方的插件都非常丰富，社区非常活跃，最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发、SPA等现代化前端开发。

  - 是一个轻量级MVVM框架(大小只有18KB)
  - 数据驱动+组件化的前端开发
  - 社区完善

三、Vue入门

Vue 可以直接把它当做一个js库使用，可以很简单的接入到你的项目中，或者你只需要使用双向数据绑定。

  需求: 网页中有个div标签，而需要有json对象存储数据，把json对象上的数据放到div。

  - 在页面中引入Vue库
  

  - 在页面中div标签添加一个id，例如app
    


  - 创建Vue的对象，并把数据绑定到上面创建好的div上去

    
        
        
        
        
    

    
        
        

            
            {{message}}
        
    

    
    

四、Vue核心思想

• 数据驱动(即是双向的数据绑定)
  DOM是数据的一种自然映射。双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的。Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的开发时代。

  
  
  

  数据驱动

• 组件化
  扩展HTML元素，封装可重用的代码。

组件设计原则

• 页面上每个独立的可视/可交互区域视为一个组件(例如头部尾部)；
• 每个组件对应一个工程目录，组件所需要的各种资源在该目录下就近维护；
• 页面不过是组件的容器，组件可以嵌套自由组合，形成完整的页面；

五、Vue组件

Vue组件*.vue由三部分组成分别是HTML代码、javascript脚本、css样式。【官方推荐，将三个部分都写到一个.vue文件中】

Vue组件组成

通过webpack打包生成对应代码

六、vue的安装

• 直接通过script引入

直接下载并用