APIcloud peut-il utiliser vue ?
apicloud peut utiliser vue. Comment l'utiliser : introduisez d'abord vue.min.js dans la page apicloud ; puis marquez l'identifiant où vous devez utiliser vue.js pour le rendu du modèle ; méthode. L'élément de id peut initialiser l'instance de vue.
L'environnement d'exploitation de cet article : système Windows7, version vue2.0, ordinateur Dell G3.
Vue peut être utilisé dans apicloud.
Comment utiliser Vue.js pour un développement efficace dans APICloud ?
APICloud recommande officiellement d'utiliser du JS natif pour le développement, mais dans des logiques métier complexes, l'efficacité du développement du JS natif n'est souvent pas aussi élevée que celle du framework MVVM, donc l'utilisation de Vue.js peut améliorer efficacement l'efficacité du développement.
Dans le but de ne pas affecter autant que possible les performances de l'application et l'expérience utilisateur de l'API native en Hybrid, il n'est pas recommandé d'utiliser le mode de développement SPA de Vue.js, c'est-à-dire qu'il est il n'est pas recommandé d'utiliser vue-cli pour compiler et utiliser vue-router, les applications monopage de vuex, axois et d'autres modules.
L'utilisation directe d'un script pour introduire vue.js peut minimiser le couplage entre les projets vue et apicloud, et n'entrera pas en conflit avec les API et les modules natifs existants.
1. Utilisation de base
Introduisez d'abord vue.min.js dans la page apicloud (la dernière version citée dans cet article est la v2.6.10 du 12 octobre 2019).
Marquez ensuite l'identifiant où vous devez utiliser vue.js pour le rendu du modèle Pour plus de commodité, il est généralement marqué sur l'élément le plus à l'extérieur sous le corps. Bien entendu, le rendu Vue peut également être effectué sur des éléments locaux, ce qui n'entre pas en conflit avec la méthode native.
Enfin, une fois l'initialisation d'apicloud terminée, c'est-à-dire dans la méthode apiready, l'instance vue est initialisée en fonction de l'élément marqué de l'identifiant.
Exemple de code :
<!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. Traitement du scintillement des pages
Généralement, lors de l'ouverture d'une nouvelle page nécessitant vue pour le rendu, pendant le processus de rendu, un message d'erreur s'affichera. apparaît Le code scintille lors du basculement entre les résultats de rendu du modèle et du modèle. En effet, Vue démarre le rendu après avoir ouvert la nouvelle page. Avant le rendu, le contenu du modèle de rendu est affiché par défaut et le résultat est affiché une fois le rendu réussi. .
Ici, vous pouvez marquer v-cloak sur l'élément du modèle vue pour le traitement.
Recommandé : "tutoriel vue"
Remarque : Ici, vous devez déclarer le style de v-cloak comme caché dans le style, afin que v- soit marqué avant le rendu est terminé. Aucun des éléments du manteau ne sera affiché.
<!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. Utilisez le contenu de l'instance vue pour les éléments de rendu non-vue
L'utilisation de vue pour le rendu des modèles aura un temps de rendu dans certaines pages qui ont des exigences strictes en matière de performances de rendu et d'effets d'affichage, La zone de contenu principale est implémentée en HTML natif et les opérations logiques complexes sont rendues par Vue. Certaines propriétés ou méthodes de l'instance de vue peuvent être nécessaires en dehors de la zone de rendu de vue. Dans ce cas, l'instance de vue peut être affectée à la variable globale de la page actuelle lorsque vue est initialisée.
Cet article utilise vm comme nom d'instance de vue, mais bien sûr, il peut être remplacé par autre chose. Placer la machine virtuelle en dehors d'apiready peut garantir qu'aucune erreur ne sera signalée lorsque les méthodes pertinentes sont directement appelées avant la fin de l'initialisation. L'utilisation globale de vm comme instance de vue peut également éviter d'avoir besoin de var that = this pour certaines méthodes de rappel dans vue pour redéfinir le contexte.
Vous pouvez utiliser vue global instance vm dans les situations suivantes :
Lorsque vous devez appeler le contenu de l'instance vue en dehors de la zone de rendu de vue
Lors de l'utilisation de méthodes natives, telles que onclick
Lorsque le contenu de l'instance vue doit être appelé dans la méthode de rappel
Exemple :
<!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 Références du module
Ce n'est pas le cas. Il est recommandé que le module dans apicloud soit placé dans l'instance de vue, mais doit être placé dans apiready et à l'extérieur de l'instance de vue
Exemple :
<!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. Style de code
Là Il existe actuellement de nombreux fabricants de téléphones mobiles, et la personnalisation des versions des fabricants est sérieusement fragmentée, différents fabricants ont différents niveaux de prise en charge de la syntaxe ECMA Script6, donc l'utilisation de JavaScript natif peut garantir qu'il peut fonctionner normalement sur n'importe quel téléphone mobile avec une version Android inférieure. Sur certains appareils, il y a également eu un problème selon lequel les versions inférieures d'Android ne peuvent pas analyser correctement ES6. API Cloud ne recommande pas officiellement l'utilisation de polyfill, alors essayez de ne pas utiliser d'outils tels que polyfill, choisissez plutôt la méthode d'écriture js native officiellement recommandée. Cela peut garantir les performances de l'application et également garantir que lorsque le framework API Cloud est ensuite mis à niveau, la logique du code local ne sera pas compromise. Il y a trop de changements.
Comment écrire des fonctions
Lors de l'écriture de fonctions, veillez à ne pas utiliser l'écriture es6 et les fonctions fléchées
Écriture ES6 (×) :
foo(value) {
console.log(value);
}
const fun = (value) => {
alert(value);
}Natif Méthode d'écriture JavaScript (√) :
function foo(value) {
console.log(value);
}
var fun = function(value) {
alert(value);
}Variables et chaînes
Utilisez des mots-clés Java Script natifs et veillez à ne pas utiliser de mots-clés es6. Lors de la concaténation de chaînes, vous devez également utiliser la connexion native JavaScript plus signe.
Méthode d'écriture ES6 (×) :
let a;
const b = 'BAR';
if (xxx) {
a = 1;
} else {
a = 2;
}
console.log(`${b} ${a}`);Méthode d'écriture JavaScript native (√) :
var a = undefined;
var b = 'BAR';
if (xxx) {
a = 1;
} else {
a = 2;
}
console.log(a + b);6. Applications basées sur des composants
Vue la plus utilisée Les développeurs .js apicloud oublient souvent qu'ils peuvent également développer des composants sans utiliser la compilation vue-cli, afin d'atteindre l'objectif de composants de la logique métier, de réutilisation du code et d'amélioration de l'efficacité de la production.
Remarque : lorsque vous utilisez du js natif pour développer des composants vue dans apicloud, évitez d'utiliser v-model pour lier dans les deux sens la valeur du composant. De même, évitez la liaison bidirectionnelle v-model dans d'autres listes d'affichage contenant de grandes quantités de données, sinon cela affectera l'efficacité du rendu de la vue et entraînera le blocage de l'application.
Exemple :
<!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>'
})
}Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment ajouter des fonctions aux boutons pour Vue
Apr 08, 2025 am 08:51 AM
Vous pouvez ajouter une fonction au bouton VUE en liant le bouton dans le modèle HTML à une méthode. Définissez la logique de la fonction de méthode et d'écriture dans l'instance Vue.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Comment référencer le fichier JS avec Vue.js
Apr 07, 2025 pm 11:27 PM
Il existe trois façons de se référer aux fichiers JS dans Vue.js: spécifiez directement le chemin à l'aide du & lt; script & gt; étiqueter;; importation dynamique à l'aide du crochet de cycle de vie monté (); et l'importation via la bibliothèque de gestion de l'État Vuex.
Comment utiliser Watch in Vue
Apr 07, 2025 pm 11:36 PM
L'option Watch dans Vue.js permet aux développeurs d'écouter des modifications de données spécifiques. Lorsque les données changent, regardez déclenche une fonction de rappel pour effectuer des vues de mise à jour ou d'autres tâches. Ses options de configuration incluent immédiatement, qui spécifie s'il faut exécuter un rappel immédiatement, et profond, ce qui spécifie s'il faut écouter récursivement les modifications des objets ou des tableaux.
Comment revenir à la page précédente par Vue
Apr 07, 2025 pm 11:30 PM
Vue.js dispose de quatre méthodes pour revenir à la page précédente: $ router.go (-1) $ router.back () utilise & lt; router-link to = & quot; / & quot; Composant Window.History.back (), et la sélection de la méthode dépend de la scène.
Que signifie le développement de plusieurs pages Vue?
Apr 07, 2025 pm 11:57 PM
Le développement multi-pages VUE est un moyen de créer des applications à l'aide du cadre Vue.js, où l'application est divisée en pages distinctes: Maintenance du code: La division de l'application en plusieurs pages peut rendre le code plus facile à gérer et à maintenir. Modularité: chaque page peut être utilisée comme module séparé pour une réutilisation et un remplacement faciles. Routage simple: la navigation entre les pages peut être gérée par une configuration de routage simple. Optimisation du référencement: chaque page a sa propre URL, ce qui aide le référencement.
Comment sauter à la div de Vue
Apr 08, 2025 am 09:18 AM
Il existe deux façons de sauter des éléments div dans Vue: Utilisez le routeur Vue et ajoutez le composant routeur-link. Ajoutez l'écouteur de l'événement @Click et appelez ceci. $ Router.push () pour sauter.
Comment utiliser ForEach Loop à Vue
Apr 08, 2025 am 06:33 AM
La boucle Foreach dans Vue.js utilise la directive V-FOR, qui permet aux développeurs d'itérer à travers chaque élément dans un tableau ou un objet et effectuer des opérations spécifiques sur chaque élément. La syntaxe est la suivante: & lt; modèle & 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
