因为对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内。