【JavaScript】Vue/React/JQuery代码对比 分别实现TodoList

Vue

<body>
    <div id="app">div>
    <script>
        const Add = {
            props: ['size'],
            data() {
                return {
                    value: ''
                }
            },
            template: `
                <div>
                    <input v-model="value"/> 
                    <button @click="$emit('add', value)">Add ({{size}})</button>
                </div>
            `
        }
        const List = {
            props: ['list'],
            template: `
                <ul>
                    <li v-for="(v, i) of list" :key="i">{{v}}</li>
                </ul>
            `
        }
        const App = {
            components: { Add, List },
            data: {
                list: []
            },
            computed: {
                size() {
                    return this.list.length
                }
            },
            methods: {
                add(value) {
                    if (value != '') this.list.unshift(value)
                }
            },
            template: `
                <div>
                    <h1>Todo List</h1>
                    <Add :size="size" @add="add"></Add>
                    <List :list="list"></List>
                </div>
            `
        }

        new Vue(App).$mount('#app')
    script>
body>

React

JQuery

<body>
    <h1>Todo Listh1>
    <input type="text">
    <button id="btn">Add (<span>span>)button>
    <ul id="list">ul>

    <script>
        (() => {
            const ul = $('#list')
            const btn = $('#btn')
            btn.find('span').text(ul.find('li').length)

            btn.click(function () {
                ul.prepend(
                    `<li>${$(this).prev().val()}</li>`
                )
                $(this).find('span').text(ul.find('li').length)
            })
        })()
    script>
body>
JavaScriptjQueryvuereact

相关

创建vue项目的第一步——之安装vue 命令更新了

vue打包报错

vue登录页面后台返回验证码图片

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

javascript基础知识(29) 实现继承的方式

vue axios 1 创建项目及简单配置axios

react dom移动算法

vue两层list循环后，内层循环页面选择类型

HMVue1.5【Source Map】

jQuery 留言表单验证

vue代理服务器proxy详情配置信息

[jQuery]下载链接文件

标签