Vue3模板语法--属性与表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-----使用Vue3,首先要引入Vue   ---这个做法有点类似与jQuery或其他js库的用法----->
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        .red{color: red;}
    </style>
</head>
<body>
    <h3>Vue3</h3>
    <div id="lio">
        <!--插值表达式，绑定变量-->
        <!--{{content}}
        {{sky}}
        {{num}}-->
        <!----v-on:click表示绑定事件---->  
        <!--<span v-bind:class="color">789</span>-->
        <span v-html="name?span:div">456</span>
        
       
        <br/><br/>
        <button v-on:click='a'>button</button>
        <br/> <br/>
        <button v-on:click='b'>button2</button>
    </div>
    <br/><br/>
    <div class="lancy">
        {{myvalue}}
    </div>
  
    
    
    
    <script>
        Vue.createApp({     /*---Vue的createApp方法，可以放入数据池与事件池，data是数据池，methods是事件池---*/
            data:function(){   /*  变量池  */
                return{
                    content:"hello" ,   /* 自定义的变量 */
                    color:"red",
                    name:false,
                    span:"<span>span</span>",
                    div:"<div>div</div>"
                }
            },
            methods:{  /* 事件池 */
                a:function(){
                    this.get=10
                   // var _this=this;
                    //setInterval(function(){
                      //  _this.num++;
                   // },1000);
                   //alert(1);
                   //console.log(this)
                   //this.content='hi Vue3',
                   //this.sky="hahaha"
                   
                },
                b:function(){
                    alert(2);
                }
            }
        }).mount("#lio");/*---mount（）方法指定挂载元素，只会挂载符合条件的第一个元素--*/
        Vue.createApp({
            data:function(){
                return{
                    myvalue:321
                }
            }
        }).mount(".lancy");
    </script>
</body>
</html>