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