Есть тут люди которые писали на ангуляре 2 и vue? что скажите?
П.с я понимаю что на vue можно лепить архитектуру как хочешь, а ангуляр уже навязывает свою. |
Цитата:
Цитата:
Панику оставьте для Ангуляров, Реактов и т.п.) Цитата:
Цитата:
|
nerv_,
Верстка тут вообще не причем. Я про композицию UI и архитектуру в целом. То есть каждый компонент это своя папка. В ней лежит шаблон, класс и стили. Это то, к чему мы пришли с ангуляр2. |
Cyber, заюззай вебпак и все.
Вот пример моего компонента на Vue.
'use strict';
/*!
* TravelChat Client
* Released under the FSFUL license
*/
import iData from '../i-data/i-data';
import keyCodes from '../../core/keyCodes';
import * as tpls from './b-button.ss';
import { model } from '../../core/block';
import { wait } from '../i-block/i-block';
@model(tpls)
export default class bButton extends iData {
/**
* Button type
*/
type: string = 'button';
/**
* Connected form id
*/
form: ?string;
/**
* Icon before text
*/
preIcon: ?string;
/**
* Icon after text
*/
icon: ?string;
/**
* Tooltip text
*/
hint: ?string;
/**
* Tooltip position
*/
hintPos: ?string;
/** @override */
static mods = {
rounding: [
'none',
['small'],
'normal',
'big'
],
width: [
['normal'],
'full'
],
opened: [
'true',
['false']
]
};
/**
* Opens the dropdown
*/
@wait('loading')
open() {
if (this.$slots.dropdown && this.setMod('opened', true)) {
this.emit('open');
}
}
/**
* Closes the dropdown
*/
@wait('loading')
close() {
if (this.$slots.dropdown && this.setMod('opened', false)) {
this.emit('close');
}
}
/**
* Toggles the dropdown
*/
toggle() {
this.ifSomeMod(['opened'], true) ? this.close() : this.open();
}
}
|
Цитата:
|
nerv_,
Но ведь приложение это и будет дерево компонентов... |
kobezzza, что делает деректива wait?)
|
Цитата:
|
kobezzza, сенк, подумал не много о другом)
|
Законно ли вызывать методы дочерних компонентов через $ref?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component ref="myComponent"></my-component>
<button @click="handleToggle">toggle</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
Vue.component('my-component', {
template: '<div v-if="active">my-component</div>',
data: () => ({ active: false }),
methods: {
toggle() {
this.active = !this.active
}
}
})
new Vue({
el: '#app',
methods: {
handleToggle() {
this.$refs.myComponent.toggle() // я об этом
}
}
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:23. |