VueJs+React初学小结

VueJs+React初学小结

先说一下我的学习方法：

1. 永远学习最新的资料。
2. 想要印象深刻就看文档，快速入手就看视频。
3. VueJs中文文档比较严谨，本人看到英文文档好像是从中文硬翻译过来的，所以建议看中文文档。
4. 我学React是看英文文档，看文档的学习过程会感觉较平缓，所以建议看英文文档。相关视频在https://www.laravist.com/有，不过大部分是收费的。

这是我的一次学习笔记，过后有时间再写一个总结。

                                                                      

React:

通过props传递数据，同时要注意组织父子关系。

class MyComponent extends React.Component{
constructor(props){
	super(props);
	this.state = {  //设置数据的地方。【VueJS设置数据的方式比较简单，data:{},即可】
		name:'',
		age:0
	};
	this.XX方法 = 	this.XX方法.bind(this);//绑定自定义事件，目的是在方法内写this时不会产生歧义。
}
XX方法(e){
	this.setState({
		name:e.target.value//更改数据，并且自动刷新视图。“自动”很重要，表明页面会即时变化。
	})
}
render(){
	var xx = this.props.name;
	return ({ //设置要显示组件的地方
		<input value={this.props.name}>//this.props.name表达式可以直接用在属性值里。【而VueJS需要用v-bind:name="表达式"】
		//在React里，无论属性值还是直接在html里用，都是{表达式}，用单引号。
		//在VueJS里，属性值里用v-bind:key="表达式"，在html里用{{表达式}}，用双引号。key="字符串"，v-bind:key="表达式"就是这个属性值的区别。
	});
}
}

（注：上述代码段放在html文档、<script></script>段内。）

VueJS:

<mycomment v-for="user in userList" v-bind:user="user"></mycomment>//调用组件并传递数据user。
***********
var mycomment = {  //设置自定义组件的地方（局部而非全局的方式）
        props:['user'],//自定义组件的数据
        template: '<div class="media">'+
        '<div class="media-left">'+
            '<a href="#"><img  width="64px" height="64px" class="media-object" src="img/boys.jpg" alt="..."></a>'+
        '</div>'+
        '<div class="media-body">'+
            '<h4 class="media-heading">{{user.name}}</h4>'+
            '{{user.comment}}'+
        '</div>'+
        '</div>'
    };


    new Vue({
        el: '#container', //根元素
        data: { //设置数据的地方
            userList: [
            {"name":"陈想东","comment":"陈想东Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae deserunt dignissimos distinctio eveniet explicabo harum inventore nemo numquam soluta tempora. Maxime non obcaecati perspiciatis quia quis? Molestiae nostrum quam similique!"},
            {"name":"张三","comment":"张三Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae deserunt dignissimos distinctio eveniet explicabo harum inventore nemo numquam soluta tempora. Maxime non obcaecati perspiciatis quia quis? Molestiae nostrum quam similique!"},
            {"name":"李斯","comment":"李斯Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae deserunt dignissimos distinctio eveniet explicabo harum inventore nemo numquam soluta tempora. Maxime non obcaecati perspiciatis quia quis? Molestiae nostrum quam similique!"},
            {"name":"王二","comment":"王二Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae deserunt dignissimos distinctio eveniet explicabo harum inventore nemo numquam soluta tempora. Maxime non obcaecati perspiciatis quia quis? Molestiae nostrum quam similique!"}
            ]
        },
        components:{//注册局部自定义组件，以供第一行代码那样去调用。
            'mycomment':mycomment
        }
    })

初学，对细节比较较真。不足之处敬请文末指出！

——Great in coding.