前言：
此刻小伙伴们对“js兼容ie8”可能比较关切，兄弟们都想要分析一些“js兼容ie8”的相关内容。那么小编在网络上网罗了一些有关“js兼容ie8””的相关文章，希望姐妹们能喜欢，大家一起来了解一下吧！内容
导读：为什么要用 Vue.js
使用任何新框架和库其实都是为了解决我们当前开发所遇到的问题，或者能提升其开发效率。每个人的成本就是时间，好的工具则能够帮助我们节约时间，从项目角度而言，也就帮我们节约了成本。而 Vue.js 就是一款能降低开发成本、提升开发效率的工具，它能帮助我们从繁琐的 DOM 操作中解脱出来。开发中，我们设定好正确视图和数据的规则后，只需要关注数据的变化，视图上的内容是会随之变化的，而不需要我们手动再操作 DOM 元素进行修改。
此外，前端开发的模式也逐渐开始往组件化方向转变，Web Components 的概念也开始逐渐成为标准，拥有自己独立的 HTML 片段、JS 文件以及 CSS 样式，这样在使用时可以不用担心对自己本身业务上的代码造成影响。Vue.js 对这一概念也进行了自己的实现，这样对于提升代码复用、拆解大型项目，都有着很好的帮助。
兼容性
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
内容列表
本系列将从零开始介绍 Vue.js，内容安排如下：
Vue 的基础概念及构建开发环境网页开发的基础内容：数据渲染、事件绑定和表单处理提升代码复用性（1）：指令和组件提升代码复用性（2）：混合属性、过滤器、过渡和插件开发线上项目必经过程：前后端联调及打包发布数据请求、文件上传、解决跨域问题第三方库与业务代码分离、多页面分离资源引用单页应用的基础：vue-router路由声明及使用利用导航守卫实现权限控制路由优化：解耦与按需加载组件间通信及构建大型应用所需的状态管理：VuexVuex 的基本用法Vuex 的常见使用技巧实战：日历式的 TODO List提升 SEO 和加快首屏显示时间：服务端渲染预渲染服务端渲染官方库：vue-server-renderer服务端渲染框架：Nuxt.js编写高质量的 Vue 项目：测试用例Karam + Mocha：单元测试Nightwatch：E2E 测试
期望能使帮助开发者快速掌握 Vue.js，了解其使用方式和使用场景，并构建可上线的真实项目。
适合阅读人群
本系列的文章适合以下人群阅读：
对 Vue.js 感兴趣但尚未使用的前端开发者；对 Vue.js 处于实验阶段但尚未正式上线或使用规模还不大的开发者。
版本约定
本系列内容采用 Vue.js 版本为 2.5.6，大部分代码都会使用 ES6，希望读者对 ES6 有一定的了解。
第01课：Vue 的基础概念及构建开发环境
数据与视图
Vue.js 最大的特点之一就是数据驱动视图，也就是说当数据发生变化时，视图（即用户界面）也随之发生变化，而不需要我们手动去更新 DOM 元素。
上图中的视图很好理解，就是我们开发的用户页面，即 DOM 元素；模型则为在这个页面上包含的数据以及业务逻辑，即 JavaScript 对象；而视图模型就是将这两者联系起来的方式，也就是通过 Vue.js 来编写的内容。
组件
组件是 Vue.js 中的重要概念，大部分的应用界面都可以被抽象成组件或多个组件的组合。简单来讲，组件就是一段封装好的、拥有自己独立 HTML 模板、CSS 样式和 JS 的代码段，且被使用的时候不会影响页面上的其他代码。而在 Vue.js 中，可以这么去理解组件：
自定义的标签名；独立的 HTML 模板和 CSS 样式；独立的作用域，即包含自己的数据业务模型，也就是 Vue.js 实例。
如果说前端之前考虑的都是如何开发“页面”，那在使用 Vue.js 的过程，我们需要把“页面”这一个略显庞大、多样的概念逐渐转变成高内聚、单一功能的“组件”概念，而页面则变成了多个单一功能组件叠加后的结果。
Vue.js 的 Hello world
按照惯例，我们还是先会使用 Vue.js 来构建一个 Hello World 的页面。
首先是引用方式，可以直接在 HTML 插入 script 标签，像引用任何一个简单的 JS 文件一样。
<script src=""></script>
引入后得到了一个全局 Vue 的对象，可以直接用 new 的方式新建一个 Vue 的实例：
var vm = new Vue({ ... })
然后下一步就是如何与 DOM 元素建立联系，并且渲染内容了。
<html> <div id="app"> {{ message }} </div> <script src=""></script> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello World!' } }) </script></html>
如图所示，我们得到了一个理所当然的 Hello World!
从上面这个例子可以看到几个具体的用法：
el 选项为一个元素选择器，标明了当前 vue 实例所挂载的根元素，也就是确定了 vue 实例影响的范围，在这个元素之外的 DOM 元素不受当前 vue 实例。data 则是一个对象，声明了当前实例的数据（也就是 Model 层面的内容）。在 HTML 中，使用双大括号{{ }}来标明这一部分内容是需要被实例中的数据重新渲染的。我们称之为声明式渲染（Declarative Rendering）。
当然，如果 Vue.js 仅仅做了这一次数据渲染的工作，那就变成了前端模板引擎，而不是什么 mvvm 框架了。
那如何体现 Vue.js 的数据驱动视图的特点呢？我们可以手动调用上例中的 vm，修改 vm 中的 message 数据（可以在浏览器的 console 里面直接修改）。
vm.message = 'Hello GitChat'
可以看到 #app 元素中渲染的内容就变成了“Hello GitChat”，而在这个过程中，我们没有手动去获取并修改 DOM 值，这一操作就完全交由 Vue 来实现了，我们只是事先声明好了渲染规则，也就是建立了数据与视图的绑定。
Vue 实例和选项
Vue 的实例就是通过 new Vue() 的方式建立的，每个 Vue 的应用也都是由此开始的。
在创建 Vue 实例的时候，我们可以传入一个选项对象，大致包含以下几种，这里先简单介绍一下。
与视图、模板相关的
el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例，只在由 new 创建的实例中遵守。template：一个字符串模板。render：渲染函数，接收createElement方法来创建VNode。
与数据、业务逻辑相关的
data：实例的数据对象。methods：实例方法，可用于监听 DOM 事件。props：作为组件时，接收到外部传递进来的参数。computed：计算属性。watch：观察模式，监听数据的变化并执行对应的函数。
生命周期相关钩子函数
beforeCreate()created()beforeMount()mouted()……
其他
components：需要使用的其他 Vue 组件对象。mixins：混合对象。
这里没有必要一下子全部记住或理解，这些选项的使用方式和规则都会逐渐贯穿在整个课程当中，在使用时会逐一详细解释。
实例生命周期
Vue 实例在被创建之前有一系列的初始化过程。例如，设置数据监听、编译模板并挂载到指定 DOM 元素上、绑定事件等，而在实例被销毁后也需要进行取消监听、移除元素等操作。这一个从开始到结束的过程称之为实例的生命周期，而在整个过程中，Vue.js 会在特定的时机运行特定的函数，并允许用户将自己的业务代码传递进来，这些函数被称之为生命周期钩子函数（Lifecycle Hooks）。
这是 官网 给出生命周期图，具体所包含生命周期包括 create（创建）、mount（挂载）、update（更新）、destory（销毁）阶段还有一个activated（激活）阶段（需要包裹在 < keep-alive> 标签下才会触发）。
下面来看下这些阶段所包含的钩子函数和使用区别：
beforeCreate：最先被调用，此时实例已经创建，但尚未绑定数据，进行数据监听。created：此时已建立数据监听，与 beforeCreate 最大的区别在于，此时在函数内可以通过 this 来访问到 data 对象中的数据。beforeMount：在 created 之后调用，但此时尚未挂载，所以实例的模板还并不存在当前的 HTML 文档中，无法获取 DOM。mounted：真实挂载到 HTML 文档中，可以获取 DOM 值。beforeUpdate：数据更新前触发，可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。updated：由数据更改导致的虚拟 DOM 重新渲染后调用该函数。beforeDestory：实例销毁之前调用，在此函数内，this 实例仍然完全可用。destroyed：实例彻底被销毁，并解绑之前的所有数据和事件。activated：当组件被 < keep-alive> 包裹并激活时调用。deactivated：与 activated 相对应，当组件被停用时调用，被 < keep-alive> 包裹的组件并不会直接被销毁，虽然从视觉上是被移除了，但并不会调用 beforeDestory 和 destroyed 函数，下次被激活时组件也同样不触发 beforeCreate 和 created 函数。
具体效果及运行顺序可以参考该 示例。
使用 Vue-cli 构建开发环境
刚开始的时候，我们经常会纠结于如何设置目录结构，特别是在多人开发构建大型项目的时候，如果目录没有一个清晰的描述和规划往往会导致项目的混乱和冲突。Vue.js 提供了一个官方的命令行工具 Vue-cli，能帮助我们快速构建单页应用结构，并提供许多方便开发的功能：
热重载，无需手动刷新页面即可看到修改效果。预处理器，可以使用 ES6 或 SASS/LESS 等不能直接在浏览器中使用的语言开发，将其编译成可执行的 JS 或 CSS。支持与 eslint 代码风格检查，能保证团队代码风格一致。打包发布，将业务代码合并压缩成单个 CSS 和 JS 文件，减少 HTTP 请求。代理请求，方便前后端分离的项目，本地可直接请求其他远程服务器上的后端接口服务。
那如何来安装和使用 vue-cli 呢？非常方便，首先需要安装 Node 和 NPM 环境，可以访问 官网 直接下载对应操作系统的安装包进行安装。
安装成功之后，通过命令行安装 vue-clic：
npm install -g vue-cli
这样我们就可以全局使用 vue-cli 命令行了。vue-cli 支持以下 6 种模式的脚手架：
Webpack：使用 Webpack 作为构建工具，而且包含了热更新、代码检查、测试等配套工具的安装。webpack-simple：简化的 Webpack 版，仅包含了 vue-loader。browserify：与 Webpack 型脚手架功能类似，但用 browserify 替换掉 Webpack。browserify-simple：同 webpack-simple。pwa：pwa（progressive web app）渐进式网页应用模板，基于 Webpack 构建。simple：最简单的模板，一个 HTML 引用了 Vue.js。
我们可以使用以下命令行来选择脚手架进行安装：
vue init <template-name>(上面6种名称任选其一) <project-name>(新建的项目名)
以 Webpack 为例：
我们可以依次输入项目名称、描述、作者等描述信息，然后也可以选择所需要的功能，如路由、ESlint、单元测试、E2E 测试等。
生成的目录结构如下：
build：Webpack 相关的配置文件，包含热加载、编译、代码风格检查等config：基础配置文件，包括设置代理服务，打包后的文件路径、文件名等src：业务代码目录assets 资源文件components 组件文件router 前端路由App.vue 根组件main.js 入口文件、引入根组件、创建 Vue 实例static：静态资源文件目录test：测试文件目录index.html：HTML 文件模板，也就是 Vue.js 挂载的模板
然后我们就可以根据上图的提示，进入文件目录，安装依赖并运行项目
npm insall
npm run dev
Webpack 在此的作用是将可以分析项目结构，根据依赖，加载对应的模块，并对指定的模块（如 ES6 编写的 JS，SCSS 编写的 CSS）进行编译，使之能在浏览器中正常运行。
只要使用合适的 Loader，Webpack 就可以将所有文件都当做模块来进行处理，输出你想要的结果。而在此将使用Vue-loader（Vue-cli 已在 Webpack 脚手架中已配置好）使得项目的开发更清晰，更符合组件化的特点。
所以我们在该脚手架中看到的 App.vue 的写法会是：
这和首个 Hello World 的例子看起来并不一样，在 .vue 文件中，HTML、JS 和 CSS 分别被包含在 template、script、style 标签中，这和我们之前说的组件化相当契合，独立的模板和样式，以及 JS 代码。当然，这样的写法直接放到浏览器中当然是无法运行的，所以在此配置了 Webpack + Vue-loader，可以将这样写法的代码编译成浏览器可执行的 HTML、JS 和 CSS 代码。
小结
以上大致介绍了 Vue.js 中的数据绑定和组件化两大重要概念，实现了第一个 Vue.js 的 Hello World。Vue.js 可以接受一个选项对象，创建实例，每个实例包含自己的生命周期。在编写大型项目的时候，我们往往会使用 vue-cli 来构建项目，并且通过 Webpack 和 Vue-loader 可以用组件化的方式来开发 Vue.js 项目。
标签： #js兼容ie8
