02-文本、属性、事件的绑定

指令：通常是v-开头，是vue提供的一些特殊属性

v-text ="" 绑定文本

v-bind：title=""  绑定属性

v-on：click = "function" 绑定事件

methods：{} 用来定义事件的方法，写在data同级下

使用this来获取vue内的数据，例如 this.number

vue内定义的值可以通过{{name}}写在标签内 注意：绑定选择器

<div id="app">
        <!-- <h1 
        v-bind:title ="tit"
        v-text="msg"
        v-on:click = "showData"
        >
    </h1> -->
    <button v-on:click="decrease">-</button>
    <span>{{number}}</span>
    <button v-on:click="increase">+</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // Vue.createApp({
        //     // 选择api (option api)
        //     data(){
        //         return{
        //             msg:"hello vue",
        //             tit:"hello vue3",
        //         }},
        //     methods:{
        //         showData(){
        //             alert("hello vue3")
        //         }
        //     }
        // }).mount("#app")
        Vue.createApp({
            data(){
                return{
                    number : 0
                }
            },
            methods:{
                decrease(){
                    if(this.number > 0){
                        this.number --;
                    }
                },
                increase(){
                    this.number ++;
                }
            }
        }).mount("#app")