Vue3初体验

小丁学Java

已于 2024-04-08 09:32:42 修改

阅读量363

点赞数 3

分类专栏： # Vue3 文章标签： Vue3 javascript MVVM createApp mount return v-text

于 2023-11-17 19:59:21 首次发布

本文链接：https://blog.csdn.net/m0_65152767/article/details/134468777

版权

Vue3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

目录

1、Vue3.html

2、Vue3和DOM模型操作的代码对比

3、MVVM 框架

MVVM组件

MVVM的优点

MVVM的实现

1、Vue3.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet">
        tr,td{
            border: 1px solid lightgray;
            text-align: center;
        }
    </style>
    <script src="script/vue3.js"></script>
</head>
<body>
    <div id="app">
            <p v-text="str"></p>
            <table style="border: 1px solid lightgrey;border-collapse: collapse;width: 400px;line-height: 28px;">
                <tr>
                    <td>名称</td>
                    <td>单价</td>
                    <td>库存量</td>
                </tr>
                <tr v-for="f in fruitList">
                    <td>{{f.fname}}</td>
                    <td>{{f.price}}</td>
                    <td v-text="f.fcount"></td>
                </tr>
            </table>
    </div>
    <script>
        //创建一个Vue对象，名称叫app
        const app=Vue.createApp({
            setup() {
                let str="hello VUE3!"

                let fruitList=[
                    {'fname':'apple','price':9,'fcount':20 },
                    {'fname':'banana','price':8,'fcount':21 },
                    {'fname':'orange','price':7,'fcount':22 },
                ]
                
                return {str,fruitList}
            },
        })
        //将这个对象挂载到#app上(其实就是id='app'的元素节点)
        app.mount("#app")
    </script>
</body>
</html>
Vue3和原始DOM操作的主要区别在于，Vue3是一个MVVM框架，它将视图和数据分离开来，提供了一种声明式的方式来管理视图和数据之间的关系。而原始DOM操作则是直接操作浏览器的DOM元素，需要手动处理视图和数据之间的关系。

在使用Vue3时，开发者可以更加方便地管理视图和数据之间的关系，通过Vue3提供的模板语法和指令来声明视图和数据之间的绑定关系，从而避免手动操作DOM元素的繁琐过程。同时，Vue3还提供了响应式数据、计算属性、组件化等特性，使得开发者可以更加高效地构建复杂的应用程序。

除此之外，Vue3还提供了一些工具和插件，如Vue Router和Vuex等，可以进一步提高开发效率和代码质量。

因此，相比于原始DOM操作，Vue3在视图和数据管理方面更加方便和高效，能够大大减少开发者的工作量，提高开发效率和代码质量。

2、Vue3和DOM模型操作的代码对比

以下是Vue3和DOM模型操作的代码对比：

使用DOM操作动态添加一个按钮元素：
const button = document.createElement('button');
button.innerHTML = 'Click Me';
button.addEventListener('click', () => {
  console.log('Button clicked');
});
document.body.appendChild(button);
使用Vue3的模板语法动态添加一个按钮元素：
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    const handleClick = () => {
      state.count++
      console.log('Button clicked')
    }

    return {
      handleClick
    }
  }
}
</script>
可以看到，使用Vue3的模板语法可以更加简洁明了地描述页面逻辑，无需手动操作DOM元素；而使用DOM操作需要手动创建元素、添加事件监听器等，工作量较大且容易出错。另外，使用Vue3还可以结合响应式系统实现数据与视图的自动更新，提高了开发效率和代码可维护性。

3、MVVM 框架

MVVM（ Model-View-ViewModel ）是一种软件架构设计模式，旨在将应用程序的UI、业务逻辑和数据模型进行分离，使得代码更加模块化、可维护和可测试。该模式广泛应用于前端Web开发和移动应用开发。

MVVM组件

Model（模型）：
表示数据和业务逻辑。它通常是与数据库交互的类，负责数据的存储、检索和验证。
Model通常不知道View或ViewModel的存在，它只关注数据的处理。
View（视图）：
负责数据的展示，通常是用户界面（UI）元素，如按钮、文本框等。
View不直接处理业务逻辑或数据，它通过绑定与ViewModel进行交互。
ViewModel（视图模型）：
是View和Model之间的连接器。它负责将Model中的数据转换为View能够理解和展示的格式。
ViewModel还负责处理View中的用户输入，并将其转换为Model可以理解的命令或数据。
ViewModel是双向数据绑定的关键，它确保当Model数据发生变化时，View能够自动更新；同样，当View中的用户输入导致数据变化时，Model也能得到更新。

MVVM的优点

低耦合：View和Model之间不直接通信，而是通过ViewModel进行交互，降低了两者之间的耦合度。

可重用性：由于View和Model的分离，相同的Model可以被多个View或不同的平台（如Web和移动应用）重用。

可测试性：由于业务逻辑和数据模型在Model中，而界面展示在View中，这使得对Model和ViewModel的测试变得相对容易。

双向数据绑定：减少了手动更新UI的需要，当数据变化时，UI会自动更新，反之亦然。

MVVM的实现

在前端开发中，许多框架和库（如Angular、Vue.js和React等）都支持或实现了MVVM模式。这些框架通常提供了数据绑定、组件化和事件处理等机制，以简化MVVM架构的实现。

需要注意的是，虽然MVVM模式在许多情况下都非常有用，但它并不是所有情况的最佳解决方案。在选择使用MVVM或其他架构模式时，应根据项目的具体需求和团队的技能进行评估。