V标签作用：

1.v-text：

1.设置标签的内容，会替换标签内全部内容。如：上海
2.用差值表达式可以替换指定内容，内部支持写表达式

<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.设置元素的innerHTML,内容中有html结构的话会被解析为标签
2.v-text无论内容是什么，都会被解析为文本
3.所以解析文本使用v-text,解析html结构使用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 href='http://www.baidu.com'>跳转</a> ",
              
            }
        })
    </script>

image.png

3.v-on

1.为元素绑定事件，事件名不需要写on,指令简写可以为@
2.绑定的方法定义在methods属性中
3.方法内部通过this关键字可以访问定义在data中的数据

 <div id="app">
        <input type="button" value="v-on单击指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @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('鼠标进入');
                },
                mouseLeave() {
                    console.log('鼠标离开');
                }
            },

        })
    </script>

image.png