Heim > Artikel > Web-Frontend > Kann Apicloud Vue verwenden?
Kann Apicloud Vue verwenden?
- 藏色散人Original
- 2021-02-02 09:36:482659Durchsuche
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!