Vue实战案例：一步步构建企业级项目1_vue实战案例:一步步构建企业级项目-CSDN博客

Vue是一个能用于构建用户界面的渐进式框架框架，主要用于开发单页应用程序（SPA）和动态用户界面。‌ Vue由尤雨溪（Evan You）在2014年创建，是前端三大主流框架之一，其他两个是Angular.js和React.js。Vue的核心库只关注视图层，易于与其他库或现有项目集成，并且具有轻量级和高效的特点‌。它是一个开源项目，旨在提供一个简单、灵活且高效的解决方案来构建现代Web应用程序，适用于各种Web和移动应用开发场景。

二、创建第一个 Vue 应用程序

1、首先，在HTML文件中引入Vue库：

<head>
    <title>第一个Vue程序</title>
    <script src="../vue.global.js"></script>
</head>

2、在HTML文件中创建Vue实例，指定要操作的DOM元素，并在HTML文件中使用Vue的指令和语法来动态渲染内容：

<div id="app">
        <p>{
  
  { msg }}</p>
        <p>{
  
  { web.title }}</p>
        <p>{
  
  { web.url }}</p>
        <p>{
  
  { func() }}</p>
        <button v-on:click="change_url">点击我更换修改网</button>
    </div>

{ { }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染如: Vue 实例中定义一个 msg 变量, 值为 "Hello world",在模板中若使用插值表达式 { { msg }} 则会被渲染成 "Hello world"

3、在JavaScript文件中编写Vue的代码：

<script>
        

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

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

                // 定义方法（函数）
                const func = ()=> {
                    web.title="云中";
                    console.log("方法func被调用");
                }


                const change_url=()=>{
                    web.url+="被修改一次";
                }
                

                // 返回一个对象类型的数据
                return { msg,   
                         web,
                         func,
                         change_url
                 }
            }
        }
        )

4、将 Vue 应用程序挂载(mount) 到 app 元素上

<script>
        //创建一个 Vue 应用程序
        Vue.createApp(  ........    

        ).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上

    </script>

通过以上步骤，你可以将Vue与HTML结合编写，实现动态渲染页面内容。快复制代码试试吧！

<head>
    <title>第一个Vue程序</title>
    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>{
  
  { msg }}</p>
        <p>{
  
  { web.title }}</p>
        <p>{
  
  { web.url }}</p>
        <p>{
  
  { func() }}</p>
        <button v-on:click="change_url">点击我更换修改网</button>
    </div>

    <script>
        

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

                // 定义数据
                let msg = "成功创建第一个Vue应用程序!";

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

                // 定义方法（函数）
                const func = ()=> {
                    web.title="云中";
                    console.log("方法func被调用");
                }


                const change_url=()=>{
                    web.url+="被修改一次";
                }
                

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

修改前：

修改后：

三、响应式数据

Vue 响应式数据是 Vue.js 框架的一个核心特性，指的是数据的变化能够自动反映到视图上，而视图的更新也能引起数据的改变。Vue 实现响应式数据的机制主要依赖于其响应式系统。

1. 使用 ref:

在 Vue 3 中，ref 是用来创建基本类型数据的响应式引用。通过 ref 创建的变量，当其值发生变化时，Vue 会自动更新依赖于该变量的视图。

代码如下（里面有详细的解释，不懂的宝子可以看看注释）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让数据变成响应式</title>
</head>
<body>
    <!-- 定义了一个包含Vue应用的容器元素，其ID为“app” -->
    <div id="app">
        <p>{
  
  { msg }}</p>
        <p>{
  
  {number}}</p>
        <button @click="change">点击我更换数据</button>
        <!-- {
  
  { msg }}和{
  
  {number}}是Vue的插值表达式，它们会将被data对象中msg和number属性的值渲染到页面上。
        <button @click="change">定义了一个按钮，当用户点击按钮时，会调用名为change的方法。 -->
    </div>
    <script type="module">//指定了以下脚本应以ES6模块的形式执行
        import {createApp, ref} from "./vue.esm-browser.js"  //模块化开发方式
        // "import {createApp, ref} from "./vue.esm-browser.js"这是使用ES6模块导入语法，从指定的模块文件中导入createApp和ref两个函数。
        createApp({ //函数用于创建一个Vue应用实例
            setup(){  //是一个新的组件选项，它是Vue 3组合式API的入口点，允许你在组件初始化之前定义响应式数据和函数。
                
                const number = ref(10);//创建了一个响应式的引用类型变量number，它的初始值为10。
                console.log(typeof number,number);  //在控制台输出变量number的类型和值。
                
                const change = () => {
                    number.value += 20 ;   //定义了一个名为change的函数，当调用时会使number的值增加20。
                }
                // 返回一个对象类型的数据，其中包含msg字符串、number响应式引用和change函数。
                return { msg: "成功创建第一个Vue应用程序!" ,   
                         number,
                         change
                 }
            }
        }
        ).mount("#app");//将 Vue 应用程序挂载(mount) 到 app 元素上

    </script>
</body>
</html>

2. 使用 reactive:

在 Vue 3 中，reactive是用来创建对象的响应式副本。它使得对象的所有属性都变成响应式的，当属性的值发生变化时，Vue 会自动更新依赖于这些属性值的视图。

代码如下（里面有详细的解释，不懂的宝子可以看看注释）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>让数据变成响应式</title>
</head>
<body>
    <!-- 定义了一个包含Vue应用的容器元素，其ID为“app” -->
    <div id="app">
        <p>{
  
  { msg }}</p>
        <p>{
  
  {web.number}}</p>
        <button @click="change">点击我更换数据</button>
        <!-- {
  
  { msg }}和{
  
  {number}}是Vue的插值表达式，它们会将被data对象中msg和number属性的值渲染到页面上。
        <button @click="change">定义了一个按钮，当用户点击按钮时，会调用名为change的方法。 -->
    </div>
    <script type="module">//指定了以下脚本应以ES6模块的形式执行
        import {createApp, reactive} from "./vue.esm-browser.js"  //模块化开发方式
        // 这一行使用了import语句来导入Vue.js模块中的createApp和reactive函数。createApp用于创建Vue应用实例，reactive用于创建响应式对象。./vue.esm-browser.js`是模块的路径
        createApp({ //这一行调用createApp函数，并传入一个对象作为参数。
            setup(){  //是Vue 3中一个新的组件选项，它是一个在组件创建之前执行的函数。在这个函数中，可以定义组件的响应式数据、计算属性和方法。
                
                const web = reactive({
                    number:10,
                });//创建了一个响应式的引用类型变量number，它的初始值为10