Vue.js入门笔记3

一、差值表达式介绍

所谓差值表达式就是我们在Vue中使用的双大括号{{}}语法

差值表达式的基本特点：

将Vue实例中data属性对应的数据渲染到执行的差值表达式处
可以在差值表达式中书写表达式，比如对象方法的调用，数组的取值等等
使用差值表达式并不会替换掉原有标签中的内容案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        演示在差值表达式中调用对象方法: {{ str.toUpperCase() }}
        <br>
        演示在差值表达式中拼接字符串: {{ str + "拼接的字符串" }}
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                str: "abcd"
            }
        })
    </script>
</body>
</html>

二、v-text属性

v-text属性的值是用户在data属性中的定义的值，但是使用v-text属性会导致原有标签的内容被完全覆盖掉

案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app" v-text="msg">这是div原来的内容</div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "这是vue中定义的数据"
            }
        })
    </script>
</body>
</html>

浏览器中只会显示msg中定义的内容，而div标签中原有的内容会被覆盖掉，v-text属性非常类似js中的innerText

三、v-html标签

v-html的属性值也是来源于用户在data属性中定义的数据，并且该属性值也会对原有标签的内容进行覆盖，v-html属性的内容可以是一段html文档内容，该内容会被格式化到浏览器中显示

案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app" v-html="msg">这是div原来的内容</div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "<h1>这是vue中定义的h1标题</h1>"
            }
        })
    </script>
</body>
</html>