Vue2.x 与 Vue3.x ：基本结构及重要配置一览

目录

Vue2.X基本结构

Vue2.X常用配置选项及作用

Vue3.X基本结构

Vue3.X常用配置选项及作用

---

Vue2.X基本结构

---

        示例代码如下：

        第一步：引入vue.js，从而为后续的操作奠定基础。

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

        第二步：精心构建一个需要被加以管控的特定区域。

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

        分析：此区域在 MVVM 架构中相当于“V（view）”的角色，用于展示相关数据和界面元素。

        第三步：进而创建一个 Vue 实例，这一实例在 MVVM 体系中扮演着“VM（ViewModel）”的关键角色。

const app=new Vue({     
    el:'#app',    
//这里进行数据的初始化操作，使这些数据能够被页面访问，其功能等同于 MVVM 中的“M（Model）”  
    data(){  
        return{    
            msg:'vue基本结构'    
        }    
    }    
}) 

           分析：一旦我们成功地引入 vue.js 后，在浏览器的内存空间里，便会新生出一个 Vue 构造函数。所创建的这个 Vue 实例会全面掌控<div id="app">...</div>内的所有元素和内容。

        在 Vue 实例当中，如果想要获取 data 上的数据，亦或是调用 methods 中的方法，就必须借助 this.数据属性名或者 this.方法名这样的方式来进行访问操作，这里的“this”所代表的正是我们通过 new 操作所生成的 app 实例对象。

        而且，Vue 实例还会对 data 中所有数据的变化保持敏锐的监听状态，只要数据出现任何变化，它就会自动且迅速地将最新的数据从 data 同步更新至页面上，以确保页面数据的实时性和准确性。

Vue2.X常用配置选项及作用

---

选项