大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
博客园：
CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、Vue.js 概述 1、什么是Vue.jsVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）。
在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
2、框架和库的区别框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。（比如从 jQuery 切换到 Zepto 等）
3、MVC 与 MVVM 区别与联系MVC 是后端的分层开发概念；
M 为数据层，V 视图层，C 逻辑层。
MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel。
其中 VM 是中间层，负责协调 V 层 和 M 层，V 层即视图层（对应的就是DOM元素），就是我们的网页 html 结构，M 层就是网页里面的数据（对应的就是JavaScript对象）。
下图为 MVC 和 MVVM 的联系图示：
Vue.js 的基本结构主要分三块：
1、导入 Vue 的包；
2、body 中的设置一个被 vue 控制的区域（元素）；
3、在 script 中 new 一个 vue 实例，参数为一个对象，对象中一般有三个元素为 el，data，methods
el 则关联 body 中被 vue 控制的元素的 id 或 类名。
data 则存放页面的数据；
methods 为页面事件对象集合。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 1. 导入Vue的包 --> <script src="http://www.likecs.com/lib/vue-2.4.0.js"></script> </head> <body> <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 --> <!-- Vue 实例所控制的这个元素区域，就是我们的 V --> <div> <p>{{ msg }}</p> </div> <script> // 2. 创建一个Vue的实例 // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数 // 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者 var vm = new Vue({ el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域 // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的 data: { // data 属性中，存放的是 el 中要用到的数据 msg: '欢迎学习Vue'; // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】 } }) </script> </body> </html>{{ msg }} ：在 html 中可以直接使用 双重大括号 的方式使用 data 中的数据。
三、Vue 指令 1、插值表达式插值表达式就是以双重大括号 ，类似 {{ msg }} 的形式插入到 html 代码中。
2、v-cloak在 使用 {{ msg }} 的方式插入数据的时候，如果网速特别慢的话， {{ msg }} 所代表的值不会立即显示出来，而会显示 {{ msg }} 这个字符串本身，怎么解决这个问题呢？
使用 v-cloak 和 CSS 表达式结合，能够解决插值表达式闪烁的问题，这样会在网络未加载完时，不显示字符串本身。
示例：
<style> [v-cloak] { display: none; } </style> ... <p v-cloak> {{ msg }} </p> 3、v-text