vue初识

什么是vue？

• vue.js是目前最火的前端框架。
• vue.js是前端的主流框架之一。
• vue是一套构建用户界面的框架，只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。
• 主要负责MVC中的V这一层，主要工作就是和界面打交道。
• 框架的优点（减少不必要的DOM操作，提高渲染效率，双向数据绑定）

框架和库的区别

• 框架：是一套完整的解决方案；对项目对侵入性较大，项目如果需要更换框架，则需要重新架构整个项目
  1. Node中的express
• 库(插件)：提供某一个小功能，对项目的侵入性小，如果某个库无法完成某些要求，可以很容易切换到其他库实现需求
  1. 从jquery切换到Zepto

MVC和MVVM的关系

• MVC是后端的分层开发概念

• MVVM是前端视图层概念，主要关注于视图层分离，也就是说：MVVM把前端视图层分为了三部分Model，View，VM(ViewModel)
  （图是看视频一点点截屏来的呢，感觉说的不错的呢）

  
  MVC和MVVM的关系图解

代码解读MVVM

1. 导入Vue的包

<script src="lib/vue.min.js"></script>

2. 创建一个vue的实例

//当我们导入包后，浏览器当内存中就多了一个Vue的构造函数
//我们new出来的vm对象就是MVVM中的VM调度者
 var vm = new Vue({
    el: '#app',
        //这里的data就是MVVM中的M，专门用来保存每个页面中的数据
    data: {//data属性中存放的是el中要用到的数据
       msg: 'Yes,Study Begin'//通过Vue提供指令很方便的就把数据渲染到页面，程序员不再手动操作DOM，前端Vue之类的框架不提倡手动操作DOM
    }
 })

3. 将来new的Vue实例会控制整个元素中的所有内容

<!--Vue实例所控制的区就是v-->
<div id="app">
    <p>{{msg}}</p>
</div>