Vue简介

介绍与描述

Vue是一套用来动态构建用户界面的渐进式JavaScript框架
- 构建用户界面：把数据通过某种办法变成用户界面
- 渐进式：Vue可以自底向上逐层地应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件

Vue的特点

  1. 遵循MVVM模式
  2. 编码简洁，体积小，运行效率高，适合移动/PC端开发
  3. 它本身只关注UI，可以引入其它第三方库开发项目
  4. 采用组件化模式，提高代码复用率，且让代码更好维护
    image
  5. 声明式编码，让编码人员无需直接操作DOM，提高开发效率image
  6. 使用虚拟DOM和Diff算法，尽量复用DOM节点

初识Vue

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
  3. root容器里的代码被称为Vue模板
  4. Vue实例与容器一一对应
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
    注意区分：js表达式和js代码（语句）

    • 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，例如：
      • a
      • a + b
      • demo(1)
      • x===y ? 'a' : 'b'
    • js代码（语句）
      • if(){}
      • for(){}
  7. 一旦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">
    <title>Vue</title>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成生产提示
    </script>

<body>

    <div id="room">
        <h1>
            Hello, {{name}}
        </h1>
    </div>
</body>

<script>
        // 创建Vue实例
        const vm = new Vue({
            el: '#room',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: {//data用于存储数据，数据供el所指定的容器使用
                name: 'cloud'
            }
        })
    </script>
</html>