什么是Vue
是目前最火的前端框架，React是最流行的一个前端框架 (React除了开发网站，还可以开发手机App，Vue语法也可以用户进行手机App开发的，需要借助于Weex)
vue.js是前端主流框架之一，和Angular.js、React.js一起，并称为前端主流三大框架！
vue.js，不仅容易上手，还便于与第三方你库或既有项目整合。
前端主要工作，主要负责mvc中的v这一层；主要工作是和界面打交道；
为什么要学习流行框架
- 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
- 提高开发效率的历程：原生js --jquery之类的类库—前端模板引擎—Angular.js/Vue.js
- 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多 的时间去关注业务逻辑；
框架和库的区别
- 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要换框架，则需要重新架构整个项目。
- 库（插件）：提供某一个小功能，对项目的侵入性较小，如果开某个库无法完成某些需求可以很容易切换到其它库实现需求
MVC和MVVM的区别
- MVC是后端分层开发的概念
- MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端视图层，分喂了三部分Model，VIew，VM ViewModel
![在这里插入图片描述]()
前端中的MVVM思想
-
MVVM是前端视图层的概念
- MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M，V，VM，其中VM是MVVM的核心思想，VM是M和V之间的调度者。
- M：保存的是每个页面中单独的数据(后端返回的数据)
- V：页面中的html代码
- VM：分割了M和V
- M和V互不可见，若要进行交互，必须通过VM
-
前端中使用MVVM，主要是为了我们更方便开发，因为MVVM提供了数据的双向绑定(由VM提供)
Vue中实现MVVM的基本代码
<body>
<!-- 将来new的Vue实例会控制这个元素中的所有内容 -->
<!-- Vue 实例所控制的这个元素区域,就是我们的 view层 -->
<div id="app">
<p>{{msg}}</p>
</div>
</body>
<script src="vue-2.4.0.js"></script>
<script>
/* 当我们导入包之后,在浏览器的内存中，就多了一个Vue构造函数 */
/* 创建一个vue的实例 也就是VM */
var vm = new Vue({
// el:表示当前new 的这个Vue实例,要控制页面上的哪个区域
el: '#app',
data: {// data 属性中存放的是el中要用到的数据,也就是Model
// 通过Vue提供的指令，很方便的就能把数据渲染到页面上
msg: '欢迎学习Vue'
// 前端的Vue之类的框架,不提倡我们去手动操作DOM元素了
}
});
</script>
Vue指令
-
v-cloak
用于解决网速过慢导致的插值表达式闪烁的问题 -
v-text
与插值表达式的作用一样，用于渲染数据- 默认v-text是没有闪烁问题的
- 标签中，插值表达式{{ data }}的前后可以放任意内容，而使用v-text指令后，标签里其它内容都不会被解析
-
v-html
用于渲染含有html代码的数据 -
v-bind
将数据与属性的值绑定
缩写：title=‘msg’ -
v-on
用来绑定事件的
缩写@click:‘show’ -
v-model
用来实现数据的双向绑定，只能运用在表单元素中，与表单中的value值双向绑定。而v-bind只能实现M->V的单向绑定。 -
v-for
该指令可以用来遍历数组、对象、或者数字迭代v-for使用注意事项- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题,必须在使用v-for的同时，指定唯一的字符串/数字 类型的 :key值
-
v-if 和v-show的区别
- 使用v-if时，每次都将删除或创建元素，而使用v-show，只是将元素设置为display：none/block。
- v-if有较高的性能消耗，而v-show有较高的初始渲染消耗。
- 如果元素涉及到频繁的切换，最好不好使用v-if，推荐使用v-show
- 如果元素可能永远或者很少会显示出来被用户看到，则推荐使用v-if
事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件监听器时使用事件捕获模式
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次
.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为
Vue.js与JavaScript和jQuery的不同之处
-
在我们使用JavaScript或jQuery时，做的最多的事情就是操作DOM、绑定事件等这些。比如在制定DOM中插入一个元素，并给它绑定一个点击事件：
if(showBtn){ var btn = $('<button>Click me</button>'); btn.on('click',function(){ console.log('Clicked!'); }); $('#app').append(btn); }这样的操作让我们的视图代码和业务逻辑紧耦合正在一起，随着功能不断增加，直接操作DOM会使得代码越来越难以维护。
而Vue.js通过MVVM的模式拆分为视图与数据两部分，并将其分离。因此，我们只需要关心数据部分即可，DOM的事情Vue会帮我们自动搞定，例如上面的示例可以使用Vue.js改写为：
<body> <div id="myApp"> <button v-if="showBtn" v-on:click="handleClick">Click me</button> </div> <script> new Vue({ el: '#myApp', data: { showBtn: true }, methods: { handleClick: function(){ console.log('Clicked!'); } } }); </script> </body>
总结：
Vue.js是一个构建 数据驱动 的web界面的渐进式框架，它的目标是通过尽可能简单的API来实现响应的 数据绑定 和组合的 视图组件核心是一个响应的 数据绑定系统。
Vue.js的4个特性：
- 轻量级的框架
- 双向数据绑定
- 指令
- 组件化
关于渐进式的理解：
不管是单页面还是多页面。首先都是通过声明式渲染声明每个字段，这是基本要求。 我们通常会把公共的头部和尾部抽出来，做成组件。 这时候就需要使用组件系统。
单页面应用程序往往是需要路由，这个时候需要把vue的 vue-router 拉进来做路由，如果我们做的项目足够复杂，大量的使用组件而难以去管理组件的状态，这个时候我们使用 vue-resource（vue-resource是集中来管理我们的状态的）。项目完成后需要构建工具来build我们的系统，提高我们的效果，最后形成完整的项目。
