<div id="app">
<component1>
<component2 class="component1__elem" />
</component1>
</div><input type="hidden" id="input-data-to-vue" value='<?= json_encode($data_from_php) ?>'>...
data() {
return {
dataFromPhp: null
}
}
...
created() {
this.dataFromPhp = JSON.parse(document.getElementById('input-data-to-vue'));
}
...* {
padding: 0;
margin: 0;
}html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *::before, *::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}var scrollPos = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if (st > scrollPos){
$('#result').html('Вниз');
} else {
$('#result').html('Вверх');
}
scrollPos = st;
});.container-fluid
.row
.col-lg-12.no-padding.our-works__list-examples li img {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
object-fit: cover;
}
.our-works__list-examples li div {
position: relative;
height: 0;
width: 100%;
padding-bottom: 100%;
}
.our-works__list-examples li {
width: 10%;
}navContainer: '.main-content .slide-one-nav', // первыйnavContainer: '.main-content .slide-two-nav', // второй<div class="custom-nav owl-nav slide-one-nav"></div><div class="custom-nav owl-nav slide-two-nav"></div>if (!function_exists('render_partial')) {
function render_partial($template, $render_data)
{
extract($render_data);
require locate_template($template);
}
}render_partial('partials/simple-part.php', [
'param' => 'Просто строка'
]);.menu {
user-select: none;
}$selection-none()
&
-webkit-user-select none
-moz-user-select none
-ms-user-select none
user-select none
input
textarea
-moz-user-select all !important
-webkit-user-select: all !important
-ms-user-select: all !important
user-select: all !importantthis.state = {
collapse : [
{
id: 1,
collapse : false
}
]
}<?php
$data = json_decode(['name' => 'John']);
?>
<div id="simple-component">
<simple-component :data-state='<?php echo json_encode($data)?>'></simple-component>
</div>Vue.component('simple-component', {
template: '<div>{{state.name}}</div>',
props: {
dataState: {
type: Object,
required: true
},
data() {
return {
state: this.dataState
};
}
}
})
new Vue({
el: '#simple-component',
})