使用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内。