vue3.js

    1. <body>
    2.     <script src='./vue3.js'></script>
    3.     <div id='myApp'>
    4.         <button @click="add">{{count}}</button>
    5.     </div>
    6.     <script>
    7.         // 在Vue2中 Vue 是一个构造函数
    8.         // 在Vue3中 Vue 是一个对象
    10.         // 先创建根组件的配置对象
    11.         var vm = {
    12.             // el: "#myApp",   vue3不再使用el
    13.             // data:{},    vue3中根组件data也要用函数
    14.             data(){ 
    15.                 return { 
    16.                     count: 0
    17.                 }
    18.             } ,
    19.             methods:{
    20.                 add(){
    21.                     this.count ++
    22.                 }
    23.             } ,
    24.             // vue3新增了setup函数, 在组件初始化时自动调用
    25.             setup(){
    26.                 console.log("setup")
    27.             }
    28.         }
    29.         // 创建根组件,并渲染组件模板, 支持链式调用
    30.         Vue.createApp(vm).mount("#myApp")
    32.         /*
    33.             总结: 此处涉及的vue3新特性
    34.             1, Vue 由之前的构造函数变成了对象
    35.             2, 根组件中的el字段废除, 被Vue.mount()函数替代
    36.             3, 根组件中的data数据由对象结构替换成了函数结构
    37.             4, 使用Vue.createApp()函数创建根组件 
    38.             5, vue3新增了setup函数, 在组件初始化时自动调用
    39.         */
    41.     </script>
    44. </body>