todolist(react和vue都有实现)

最新推荐文章于 2024-06-26 13:44:17 发布

欣欣欣白白白

最新推荐文章于 2024-06-26 13:44:17 发布

阅读量593

点赞数

分类专栏： react-vue 文章标签： html 技术 mvvm react vue

本文链接：https://blog.csdn.net/lqx_sunhan/article/details/79638033

版权

react-vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本人是一个后台，，但是对于前端技术颇具兴趣，所以vue以前研究过一段时间，也在项目当中使用过，不过不是前后端分离，并没有使用到vue的精髓部分(template),只是使用其mvvm的开发方式，感觉还是很方便的，现在稍微看了下react,也被这语法深深吸引了，，所以写了两个todolist,大家感受一下:(以下代码新建一个html,拷进去就可以运行了，有什么不明白的，欢迎留言探讨……)

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- react  -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <!-- vue  -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .fail{
            color:red;
        }
    </style>
</head>
<body>
<div id="todo1"></div>
<div id="todo2">
    <input type="text" v-model="value"><button style="width:50px; height:30px;" @click="addObj">新增</button>
    <ul>
        <li v-for="obj in arr">
            {{ obj }}<span class="fail" @click="removeObj">×</span>
        </li>
    </ul>
</div>
</body>

<script type="text/babel">
/**** 基于es6模块化的写法 ****/
class Todo extends React.Component{

    constructor(props){
        super(props);
        // props可接受组件传入的属性prop
        alert('author: ' + props.author);
        // 初始化state的值
        this.state = {arr: [], id: 0};
        // 事件函数绑定this, 在class中事件函数的this必须显示的由自己来绑定，有三种方法，这是第一种
        this.handleFailClick = this.handleFailClick.bind(this, '李四')

    }

    handleClick(event) {
        let arr = this.state.arr;
        let id = this.state.id;
        // id是为了生成的元素的key属性，详细看react文档
        arr.push({data: this.state.value, id: id++});
        this.setState({arr: arr, id: id});
    }

    // 箭头函数是第二种函数的this绑定方法
    handleChange = (event) =>{
        this.setState({value: event.target.value})
    }

    handleFailClick(name, event){
        console.log(name)
        console.log(this.state);
        var liObj = event.target.parentNode;
        var ulObj = liObj.parentNode;
        ulObj.removeChild(liObj);
    }

    render(){
        return(
                <div>
                    <input type="text" onChange={this.handleChange}/><button onClick={this.handleClick.bind(this)} style={{ width:'50px', height:'23px',marginTop:'2px'}}>新增</button>
                    <ul>
                        {
                            this.state.arr.map((obj) => {
                                return(
                                        <li key={ obj.id.toString() }>{ obj.data }<span className='fail' onClick={this.handleFailClick}>×</span></li>
                                )
                            })
                        }
                    </ul>
                </div>
        )
    }
}
ReactDOM.render(<Todo author="sunh"/>, document.getElementById('todo1'))
</script>


<script>
/** 以下为vue的实现 **/ 
    var app = new Vue({
        el: '#todo2',
        data: {
            arr: [],
            value: null
        },
        methods: {
            addObj : function(event){
                console.log(event)
                this.arr.push(this.value);
            },
            removeObj(event){
                var target = event.target;
                var liObj = target.parentNode;
                var ulObj = liObj.parentNode;
                ulObj.removeChild(liObj);
            }
        }
    })
</script>

</html>