一、vue是什么

vue.js是一个用于创建用户界面的JavaScript框架,也是一个**单页面应用**的Wab框架。

二、vue的特点

1.响应式编程
    这里的响应式并不是媒体查询的响应式布局，而是基于MVVM实现的数据和页面的响应式。
2.组件化
    Vue将组成一个页面的heml、css、js合并到一个页面中，可以提供给其他页面或组件重复使用，大大提升了开发效率。

三、vue的优势

 轻量级框架、简单易学、双向数据绑定、虚拟DOM等

四、vue的基本使用

1.创建一个vue的实例，并且传入配置对象（el）

<script>
    const vm = new Vue({
      el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
      // el: document.getElementById('#root'), // 也可以通过document点出来
      data: {// 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
        student: {
          name: '李四',
          age: 18
        }
      }
    })
  </script>

2.创建一个容器，容器中代码符合html规范，只是混入了vue语法，容器中的代码被称为【Vue模板】

 <body>
    <div id="root">
      <!-- 使用插值语法 {{}}  ，在 {{}}  中写入js 表达式  -->
      <h1>姓名:{{student.name}}</h1>
      <h1>年龄:{{student.age}}</h1>
    </div>
  </body>

在我们更改data中的数据时，容器中所用到这个属性的地方都会同步更改，做到数据与视图分离。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <!-- 使用插值语法 {{}}  ，在 {{}}  中写入js 表达式  -->
      <h1>姓名:{{student.name}}</h1>
      <h1>年龄:{{student.age}}</h1>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
      // el: document.getElementById('#root'), // 也可以通过document点出来
      data: {
        // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
        student: {
          name: '李四',
          age: 18
        }
      }
    })
  </script>

注意：
在学习的过程中我们可以直接使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
在线引入vue，也可去官网下载后本地引入
后期项目也可使用cli来创建项目并引入vue

1.初识Vue

一、vue是什么

二、vue的特点

三、vue的优势

四、vue的基本使用