Vue 初体验
Vue 初体验
原生 JS 写项目的问题
- 语法冗长，复杂，操作页面麻烦，效率低
JQuery 开发的问题
- 提供了简单的api，简化了操作 dom 的方式
- 但是没有对业务逻辑分层，需要维护数据和 dom 之间的同步
MVVM
- M: model，数据模型，机器可读性强的数据，也就是前端中的数据，如数组，对象等
- V: view，视图，人眼可读性强的数据，表现为前端中的 dom 对象，如输入框，弹窗等
- VM: 视图模型，将模型和视图进行双向绑定，表现为一些数据监听和数据绑定
双向绑定
Get Vue
Github: https://github.com/vuejs/vue
英文官网：https://vuejs.org/
准备
vue 是一个渐进式的 Web JS 框架，注重开发体验、通用性和性能。但是本质上还是围绕在 Html、CSS、JS 基础上的技术。所以 在学习 vue 之前以及在学习的过程中，都离不开这 "三剑客"。
HTML + CSS + JS 是基础
JS 进阶
vue 单文件组件，也就是基于 .vue 文件格式的组件化开发，都是基于 ES6 语法，所以有必要去了解和学习 ES6 的特性。
windows
工具
Git
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
-
使用官方提供的脚手架工具
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>
