search

binperson / blog

personal blog 😍
Apache License 2.0
0 stars 0 forks source link

MVVM #13

Open binperson opened 6 years ago

binperson commented 6 years ago

jQuery 实现 todo-list

<body>
    <div>
        <input type="text" name="" id="txt-title">
        <button id="btn-submit">submit</button>
    </div>
    <div>
        <ul id="ul-list"></ul>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var $txtTitle = $('#txt-title')
        var $btnSubmit = $('#btn-submit')
        var $ulList = $('#ul-list')
        $btnSubmit.click(function () {
            var title = $txtTitle.val()
            if (!title) {
                return
            }
            var $li = $('<li>' + title + '</li>')
            $ulList.append($li)
            $txtTitle.val('')
        })
    </script>
</body>

vue 实现 todo-list

<head>
    <meta charset="UTF-8">
    <title>to-do-list by vue</title>
    <script src="./vue-2.5.13.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input v-model="title">
            <button v-on:click="add">submit</button>
        </div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        // data 独立
        var data = {
            title: '',
            list: []
        }
        // 初始化 Vue 实例
        var vm = new Vue({
            el: '#app',
            data: data,
            methods: {
                add: function () {
                    this.list.push(this.title)
                    this.title = ''
                }
            }
        })
    </script>
</body>

两者的区别

MVC

image

image image

MVVM

image

MVVM 框架的三大要素

binperson commented 6 years ago

vue 中如何实现响应式

什么是响应式

Object.defineProperty

image image

Martiniele commented 6 years ago

这位仁兄有点眼熟。