前端框架Vue3基础部分

什么是Vue？

Vue是一个能用于构建用户交互页面（动态网页）的渐进式JavaScript框架，易学易用，性能出色，适用性强的Web前端框架。

Vue的设计模式？

Vue的设计模式：MVVM模式

MVVM设计模式是不让Model和View这两层直接通信，而是通过VM层来连接。

文本

插值表达式：可以使用{{ }}在模版中插入数据。比如{{name}}，它就会显示name的值。

响应式数据

ref函数：用于创建基本类型的响应式数据。例如（修改前）：

html 复制代码

<div id="app">
    <p>{{ msg }}</p>
</div>
</head>
<body>
    <script type="module">
        import {createApp, ref} from "./vue.esm-browser.js"  //模块化开发方式
        createApp({
            setup(){
                const msg=ref("你好");
                msg.value="你好你好";               //（修改后）用value属性修改msg的值
                return{
                    msg,
                }
                }
                
        }
        ).mount("#app");

    </script>

reactive函数：用于创建复杂类型的响应式数据。例如：

html 复制代码

    <div id="app">
        <p>{{ web.title }}</p>
        <p>{{ web.url }}</p>
    </div>

    <script type="module">
        import {createApp,  reactive} from "./vue.esm-browser.js"  //模块化开发方式
        createApp({
            setup(){

                const web = reactive({
                    title: "百度一下，你就知道",
                    url: "www.baidu.com"
                });

                // 返回一个对象类型的数据
                return { 
                         web,
                         
                 }
            }
        }
        ).mount("#app");

    </script>

创建Vue项目

首先要引入Vue3的库文件。例如：
html 复制代码
```
<script src="../vue.global.js"></script>
```

然后使用Vue.createApp来创建一个Vue应用程序，并将该应用绑定在一个DOM元素上。例如：

html 复制代码

<script type="module">
import{createApp,reactive,ref}from "../vue.esm-browser.js"

    createApp({
  /* 根组件选项 */
})
</script>

html 复制代码

<script src="../vue.global.js"></script>

<div id="app">
        <p>{{ msg }}</p>
</div>

<script>

        //创建一个 Vue 应用程序
        Vue.createApp({
            // 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等
            // 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。
            setup(){
                

                // 定义数据
                let msg = "成功创建第一个Vue应用程序!";
                        
                // 返回一个对象类型的数据
                return { msg,   
                         
                 }
            }
        }
        ).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上 绑定

    </script>

运行结果：