使用jQuery和使用框架的区别-CSDN博客

本文链接：https://blog.csdn.net/u013565133/article/details/101696261

jQuery实现todo-list：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>to-do-list by jquery</title>
</head>
<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
            }
            //jQuery是直接改视图，硬生生的操作dom修改视图，将li标签活生生的插入到dom结构中
            var $li = $('<li>' + title + '</li>')
            $ulList.append($li)
            $txtTitle.val('')
        })
    </script>
</body>
</html>

vue来实现todo-list：

<!DOCTYPE html>
<html>
<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 () {
                   //这里没有任何dom操作，但是只要数据变化了视图就会跟着变化，整个过程我只需要关心数据的变化
                    this.list.push(this.title)
                    this.title = ''
                }
            }
        })
    </script>
</body>
</html>

使用jQuery和使用框架的区别：