<!--Vue HTML commands-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue HTML commands</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-html="message"></div>
        </div>
        
        <script>
            new Vue({
                el: '#app',
                data: {
                    message: '<h1>菜鸟教程</h1>'
                }
            })
        </script>
    </body>
</html>



<!--Vue v-model/v-bind-->
<style>
    .class1{
        background: #444;
        color: #eee;
    }
</style>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    
    <div id="app">
        <label for="r1">change color</label><input type="checkbox" v-model="use" id="r1"><br><br>
        <div v-bind:class="{'class1': use}">
            v-bind:class depends on v-model
        </div>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data:{
                use: true
            }
        });
    </script>
</body>