V標(biāo)簽作用：

1.v-text：

1.設(shè)置標(biāo)簽的內(nèi)容，會(huì)替換標(biāo)簽內(nèi)全部?jī)?nèi)容。如：上海
2.用差值表達(dá)式可以替換指定內(nèi)容，內(nèi)部支持寫(xiě)表達(dá)式

<div id="app">
        <p>{{message + '!'}}上海</p>
        <h2 v-text="message + '!' ">上海</h2>
        
    </div>
   
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue',
              
            }
        })
    </script>

image.png

2.v-html:

1.設(shè)置元素的innerHTML,內(nèi)容中有html結(jié)構(gòu)的話會(huì)被解析為標(biāo)簽
2.v-text無(wú)論內(nèi)容是什么，都會(huì)被解析為文本
3.所以解析文本使用v-text,解析html結(jié)構(gòu)使用v-html

 <div id="app">
        <h2 v-html="content"></h2>
        <h2 v-text="content"></h2>
    </div>
   
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue',
                content: "<a ,
              
            }
        })
    </script>

image.png

3.v-on

1.為元素綁定事件，事件名不需要寫(xiě)on,指令簡(jiǎn)寫(xiě)可以為@
2.綁定的方法定義在methods屬性中
3.方法內(nèi)部通過(guò)this關(guān)鍵字可以訪問(wèn)定義在data中的數(shù)據(jù)

 <div id="app">
        <input type="button" value="v-on單擊指令" v-on:click="doIt">
        <input type="button" value="v-on簡(jiǎn)寫(xiě)" @click="doIt">
        <input type="button" value="雙擊事件" @dblclick="doIt">
        <input type="button" value="v-on指令" @mouseover="mouseOver" @mouseleave="mouseLeave">
        <h2 @click="cf">{{food}}</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data:{
                    food: "番茄"
                },
            methods: {
                doIt: function () {
                    alert('做IT');
                },
               
                cf() {
                    // console.log(this.food);
                    this.food+='大大大';
                },
                mouseOver() {
                    console.log('鼠標(biāo)進(jìn)入');
                },
                mouseLeave() {
                    console.log('鼠標(biāo)離開(kāi)');
                }
            },

        })
    </script>

image.png