• Vue3初体验

    1、Vue3.html 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style rel="stylesheet">
    8.         tr,td{
    9.             border: 1px solid lightgray;
    10.             text-align: center;
    11.         }
    12.     style>
    13.     <script src="script/vue3.js">script>
    14. head>
    15. <body>
    16.     <div id="app">
    17.             <p v-text="str">p>
    18.             <table style="border: 1px solid lightgrey;border-collapse: collapse;width: 400px;line-height: 28px;">
    19.                 <tr>
    20.                     <td>名称td>
    21.                     <td>单价td>
    22.                     <td>库存量td>
    23.                 tr>
    24.                 <tr v-for="f in fruitList">
    25.                     <td>{{f.fname}}td>
    26.                     <td>{{f.price}}td>
    27.                     <td v-text="f.fcount">td>
    28.                 tr>
    29.             table>
    30.     div>
    31.     <script>
    32.         //创建一个Vue对象，名称叫app
    33.         const app=Vue.createApp({
    34.             setup() {
    35.                 let str="hello VUE3!"
    36.  
    37.                 let fruitList=[
    38.                     {'fname':'apple','price':9,'fcount':20 },
    39.                     {'fname':'banana','price':8,'fcount':21 },
    40.                     {'fname':'orange','price':7,'fcount':22 },
    41.                 ]
    42.                 
    43.                 return {str,fruitList}
    44.             },
    45.         })
    46.         //将这个对象挂载到#app上(其实就是id='app'的元素节点)
    47.         app.mount("#app")
    48.     script>
    49. body>
    50. html>

     

     

     

    Vue3和原始DOM操作的主要区别在于，Vue3是一个MVVM框架，它将视图和数据分离开来，提供了一种声明式的方式来管理视图和数据之间的关系。而原始DOM操作则是直接操作浏览器的DOM元素，需要手动处理视图和数据之间的关系。

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

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

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

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

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

    使用DOM操作动态添加一个按钮元素：

    1. const button = document.createElement('button');
    2. button.innerHTML = 'Click Me';
    3. button.addEventListener('click', () => {
    4.   console.log('Button clicked');
    5. });
    6. document.body.appendChild(button);

    使用Vue3的模板语法动态添加一个按钮元素：

    2.

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

  • 相关阅读:
    1. 创建第一个harmonyos工程
    Android事件分发机制--浅显易懂解析
    Taurus.MVC-Java 版本打包上传到Maven中央仓库（详细过程）：2、PGP下载安装与密钥生成发布
    想发EI国际学术会议，但学校要求知网，这种情况该如何解决？
    webpack如何设置兼容浏览器的范围​browserslist
    手写单例模式
    Unity - 手动创建 dithering tex 3d
    【python】爬虫系列Day03--url传参
    shell如何定义变量
    Channel 是什么？
  • 原文地址：https://blog.csdn.net/m0_65152767/article/details/134468777