1. Vue简介

1.1 Vue是什么？

Vue是一套用于构建用户界面的渐进式JavaScript框架

构建用户界面：将数据变成用户可以看到的界面
渐进式：是指Vue可以自底向上逐层的应用
- 对于简单应用，只需要轻量小巧的核心库
- 对于复杂应用，可以引入各种Vue插件

1.2 Vue的作者以及迭代版本

在这里插入图片描述

1.3 Vue的特点

采用组件化的模式，提高代码复用率，并且让代码更好的维护

在这里插入图片描述

声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM + Diff算法，尽可能复用DOM节点

在这里插入图片描述

2. 搭建Vue开发环境

2.1 安装Vue的方式

2.1.1 第一种安装方式：直接使用script标签引入

使用本地文件

<!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">
    <title>Document</title>
    <!-- 
        引入vue之后，浏览器中会存在Vue构造函数，可在控制台输入Vue进行验证
     -->
    <script src="./vue.js"></script>

    <!-- 
        使用vue开发版本时，浏览器会有相关提示,提示如下，关闭可使用以下代码

            You are running Vue in development mode.
            Make sure to turn on production mode when deploying for production.
            See more tips at https://vuejs.org/guide/deployment.html

         Vue.config 是一个对象，包含Vue的全局配置，一次修改，处处可用，可以在启动应用之前修改相关属性
     -->
     <script>
         Vue.config.productionTip = false;
     </script>
</head>
<body>
    
</body>
</html>

使用CDN

xxxxxxx

2.1.2 第二种安装方式：使用NPM

XXXX

2.2 Vue小案例

<!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">
    <title>Document</title>
    <script src="./vue.js"></script>

</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>{{ name }}</h1>
    </div>
     <script>
         Vue.config.productionTip = false;   // 阻止浏览器生成生产提示

        /*  
            创建Vue实例，new的时候只传入一个参数，
            并且这个参数是一个对象，此对象称为配置对象
            配置对象中的key是固定的，value值也是固定的数据类型
        
        */
         const x = new Vue({
            // el是element的简称，它用于指定当前的Vue实例为哪个容器服务，值通常为css选择器字符串
            // 也可用为 el:document.getelementById('root')
            el:"#root",   
            // data中用于存储数据，数据供el所指定的容器使用，其他容器不能使用
            data:{
                name:'玉米'
            }
         })
     </script>
</body>
</html>