第一篇、初始vue-CSDN博客

本文链接：https://blog.csdn.net/weixin_61482485/article/details/132149452

vue简介：

Vue.js（通常称为Vue）是一种用于构建用户界面的开源JavaScript框架。提供了一种响应式的数据绑定和组件化的架构。

Vue具有以下特点：

响应式数据绑定：通过v-bind、v-model实现
组件化：Vue允许开发者将应用程序划分为多个可重用的组件，这样便于维护和复用
虚拟DOM：Vue使用虚拟DOM来优化性能内存中维护一个虚拟的DOM树，通过比较虚拟DOM和实际DOM的差异，最小化实际DOM操作的次数，从而提高应用程序的性能。
指令：Vue提供了一组内置的指令，用于操作DOM元素。例如：

v-if 指令用于条件性地渲染元素
v-for 指令用于循环渲染元素
v-bind 指令用于绑定属性
详细的查看官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js
插件生态系统：Vue拥有丰富的插件生态系统，开发者可以使用这些插件来扩展Vue的功能。例如

Vue Router 用于实现客户端路由
Vuex 用于状态管理
Vue CLI 用于快速搭建Vue项目

创建过程请看官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

编写第一个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>01.app初体验</title>
    <link rel="shortcut icon" href="../favicon.ico" />
    <script type="text/javascript" src="../vue.js"></script>
  </head>

  <body>
    <!-- 
        初始vue案例总结：
        1、想让vue工作，就必须创建一个vue实例对象，并且要传入一个配置对象
        2、root容器里的代码依然符合html规范，只不过混入一些特殊的vue语法
        3、root容器里的代码被称为是【vue模板】
     -->

    <!-- 

        注意区分：js表达式和js代码（也叫语法）
            1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
            比如：a 变量    a+b  表达式    demo(1) 函数   三元表达式 等
            2、js代码或者语法
                if语句    for语句  等
                
        1、vue实例和容器是一一对应的
        2、真实开发中只有一个vue实例，并且会配合着组件一起使用
        3、{{xxx}}中的xxx要写js表达式（不能是js代码或者是语法），并且xxx可以自动读取data中的所 
           有属性
        4、一旦data中的数据发生改变，那么模板中用到该数据的地方也会自定更新
     -->

    <!-- 书写vue案例前，需要准备好一个容器 -->
    <div class="root">
      <h1>hello,{{name}}</h1>
    </div>

    <!-- 没有在指定配置对象中的内容是不能正常输出的 -->
    <h1>{{name}}</h1>

    <script type="text/javascript">

      // 创建vue实例对象
      const x = new Vue({
        el: ".root", 

        data: {
          name: "zhou",
        },
      });
    </script>
  </body>
</html>

el和data配置项的说明：

el用于指定当前vue实例为哪个容器服务，值通常是css选择器字符串

注意：这里只能写el，不能写成element单词，不然不能识别

data

data中用于存储数据，数据提供element所指定的容器使用，值我们暂时先使用对象定义，后续使用函数的方式比较方便