Vue3初体验

1、Vue3.html 

    
    
    
    
    


    

            

            

                

                    
名称
                    
单价
                    
库存量
                
                

                    
{{f.fname}}
                    
{{f.price}}
                    

                
            
    
    

 

 

 

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的模板语法动态添加一个按钮元素：

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