Comment utiliser vue pour créer un terminal mobile

Ensuite, nous devons écrire le composant et le monter sur la balise div.

Tout d'abord, créez un dossier de composants dans le répertoire src, puis créez un fichier HelloWorld.vue sous le dossier, le code est le suivant :

<script><br>export par défaut {<br> nom : 'HelloWorld',<br> data () {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return {   content: '',   list: [] }</pre><div class="contentsignin">Copier après la connexion</div></div> <p>},<br> méthodes : {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">add() {   this.list.push(this.content)   this.content = '' }</pre><div class="contentsignin">Copier après la connexion</div></div> <p>}<br>}<br></script>

Le contenu de la balise modèle représente la disposition du composant, comprenant une zone de saisie, un bouton et une liste. Dans le même temps, l'instruction v-for est utilisée dans la liste pour parcourir les données et les restituer sur la page.

Le contenu de la balise de script représente la logique du composant, comprenant deux objets, les données et les méthodes. Deux attributs, le contenu et la liste, sont définis dans l'objet de données, qui sont utilisés pour stocker le contenu saisi par l'utilisateur et les données de liste ; L'objet méthodes définit un La méthode add est utilisée pour ajouter le contenu saisi par l'utilisateur à la liste et effacer la zone de saisie.

Ensuite, introduisez le composant dans App.vue :

importez HelloWorld depuis './components/HelloWorld'

export default {
nom : 'App',
composants : {

HelloWorld

}
}

5. Démarrez le projet

dans la commande. Entrez la commande suivante dans la fenêtre de ligne :

npm run dev

Cette commande démarrera le projet et affichera la page que nous venons d'écrire dans le navigateur.

6. Empaquetez le projet

Entrez la commande suivante dans la fenêtre de ligne de commande :

npm run build

Cette commande empaquetera le projet et générera un fichier nommé index.html dans le répertoire dist, qui peut être déployé. application sur le serveur.

Conclusion

Ce qui précède présente toutes les étapes pour utiliser vue pour créer une application mobile. Je pense qu'après l'introduction de cet article, les lecteurs peuvent déjà avoir une compréhension préliminaire de la façon d'utiliser vue et de mettre en œuvre avec succès une application mobile simple. en utilisant vue. Bien sûr, dans le développement réel, nous devons encore continuer à explorer et à apprendre davantage de fonctions et de fonctionnalités de vue afin de mieux appliquer vue pour réaliser un développement d'applications de plus en plus complexes.

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!