Vue 初体验

原生 JS 写项目的问题

语法冗长，复杂，操作页面麻烦，效率低

JQuery 开发的问题

提供了简单的api，简化了操作 dom 的方式
但是没有对业务逻辑分层，需要维护数据和 dom 之间的同步

MVVM

M: model，数据模型，机器可读性强的数据，也就是前端中的数据，如数组，对象等
V: view，视图，人眼可读性强的数据，表现为前端中的 dom 对象，如输入框，弹窗等
VM: 视图模型，将模型和视图进行双向绑定，表现为一些数据监听和数据绑定

双向绑定

Get Vue

Github: https://github.com/vuejs/vue

英文官网：https://vuejs.org/

中文官网：https://cn.vuejs.org/

准备

vue 是一个渐进式的 Web JS 框架，注重开发体验、通用性和性能。但是本质上还是围绕在 Html、CSS、JS 基础上的技术。所以在学习 vue 之前以及在学习的过程中，都离不开这 "三剑客"。

HTML + CSS + JS 是基础

JS 进阶

vue 单文件组件，也就是基于 .vue 文件格式的组件化开发，都是基于 ES6 语法，所以有必要去了解和学习 ES6 的特性。

windows

工具

Git

Git教程 by 廖雪峰

node(npm)

node
nvm: node 版本管理工具 (可选)

vue 入门

vue 是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue 是一个用于构建用户界面的渐进式框架

我觉得它与其他框架的区别就是渐进式的想法，也就是“Progressive”——这个词在英文中定义是渐进，一步一步，不是说你必须一竿子把所有的东西都用上。 -作者本人在一次分享上对渐进式框架进行了阐述。

vue 只关注视图层，可以自低向上逐层应用
声明式渲染 -> 组件系统 -> 客户管路由 -> 大规模的状态管理 -> 构建工具
在声明式渲染阶段，甚至都可以像使用 jquery 一样的使用 vue，直接引入<script src="https://cdn.jsdelivr.net/npm/vue"></script> 就可以使用。

为什么要学习 vue ？

官方文档中有 vue 和其他框架的对比，vue 对比其他框架，总的来说，vue 有下面这些特点，给我们参考是否值得学习：

简单，学习曲线低
它整体思想是拥抱经典的 Web 技术，并在其上进行扩展。
组件化开发
资源丰富
Awesome-vue
轻量、性能
在 react 和 angular 等框架的对比中，Vue 有更好的性能。第三方 benchmark
完善的工具链
vue-cli、vue-router、vuex...

vue 社区

安装和运行

环境

一开始，我们不会涉及到 打包 、 编译 工具 webpack，一切从最简单的地方（Html、CSS、JS）开始。

兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

更新日志

最新稳定版本：2.5.16

每个版本的更新日志见 GitHub。

安装

首先我们需要安装 npm

npm 是 Node.js 的包管理工具，而且 npm 会在安装 Node.js 的时候顺带装进来，所以我们要安装 Node.js。

windows

下载msi文件安装即可
linux

 yum install nodejs -y

然后可通过以下方式安装 vue

CDN

可以指定具体的版本号：vue@版本号
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```
可供选择的CDN

CLI

使用官方提供的脚手架工具 vue-cli ，可以帮助我们快速启动一个 vue 工程项目，有多种 vuejs-templates 工程模板可用，开箱即用，快速开发。

   // 设备npm国内源
  npm config set  registry https://registry.npm.taobao.org/
  // 安装 vue-cli
  npm install -g vue-cli cnpm vue
  // 生成项目
  vue init webpack my-project

完整版本和运行时版本

Vue.js 的运行过程实际上包含两步。第一步，编译器将字符串模板（template）编译为渲染函数（render），称之为编译过程；第二步，运行时实际调用编译的渲染函数，称之为运行过程。

不同的版本

完整版：同时包含编译器和运行时的版本。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

独立版本

包含了编译器，支持 template 选项，可以将 tamplate 选项编译为 render 函数，它也依赖于浏览器的接口的存在，所以你不能使用它来为服务器端渲染。
运行时版本

不包括模板编译，不支持 template 选项。

可以用 render 选项。
可以在单文件组件使用，因为单文件组件的模板是在构建时预编译到 render 函数中，运行时构建只有独立构建大小的 30%，只有 16Kb min+gzip 大小。

NPM 上的 vue 默认指向运行时版本。适合和 打包 和 编译结合使用，也就是适合于单文件组件开发。vue package.json

附:
原生 dom，js，vue操作元素对比

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <!-- <div id="app"></div> -->
  <div id="app">{{ message }}</div>
</body>
<script src="../utils/vue.js"></script>
<script src="../utils/jquery.js"></script>

<!--// Dom-->
<script>
  // var message = '世界杯哪些巨星没有“辜负”中国金主？From JS'
  // document.getElementById('app').innerHTML = message
  // var message = '星座世界杯｜“风一样的男子”内马尔，你们嘲笑我无所谓, From JS'
  // document.getElementById('app').innerHTML = message
</script>

<!--// Jquery-->
<script>
  // var message = '世界杯哪些巨星没有“辜负”中国金主？From JS'
  // $('#app').html(message)
  // var message = '星座世界杯｜“风一样的男子”内马尔，你们嘲笑我无所谓, From JS'
  // $('#app').html(message)
</script>


<!--// Vue-->
<script>
  // var app = new Vue({
  //     // 绑定视图
  //   el: '#app',
  //     // 绑定数据
  //   data() {
  //     return {
  //       message: '星座世界杯｜“风一样的男子”内马尔，你们嘲笑我无所谓, From Vue'
  //     }
  //   }
  // })

  // // 更新数据，不用再关心如何绑定到试图，数据会驱动试图
  // app.message = '世界杯哪些巨星没有“辜负”中国金主？ From Vue'
</script>

</html>

Vue 初体验

Vue 初体验

原生 JS 写项目的问题

JQuery 开发的问题

MVVM

Get Vue

准备

HTML + CSS + JS 是基础

JS 进阶

windows

工具

Git

node(npm)

vue 入门

vue 是什么？

为什么要学习 vue ？

vue 社区

安装和运行

环境

兼容性

更新日志

安装

完整版本 和 运行时版本

完整版本和运行时版本