Maison >interface Web >Voir.js >APIcloud peut-il utiliser vue ?
APIcloud peut-il utiliser vue ?
- 藏色散人original
- 2021-02-02 09:36:482728parcourir
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!