cerateApp使用

createApp 是vue3.0中的新特性，如下所示，
通过调用Vue.createApp创建一个vue的应用，将其存储到变量app中，该应用通过.mount方法挂载到对应的根节点root上，之后该应用将会只作用于绑定的节点上。
vm即app.mount(’#root’)的返回值就是根组件，vm会获取根节点上数据，操作vm时，数据改变，视图也会自动发生改变。
注意：该vue实例使用组件时需要先注册完组件才能将其挂载到root元素上，注意使用顺序。

const app = Vue.createApp({
         template:`
           <div>
                <div>{{content}}</div>
           </div>
         `,
         data(){
             return{
                 show:true,
                 content:'test vue world',
                 list:[],
                 inputValue: ''
             }
         }, 
         watch: {
            inputValue:function(newVal,oldVal){
                console.log('inputValue',newVal)
            }
         },
         methods:{
            handleBtnClick(){
                /* 打散 反转 聚合 */
                this.content = this.content.split('').reverse().join('')
            },
            handleBtnShow(){
                /* 控制显示隐藏 */
                this.show = !this.show
            },
            addItem(){
                this.list.push(this.inputValue)
                this.inputValue=''
            },
            clearList(){
                this.list=[]
            }
         },
         mounted(){

         }
     })
     /* 注意：使用组件时需要先注册完组件再将该vue实例挂载到root元素上 */
     /* vm代表的就是vue应用的根组件 vm获取根节点上数据，操作vm时，数据改变，视图也会自动发生改变*/
     const vm =app.mount('#root')