跳到主要内容

Vue

MVVM 单向绑定​

<html>
<head>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/vue.js"></script>
<script>
// 初始化代码:
$(function () {
    var vm = new Vue({
        el: '#vm',
        data: {
            name: 'Robot',
            age: 15
        }
    });
    window.vm = vm;
});
</script>
</head>
<body>
    <div id="vm">
        <p>Hello, {{ name }}!</p>
        <p>You are {{ age }} years old!</p>
    </div>
</body>
<html>

MVVM 双向绑定​

我们可以用 v-model 指令绑定：

$(function () {
    var vm = new Vue({
        el: '#vm',
        data: {
            email: '',
            name: ''
        }
    });
    window.vm = vm;
});

对应的 HTML 为：

<form id="vm" action="#">
    <p><input v-model="email"></p>
    <p><input v-model="name"></p>
</form>

MVVM 同步 DOM 结构​

例如对于 to-do 列表，可以对应到一个 JavaScript 列表：

<ol>
    <li v-for="t in todos">
        <dl>
            <dt>{{ t.name }}</dt>
            <dd>{{ t.description }}</dd>
        </dl>
    </li>
</ol>