Vue 简单入门 —— 模板语言

插值表达式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">{{test}}</div>
        
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    test: 'hellow world'
                },
            })
        </script>
    </body>
</html>

v-text

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-text="test"></div>
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    test: 'hellow world'
                },
            })
        </script>
    </body>
</html>

v-html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-text="test"></div>
            <div v-html="test"></div>
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    test: '<h1>hellow world</h1>'
                },
            })
        </script>
    </body>
</html>

插值表达和 v-text 效果一样。
而v-html 会处理 HTML的标签，而插值表达式和v-text却不会处理 HTML的标签。

插值表达式、 v-text、v-html 除了变量外，还可以写JS表达式：

<div id="app">
    <div>{{test + ' !'}}</div>
    <div v-text="test + ' !' "></div>
    <div v-html="test + ' !' "></div>
</div>