1.事件派发&＃xff1a;子控件->父控件
DOCTYPE html>
<html><head><meta charset&＃61;"UTF-8"><title>title>head><body><div id&＃61;"app"><div>message : {{ message | json }}div><input type&＃61;"hidden" v-model&＃61;"message | json" /><child-component>child-component>div><template id&＃61;"child-component"><input type&＃61;"text" v-model&＃61;"msg" /><button &＃64;click&＃61;"notify">添加事件button>template>body><script src&＃61;"jquery.js">script><script src&＃61;"vue.js">script><script>var app &＃61; new Vue({el:"#app",data:{message:[]},components:{&＃39;child-component&＃39;:{template:&＃39;#child-component&＃39;,data:function(){return {msg:&＃39;&＃39;}},methods:{notify:function(){if($.trim(this.msg)){// 派发事件this.$dispatch(&＃39;child-msg&＃39;, this.msg, 222);this.msg &＃61; &＃39;&＃39;;}} }}},// 事件
events:{&＃39;child-msg&＃39;:function(msg, data2){this.message.push(msg);console.log(this.message);console.log(data2);}}});script>
html>
2.事件广播&＃xff1a;父控件->子控件
DOCTYPE html>
<html><head><meta charset&＃61;"UTF-8"><title>title>head><body><div id&＃61;"app"><input type&＃61;"text" v-model&＃61;"msg" /><child-component>child-component><button &＃64;click&＃61;"notify">广播事件button>div><template id&＃61;"child-component"><ul><li v-for&＃61;"item in messages">录入内容&＃xff1a;{{ item }}li>ul>template>body><script src&＃61;"jquery.js">script><script src&＃61;"vue.js">script><script>// 注册组件
Vue.component(&＃39;child-component&＃39;, {template:&＃39;#child-component&＃39;,data:function(){return {messages:[]}},events:{&＃39;parent-msg&＃39;:function(msg, data2){console.log(data2);this.messages.push(msg);}}});var app &＃61; new Vue({el:&＃39;#app&＃39;,data:{msg:&＃39;&＃39;},methods:{notify:function(){if($.trim(this.msg)){// console.log(this.msg);// 广播this.$broadcast(&＃39;parent-msg&＃39;, this.msg, 333);this.msg &＃61; &＃39;&＃39;;}}}});script>
html>
3.ajax
function AjaxHelper() {this.ajax &＃61; function(url, type, dataType, data, callback) {$.ajax({url: url,type: type,dataType: dataType,data: data,success: callback,error: function(xhr, errorType, error) {// alert(&＃39;Ajax request error, errorType: &＃39; &＃43; errorType &＃43; &＃39;, error: &＃39; &＃43; error)console.log(&＃39;Ajax request error, errorType: &＃39; &＃43; errorType &＃43; &＃39;, error: &＃39; &＃43; error);}})}
}
AjaxHelper.prototype.get &＃61; function(url, data, callback) {this.ajax(url, &＃39;GET&＃39;, &＃39;json&＃39;, data, callback)
}
AjaxHelper.prototype.post &＃61; function(url, data, callback) {this.ajax(url, &＃39;POST&＃39;, &＃39;json&＃39;, data, callback)
}AjaxHelper.prototype.put &＃61; function(url, data, callback) {this.ajax(url, &＃39;PUT&＃39;, &＃39;json&＃39;, data, callback)
}AjaxHelper.prototype.delete &＃61; function(url, data, callback) {this.ajax(url, &＃39;DELETE&＃39;, &＃39;json&＃39;, data, callback)
}AjaxHelper.prototype.jsonp &＃61; function(url, data, callback) {this.ajax(url, &＃39;GET&＃39;, &＃39;jsonp&＃39;, data, callback)
}AjaxHelper.prototype.constructor &＃61; AjaxHelper
server.php
php$op &＃61; $_REQUEST;if(empty($op)){$op &＃61; &＃39;people&＃39;;
}
else{$op &＃61; $_REQUEST[&＃39;op&＃39;];
}$data &＃61; array();if($op &＃61;&＃61; &＃39;people&＃39;){$people &＃61; array(array(&＃39;name&＃39;&＃61;>&＃39;keenleung&＃39;, &＃39;age&＃39;&＃61;>25),array(&＃39;name&＃39;&＃61;>&＃39;keenleung2&＃39;, &＃39;age&＃39;&＃61;>26),);$data &＃61; $people;
}echo json_encode(array(&＃39;status&＃39; &＃61;> &＃39;success&＃39;,&＃39;data&＃39; &＃61;> $data
));
html
DOCTYPE html>
<html><head><meta charset&＃61;"UTF-8"><title>title><style>template, simple-table{display: none;}style>head><body><div id&＃61;"app"><simple-table>simple-table>div><template id&＃61;"simple-table"><table><tr><th>姓名th><th>年龄th>tr><tr v-for&＃61;"row in rows"><td>{{ row.name }}td><td>{{ row.age }}td>tr>table>template>body><script src&＃61;"jquery.js">script><script src&＃61;"vue.js">script><script src&＃61;"ajax-helper.js">script><script>var ajaxHelper &＃61; new AjaxHelper();var app &＃61; new Vue({el:&＃39;#app&＃39;,components:{&＃39;simple-table&＃39;:{template:&＃39;#simple-table&＃39;,data:function(){return {rows:[],// 本地服务器
url:&＃39;http://www.mysites.com/vue/server.php&＃39;,}},methods:{getRows:function(){var vm &＃61; this;callback &＃61; function(data){// console.log(data);// 设置值
vm.$set(&＃39;rows&＃39;, data.data);// 获取值
console.log(vm.$get(&＃39;rows&＃39;));}ajaxHelper.get(vm.url, null, callback);}},// 执行方法
ready:function(){this.getRows();}}}});script>
html>
京公网安备 11010802041100号