Authored by 陈峰

Merge branch 'master' of http://git.yoho.cn/fe/yohobuywap-node

<div class="top"></div>
<div class="foot"></div>
\ No newline at end of file
... ...
<div id="app">
<app></app>
</div>
... ...
/**
* vue前端渲染的公共方法
* @author: 陈峰<feng.chen@yoho.cn>
* @date: 2016/11/07
*/
'use strict';
module.exports = () => {
return (req, res, next) => {
res.vueRender = (params) => {
res.render('vue/index', params);
}
next();
};
};
... ...
<div id="app">
<app></app>
</div>
\ No newline at end of file
... ...
require('../vue-render')(Vue => {
//注册子组件
require('../vue-component/app-child')(Vue);
//注册父组件
Vue.component('app', {
template: require('activity/demo/index.html'),
data() {
return {
msg: 'app'
}
},
methods: {
click() {
alert(this.msg)
}
}
});
})
\ No newline at end of file
... ...
//组件声明
module.exports = (Vue) => {
Vue.component('app-child', {
template: require('component/compont1.html'),
props: ['msg'],
data() {
return {
}
}
})
}
\ No newline at end of file
... ...
module.exports = (component) => {
let Vue = require('vue');
//注册组件
component(Vue);
//创建Vue实例
new Vue({
el: '#app'
});
}
\ No newline at end of file
... ...
.input {
border: solid 1px #ccc;
}
button {
display: block;
width: 100px;
height: 40px;
color: #fff;
background-color: green;
}
* {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.parent, .child {
padding: 20px;
border: solid 1px #ccc;
}
h4{
color: red;
}
\ No newline at end of file
... ...
<div class="parent">
<h4>父组件</h4>
<p>{{msg}}</p>
<input type="text" class="input" v-model="msg">
<button v-on:click="click()">点我</button>
<app-child :msg="msg"></app-child>
</div>
... ...
<div class="child">
<h4>子组件</h4>
<div>{{msg}}</div>
<input type="text" class="input" v-model="msg">
</div>
\ No newline at end of file
... ...