1.1

2. v-html指令

作用：设置元素的innerHTML（可以向元素中写入新的标签）

代码实例：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 普通获取文本 -->
        <h2>{{msg}}</h2>
        <h2 v-html="msg"></h2>
        <!-- 设置元素的innerHTML -->
            <!--  v-text只能获取该值 -->
        <h2 v-text="url"></h2>
            <!-- v-html内联html标签 -->
        <h2 v-html="url"></h2>

    </div>
</body>
<script>
    var obj = new Vue({
        el: "#app",
        data:{
            "msg": "java程序员",
            "url": "<a href='https://www.baidu.com'>百度一下</a>",
        } ,
    })
</script>
</html>

3. v-on指令

作用：为袁术绑定事件，比如：v-on:click，可以简写为@click="方法名"

绑定的方法定义在vue实例的methods属性中。

代码实例：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用v-on 绑定click点击事件 -->
        <input type="button" value="点击按钮" v-on:click="show1" />
        <!--简写方式： 使用@符号也可以绑定 -->
        <input type="button" value="点击按钮2" @click="show2" />
        <!-- 双击事件 -->
        <input type="button" value="双击事件" @dblclick="show3" />

        <h2>{{food}}</h2>
    </div>

</body>
<script>
    var obj =  new Vue({
        el:"#app",
        data: {
            "food": "麻婆豆腐",
        },
        methods: {
            show1:function() {
                alert("今天不学习，明天变垃圾！");
            },
            show2:function(){
                alert("天天好心情");
            },
            show3:function(){
                console.log(this.food);
                this.food += "真好吃";
            },
        },
    });
</script>
</html>