frontend-mvvm
/
TestVue.html

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>
</head>
<body>

    <div id="test">
        你好，
        <span>{{content}}</span>
        {{description}}
        <ul>
            <li v-for="(key) in list">
                {{key.a}}: {{key.b}}
            </li>
        </ul>
        <input type="text" v-model="obj.x" v-on:keydown="enter"/>
        {{obj.x}}
        <br/>
        <img v-bind:src="imgSrc"/>
        <br/>
        <span v-bind:class="{red: obj.x < 2}">我的天啊</span>
        <br/>
        <span v-bind:class="haha">我的地啊</span>
    </div>
<script type="module">
    import Vue from "./core/index.js";
    let test = new Vue({
        el: "test",
        data: {
            content: "hello",
            description: "panda say hello",
            list: [{a: "panda", b: "18"}, {a: "monkey", b: 20}],
            obj: {
                x: 1,
                y: 2
            },
            imgSrc: "./a.png",
            haha: "red"
        },
        methods: {
            enter: function () {
                console.log("enter");
            }
        },
        created: function () {
            console.log("hello");
        }
    });
</script>
</body>
</html>