Kann Apicloud Vue verwenden?
apicloud kann vue verwenden. Führen Sie zuerst vue.min.js in die apicloud-Seite ein und markieren Sie dann die ID, in der Sie vue.js zum Rendern der Vorlage verwenden müssen in der apiready-Methode Nur eine Vue-Instanz.
Die Betriebsumgebung dieses Artikels: Windows7-System, Vue2.0-Version, Dell G3-Computer.
Vue kann in Apicloud verwendet werden.
Wie nutzt man Vue.js für eine effiziente Entwicklung in APICloud?
APICloud empfiehlt offiziell die Verwendung von nativem JS für die Entwicklung, aber unter komplexer Geschäftslogik ist die Entwicklungseffizienz von nativem JS oft nicht so hoch wie die des MVVM-Frameworks, sodass die Verwendung von Vue.js die Entwicklungseffizienz effektiv verbessern kann.
Unter der Voraussetzung, dass die Anwendungsleistung und das Benutzererlebnis der nativen API in Hybrid möglichst nicht beeinträchtigt werden, wird die Verwendung des SPA-Entwicklungsmodells von Vue.js nicht empfohlen, d. h. die Verwendung wird nicht empfohlen vue-cli zum Kompilieren und Verwenden von Vue-Router, Vuex, Axois usw. Einzelseitenanwendung für Module.
Durch die direkte Verwendung von Skripten zur Einführung von vue.js kann die Kopplung zwischen Vue- und Apicloud-Projekten minimiert werden und es kommt nicht zu Konflikten mit vorhandenen nativen APIs und nativen Modulen.
1. Grundlegende Verwendung
Führen Sie zunächst vue.min.js auf der Apicloud-Seite ein (die neueste in diesem Artikel zitierte Version ist v2.6.10 vom 12. Oktober 2019).
Markieren Sie dann die ID, an der Sie vue.js für das Rendern der Vorlage verwenden müssen. Der Einfachheit halber wird sie normalerweise auf dem äußersten Element unter dem Körper markiert. Natürlich kann das Vue-Rendering auch für lokale Elemente durchgeführt werden, was nicht im Widerspruch zur nativen Methode steht.
Nachdem die Initialisierung von apicloud abgeschlossen ist, dh in der apiready-Methode, wird die Vue-Instanz entsprechend dem mit der ID gekennzeichneten Element initialisiert.
Beispielcode:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
</head>
<body>
<div id="vue">
{{ message }}
</div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
apiready = function () {
new Vue({
el: '#vue', // 与标记的id相同
data: function() {
return {
message: 'Hello world!'
};
},
});
};
</script>
</html>2. Verarbeitung des Seitenflimmerns
Im Allgemeinen kommt es beim Öffnen einer neuen Seite, die zum Rendern Vue erfordert, während des Rendervorgangs zu einem Flackereffekt beim Umschalten des Codes zwischen der Vorlage und dem Rendern der Vorlage Ergebnis Dies liegt daran, dass Vue nach dem Öffnen der neuen Seite mit dem Rendern beginnt. Standardmäßig wird der Inhalt der Rendering-Vorlage angezeigt und das Ergebnis wird angezeigt, nachdem das Rendern erfolgreich war.
Hier können Sie V-Cloak auf dem Vue-Vorlagenelement zur Verarbeitung markieren.
Empfohlen: „vue Tutorial“
Hinweis: Hier müssen Sie den Stil von V-Cloak als im Stil ausgeblendet deklarieren, damit die mit V-Cloak markierten Elemente erst angezeigt werden, wenn das Rendern abgeschlossen ist.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="vue" v-cloak>
{{ message }}
</div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
apiready = function () {
new Vue({
el: '#vue',
data: function() {
return {
message: 'Hello world!'
};
},
});
};
</script>
</html>3. Nicht-Vue-Rendering-Elemente verwenden Vue-Instanzinhalte. Die Verwendung von Vue für das Rendern von Vorlagen erfordert eine Renderzeit. Auf einigen Seiten, die strenge Anforderungen an die Rendering-Leistung und Anzeigeeffekte stellen, wird der Hauptinhaltsbereich durch natives HTML implementiert . Komplexe logische Operationen werden mit Vue gerendert. Einige Eigenschaften oder Methoden in der Vue-Instanz sind möglicherweise außerhalb des Vue-Rendering-Bereichs erforderlich. In diesem Fall kann die Vue-Instanz bei der Initialisierung von Vue der globalen Variablen der aktuellen Seite zugewiesen werden.
In diesem Artikel wird vm als Vue-Instanzname verwendet, aber natürlich kann er in einen anderen Namen geändert werden. Durch die Platzierung der VM außerhalb von apiready kann sichergestellt werden, dass kein Fehler gemeldet wird, wenn die relevanten Methoden direkt aufgerufen werden, bevor die Initialisierung abgeschlossen ist. Durch die globale Verwendung von vm als Vue-Instanz kann auch die Notwendigkeit von var that = this; für einige Rückrufmethoden innerhalb von Vue zur Neudefinition des Kontexts vermieden werden.
Die vue globale Instanz-VM kann in den folgenden Situationen verwendet werden:
Wenn der Inhalt der Vue-Instanz außerhalb des Vue-Rendering-Bereichs aufgerufen werden muss
Bei Verwendung nativer Methoden wie onclick
Wenn der Inhalt der Vue-Instanz aufgerufen werden muss in der Callback-Methode aufgerufen werden
Beispiel:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="vue" v-cloak>
{{ message }}
<button onclick="vm.getData();" tapmode>Button One</button>
</div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
var vm;
apiready = function () {
vm = new Vue({
el: '#vue',
data: function() {
return {
message: 'Hello world!'
};
},
methods: {
getData: function(name) {
setTimeout(function() {
vm.message = vm.message + name + '吃了吗？';
}, 3000);
}
}
});
};
</script>
</html>4. Modulreferenzen
Es wird nicht empfohlen, die Module in apicloud in der Vue-Instanz zu platzieren, sie sollten jedoch innerhalb von apiready und außerhalb der Vue-Instanz platziert werden
Beispiel:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="vue" v-cloak>
{{ message }}
<button onclick="vm.getData();" tapmode>Button One</button>
<div @click="getData">Button Two</div>
<div @click="getData('Tim')">Button Three</div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
var vm;
apiready = function () {
var module = api.require('xxx'); // 模块的引用
vm = new Vue({
el: '#vue',
data: function() {
return {
message: 'Hello world!'
};
},
mounted: function() {
this.greet();
module.xxx(); // 模块的使用
},
methods: {
greet: function() {
this.message = '你好！';
},
getData: function(name) {
setTimeout(function() {
vm.message = vm.message + name + '吃了吗？';
}, 3000);
}
}
});
};
</script>
</html>5. Codestil
Aktuelles Mobiltelefon Es gibt viele Hersteller und die Anpassung der Herstellerversion ist stark fragmentiert. Verschiedene Hersteller bieten unterschiedliche Unterstützungsstufen für die ECMA Script6-Syntax. Daher kann die Verwendung von nativem JavaScript sicherstellen, dass es normal ausgeführt werden kann jedes Mobiltelefon mit einer niedrigeren Android-Version. Bei einigen Geräten gab es außerdem das Problem, dass niedrigere Android-Versionen es6 nicht richtig analysieren konnten. API Cloud empfiehlt die Verwendung von Polyfill nicht offiziell. Versuchen Sie daher, keine Tools wie Polyfill zu verwenden. Wählen Sie stattdessen die offiziell empfohlene native JS-Schreibmethode. Dies kann die Anwendungsleistung sicherstellen und auch sicherstellen, dass das API Cloud-Framework später aktualisiert wird. Die lokale Codelogik wird nicht beeinträchtigt. Es gibt zu viele Änderungen. So schreiben Sie Funktionen für natives Java Script. Achten Sie darauf, keine es6-Schlüsselwörter zu verwenden. Beim Verketten von Zeichenfolgen sollten Sie auch die native JavaScript-Pluszeichen-Verbindung verwenden.
ES6-Schreibmethode (×):
foo(value) {
console.log(value);
}
const fun = (value) => {
alert(value);
}Native JavaScript-Schreibmethode (√):
function foo(value) {
console.log(value);
}
var fun = function(value) {
alert(value);
}6. Komponentenanwendung
Die meisten Apicloud-Entwickler, die vue.js verwenden, vernachlässigen oft das Kompilieren ohne vue-cli. In diesem Fall Komponente Die Entwicklung kann auch durchgeführt werden, um den Zweck der Komponentisierung der Geschäftslogik und der Wiederverwendung von Code zu erreichen und so die Produktionseffizienz zu verbessern.
Hinweis: Wenn Sie natives JS zum Entwickeln von Vue-Komponenten in Apicloud verwenden, vermeiden Sie die Verwendung eines V-Modells zur bidirektionalen Bindung des Werts der Komponente. Vermeiden Sie in ähnlicher Weise die bidirektionale V-Modell-Bindung in anderen Anzeigelisten mit großen Datenmengen, da dies sonst die Vue-Rendering-Effizienz beeinträchtigt und dazu führt, dass die App hängen bleibt.
Beispiel:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="vue" v-cloak>
{{ message }}
<search-bar ref="searchBar" @search="getData" placeholder="请输入关键词"></search-bar>
</div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<!-- 引入自定义组件的js文件 -->
<script type="text/javascript" src="./components/searchBar.js"></script>
<script type="text/javascript">
var vm;
apiready = function () {
vm = new Vue({
el: '#vue',
data: function() {
return {
message: 'Hello world!'
};
},
methods: {
getData: function(name) {
setTimeout(function() {
vm.message = vm.message + name + '吃了吗？';
}, 3000);
}
}
});
};
</script>
</html>通过js文件将组件内容从html页面中分离，达到复用的效果。使用时，相当于给已有的Vue加上了一个全局组件。
由于原生js的字符串拼接较为麻烦，是否这样用取决于使用者自身。
本示例中使用到的css样式来自tailwindcss
searchBar.js：
/**
* searchBar.js
* @overview 搜索框组件
*/
if (Vue) {
Vue.component('search-bar', {
props: {
value: String,
placeholder: {
type: String,
default: '搜索'
}
},
data: function() {
return {
model: undefined,
disabled: false,
};
},
mounted: function() {
this.model = this.value;
},
methods: {
handleInput: function(e) {
this.model = e.target.value;
this.$emit('change', this.model);
},
handleClear: function() {
this.model = undefined;
this.$emit('change', this.model);
this.$emit('search', this.model);
},
handleSearch: function() {
this.$emit('search', this.model);
}
},
template:
'<div class="flex justify-between">' +
'<div class="flex flex-auto items-center bg-grey-light rounded py-2 px-4">' +
'<div class="flex-auto"><input @input="handleInput" :disabled="disabled" v-model="model" type="text" style="width: 100%;" :placeholder="placeholder" /></div>' +
'<i v-if="model && !disabled" @click="handleClear" class="iconfont icon-roundclosefill text-base text-grey pl-2"></i>' +
'</div>' +
'<div v-if="model && !disabled" class="flex items-center justify-center text-blue active:text-orange pl-4" @click="handleSearch">查询</div>' +
'</div>'
})
}Das obige ist der detaillierte Inhalt vonKann Apicloud Vue verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
So fügen Sie Funktionen zu Schaltflächen für Vue hinzu
Apr 08, 2025 am 08:51 AM
Sie können der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
So verweisen Sie auf die JS -Datei mit Vue.js
Apr 07, 2025 pm 11:27 PM
Es gibt drei Möglichkeiten, sich auf JS -Dateien in Vue.js zu beziehen: Geben Sie den Pfad direkt mit dem & lt; Skript & gt an. Etikett;; Dynamischer Import mit dem montierten () Lebenszyklushaken; und importieren über die Vuex State Management Library.
So verwenden Sie Watch in Vue
Apr 07, 2025 pm 11:36 PM
Mit der Watch -Option in Vue.js können Entwickler auf Änderungen in bestimmten Daten anhören. Wenn sich die Daten ändert, löst sich eine Rückruffunktion aus, um Aktualisierungsansichten oder andere Aufgaben auszuführen. Zu den Konfigurationsoptionen gehören unmittelbar, die festlegen, ob ein Rückruf sofort ausgeführt werden soll, und Deep, das feststellt, ob Änderungen an Objekten oder Arrays rekursiv anhören sollen.
So kehren Sie von Vue zur vorherigen Seite zurück
Apr 07, 2025 pm 11:30 PM
VUE.JS hat vier Methoden, um zur vorherigen Seite zurückzukehren: $ router.go (-1) $ router.back () verwendet & lt; Router-Link to = & quot;/& quot; Komponentenfenster.history.back () und die Methodenauswahl hängt von der Szene ab.
Was bedeutet VUE Multi-Page-Entwicklung?
Apr 07, 2025 pm 11:57 PM
VUE Multi-Page-Entwicklung ist eine Möglichkeit, Anwendungen mithilfe des Vue.js-Frameworks zu erstellen, in dem die Anwendung in separate Seiten unterteilt ist: Code-Wartung: Die Aufteilung der Anwendung in mehrere Seiten kann das Verwalten und Wartungsbereich erleichtern. Modularität: Jede Seite kann als separates Modul für eine einfache Wiederverwendung und den Austausch verwendet werden. Einfaches Routing: Die Navigation zwischen Seiten kann durch einfache Routing -Konfiguration verwaltet werden. SEO -Optimierung: Jede Seite hat eine eigene URL, die SEO hilft.
Wie man zum Div von Vue springt
Apr 08, 2025 am 09:18 AM
Es gibt zwei Möglichkeiten, Divelemente in Vue zu springen: Verwenden Sie Vue Router und fügen Sie Router-Link-Komponente hinzu. Fügen Sie den @click Event -Listener hinzu und nennen Sie dies. $ Router.push () Methode zum Springen.
So verwenden Sie die Foreach -Schleife in Vue
Apr 08, 2025 am 06:33 AM
Die Foreach-Schleife in Vue.js verwendet die V-für-Anweisung, mit der Entwickler jedes Element in einem Array oder Objekt durchdringen und bestimmte Operationen für jedes Element ausführen können. Die Syntax ist wie folgt: & lt; Vorlage & gt; & lt; ul & gt; & lt; li v-for = & quot; item in items & gt; & gt; {{item}} & lt;/li & gt; & lt;/ul & gt; & lt;/template & gt; & am
