Vuejs简介

一、网站交互方式

①传统的开发方式：PHP 中，页面和服务端糅合在一起，在这种项目中服务端占比更重，因为绝大多数都服务端技术，绝大多数网站都是这样的方式

②前后端分离方式：服务端只处理数据（不关心页面），提供接口，分离多页（处理页面，通过接口和服务端交互）

③当前主流方式是前后端分离方式，传统的混合开发方式页面和数据糅杂在一起很难维，所以慢慢的把服务端处理视图的业务转变到了前端

二、JavaScript主流前端框架

①Angular：诞生于2009年，后为Google所收购。是一款优秀的前端JS框架。AngularJS有着诸多特性，最为核心的是：MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等

②React：React 起源于 Facebook 的内部项目。React主要用于构建UI。在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

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

三、Vuejs介绍

①是一个前端JavaScript框架，可以提高网站应用程序开发效率，可以开发单页应用程序，可以融入到不同项目中。

②发展历史：0.6版本（2013.6）-----1.0版本（2015.10）-----2.0版本（2016.10）----2.5版本（至今），参考https://github.com/vuejs/vue/releases

③相关资源：GitHub、中文官网

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

四、安装

①直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量

②CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

③npm：

$ npm install vue

五、示例：输出 hello world

<!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>vue</title>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello world!'
            }
        })
    </script>
</body>
</html>