使用Vue开发网站之路1-单个组件的开发

因为对Vue的好奇，我最近尝试着用Vue去做一些网站的开发。尝到了它的甜头，我感觉到了它某些地方的不便（主要跟Jquery对比）。

组件式开发的优点就是可以在不同的页面使用，造一次轮子就可以了，这个是前端的很早之前就提倡的路。不过组件式开发由于是低耦合的，所以它的组件间通信并不十分方便，当然也有可能我接触时间略短，两周左右吧。

我从简单地开始写，就当笔记了。

单组件（局部组件和全局组件）

局部组件

使用方法：

例子：

    //切换中英文
    var changelan = {
        template:'<div class="changeLan">\
                    <span value="EN" v-on:click="changelan">English</span><span>|</span>\
                    <span value="CN" v-on:click="changelan">中文</span>\
                    </div>',
        methods:{
            changelan:function(e) {
                var target = $(e.target);
                location.href="../index.html?lan=" + target.attr("value");
            }
        }

    }
	new Vue({
		el:'header',
		components:{
			'change-lan':changelan
		}
	});








	这个是一个切换中英文的组件，只有点击事件，事件的方法放到methods里面。
全局组件
新建方式：Vue.component（‘组件名’，其他参数）
例子：
	Vue.component('select-item',{
		template:'<li v-bind:pid="item.id" v-on:click="leftUITarget">{{item.name}}</li>',
		props:['item'],
		//自定义控件可以获取data里面的属性，但是获取的代码必须放到本对象里面，data必须是一个方法，而且要获取的数据必须放在function的return里面
		data:function(){
			return {}
			//return request();
		},
		//自定义组件的方法放到这里,event就是Dom对象
		methods:{
			leftUITarget:function(event){
				var target = $(event.target);
				target.siblings().removeClass("selected");
				target.addClass('selected');
				$("#hasChoose span").eq(0).html(" " + target.html());
				$("#hasChoose span").eq(0).siblings().html("");
				//var result = request(target.data("pid"));
				var result = "{\"errorCode\":\"200\",\"data\":[{\"id\":\"00\",\"name\":\"磁善家\"},{\"id\":\"11\",\"name\":\"彩阑阁\"},{\"id\":\"22\",\"name\":\"恋琪\"},{\"id\":\"33\",\"name\":\"有家喜铺\"},{\"id\":\"44\",\"name\":\"磁善家00\"},{\"id\":\"55\",\"name\":\"彩阑阁00\"},{\"id\":\"66\",\"name\":\"恋琪00\"},{\"id\":\"77\",\"name\":\"有家喜铺00\"},{\"id\":\"88\",\"name\":\"磁善家000\"},{\"id\":\"99\",\"name\":\"彩阑阁000\"},{\"id\":\"100\",\"name\":\"恋琪000\"},{\"id\":\"110\",\"name\":\"有家喜铺000\"}]}";
				result = $.parseJSON(result);
				var html = createChildLi(result.data);
				$("#inner_ul2").html(html);
			}
		}
	})
	new Vue({
		el:'main',
		//html只能读取new Vue里面的data
		data:{
			result:''
		},
		created:function(){
			this.result = request(); //result之前一定要添加this，指该Vue对象
		}
		//非自定义组件的方法放在这里
	})



注意：全局组件只有在新建Vue之前新建才有效，而且有效范围为vue的el内。