Ich mache eine Web-Anwendung (Server gerendert, nicht SPA), aber mit einigen clientseitige Funktionalität, wie ausblenden Element, wenn andere Element einen Wert haben, machen Sie HTTP ruft oder validiert einige Eingabefelder.Verwendung von Vue.js mit WebComponents wie Papier-Elemente von Polymer
Jetzt verwende ich WebComponents (Papier-Elemente und andere), um die Benutzeroberfläche zu machen, und Vanilla JavaScript (mit einigen Polyfills, wie WebComponents.js oder fetch.js), um die Funktionalität zu tun.
Bisher habe ich jedoch festgestellt, dass ich viele JavaScript-Zeilen habe (z. B. ein Eingabefeld ausblenden, wenn eine Bedingung nicht erfüllt ist), die mit einem Framework wie Vue reduziert (oder sogar gelöscht) werden könnten. js und expresive HTML mit Direktiven.
Mein Problem ist, wenn ich versuche Vue.js mit Papier-Elementen zu verwenden, oder anderen Elementen, Vue.js Richtlinien wie v-model funktionieren nicht (auch das Papier Elementwertattribut ist value wie die Standard-HTML-Elemente).
versuchte ich :value statt v-model verwenden, und dies funktioniert, aber nur mit einer einzigen Art und Weise der Datenbindung (das in v-bind normal ist), aber ich brauche zwei Daten Art und Weise in den paper-elements Bindung und v-model funktioniert nicht.
Eine Idee kann sein, während ein Doppelpunkt (eine Abkürzung von v-bind) über einen Weg, um Daten, um anzuzeigen, bindende (zB :disabled="someCondition"), verwendet, um zwei Doppelpunkte in jedem Attribute Bindungs Zweiweg Daten anzuzeigen (in einigen WebComponents, kann nützlich sein, tun Sie dies in anderen HTML-Attribut jenseits value) (zB ::value).
Jemand kennt jeden Rahmen mit expresive HTML wie Vue.js dem ist implementiert Datenbindung (Zweiweg in jedem beliebigen HTML-Attribute) und die grundlegenden Kontrollstrukturen (wie v-if und v-repeat) oder tun, um die zwei Möglichkeiten, Daten in einem beliebigen HTML-Attribute Bindung mit Vue .js (o einfacher, arbeiten V-Modell mit Papierelementen).
Ich weiß nicht, WebComponents feauture von Vue.js zu machen, weil ich Polymer dafür verwende.
Vielen Dank!
Kann ich das in nur einer Direktive binden? –
V-Modell ist nur syntaktische Zucker für: '' aber es funktioniert nur mit Eingabe, wenn Sie werden nicht Ihr eigenes v-Modell für Ihre benutzerdefinierte Komponente erstellen, folgen Sie: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events –
mchikhaoui
Ok ... und können Ich benutze ': value.prop =" x "@ input =" x = $ event.target.x "'? Ich muss das selbe mit anderen Eigenschaften wie 'postalCode' oder' city' machen, weil ich Komponenten mit mehr als einem Eingang verwende (Adresseneingabe). Es gibt Eigenschaften, keine HTML-Attribute. –