new Vue
el: "#vhead"
data: ->
return {
"logo": "",
"projectMenu": ""
}
components:
vheader: require("./header/header.vue")
created: ->
that = this
axios.get('/jsondata/etc/icons.json')
.then (resp) ->
# data = JSON.parse resp.data
Object.assign that.$data, resp.data
.catch (err) ->
console.log err
vheader(:logo='logo', :project-menu='projectMenu')
<script>
var Vue = require("vue/dist/vue.js");
vheader = Vue.component("v-header", {
props: ['logo', 'project-menu'],
created: function(){
console.log(this.$props);
}
});
module.exports = vheader;
</script>
<template>
<header class='header'>
<div class='plate row row--center-y row--between-x'>
<div class='header__logo' v-html='logo'></div>
<div class='header__menu' v-html='projectMenu'></div>
</div>
</header>
</template>&__slide{
transition: 0.3s ease-in;
img{
width: 100%;
transition: 0.3s ease-in;
}
&--active{
position: relative;
z-index: 2;
transition: 0.3s ease-in;
img{
@media(min-width: 481px){
box-shadow: 0 9px 36px #474646;
}
transition: 0.3s ease-in;
transform: scale(1.2);
}
}
}