1. 笔者的话

2. 开发框架比较

2.1 React 与 VUE 共同点

2.1.1 数据驱动视图

2.1.2 组件化

2.1.3 Virtual DOM

2.2 React 与 Vue不同点

Vue和React两者虽然都是用于构建用户界面的框架，但是也有很大的差异，首先二者核心的思想就不同。

2.2.1 核心思想不同

2.2.2 组件写法差异

2.2.3 响应式原理不同

3. 前备知识

html、css、JavaScript、Ajax
HTML基础知识
HTML详解head标签
CSS基础知识
笔者努力学习更新中

4. Vue基础简介

5.第一个Vue程序

安装vue的当时有多种昂，可以通过URL引用来使用vue框架，也可以将vue.js下载在本地，通过 <script> 标签引入

如下是通过URL引用来安装vue框架

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!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">
    {{ message }}
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:" Hello World! Vue "
      }
    })
  </script>
</body>

</html>

显示效果

5.1 el挂载点

Vue实例的作用范围是什么呢？

是否可以使用其他的选择器？

是否可以设置其他的dom元素呢？

5.2 data:数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时,遵守js的语法即可

我们可以演示一下在data中添加一些基本数据类型和数组数据类型

<!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">
    {{ message }}
    <ul>
        <li>{{arr[0]}}</li>
        <li>{{arr[1]}}</li>
        <li>{{arr[2]}}</li>
        <li>{{arr[3]}}</li>
    </ul>

    <ol>
        <li>{{objArr[0].name}}</li>
        <li>{{objArr[1].name}}</li>
        <li>{{objArr[2].name}}</li>
    </ol>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="./js/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:" Hello World! Vue ",
        arr:[1,2,3,4],
        objArr:[
            {name:"lixu"},
            {name:"starry"},
            {name:"ahoy"}
        ]
      }
    })
  </script>
</body>

</html>