Qu'est-ce que le bucket familial vue2 et comment l'utiliser ?-js tutoriel-php.cn

Cette fois, je vais vous présenter ce qu'est le bucket familial vue2 et comment l'utiliser ? , qu'est-ce que le bucket familial vue2 ? Quelles sont les précautions lors de leur utilisation ? Voici des cas concrets, examinons-les ensemble.

On dit que Vue2 est simple et facile à démarrer, mais vous le saurez après l'avoir essayé vous-même. En plus de la syntaxe ES6 et de la configuration du webpack qui vous font sentir inconnu, l'important est le changement de. Dans le passé, vous pouviez simplement utiliser des variables globales. Le marteau pour modifier le DOM ne peut plus être utilisé, nous devons donc nous concentrer sur les données elles-mêmes. La documentation officielle de vue est assez bonne, allant de superficielle à approfondie, mais lorsque vous utilisez vue-cli pour construire un projet, vous constatez que la documentation officielle n'est toujours pas suffisante. Vous devez vous référer aux projets open source sur git et apprendre. es6. Et les buckets de la famille vue (vue-cli, vue-router, vue-resource, vuex) doivent encore être installés.

1.vue-cli

Cet outil de construction réduit considérablement la difficulté d'utilisation de webpack, prend en charge les mises à jour à chaud et prend en charge webpack-dev-server, ce qui équivaut à lancer une requête serveur, vous permettant de configurer un environnement de test et de vous concentrer uniquement sur le développement.

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

Copier après la connexion

Le mécanisme de mise à jour à chaud consiste à détecter les modifications de fichiers et à utiliser Websocket pour informer le client d'effectuer les mises à jour correspondantes. Pour plus de détails, vous pouvez accéder à : [webpack]--Remplacement à chaud du module

2.vue-router

Le routage Vue est toujours très pratique, bien plus pratique que ag1. Cette commodité se reflète sous trois aspects :

1 est la correspondance entre le routage et les pages (composants) :

import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'import Chat from '@/components/Chat'import Firends from '@/components/Firends'import Logon from '@/components/Logon'Vue.use(Router)
let router=new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
     { path: '/', redirect: '/home' },//重定向
    {
      path: '/chat',
      name: 'Chat',
      component: Chat
    },
    {
      path: '/firends',
      name: 'Firends',
      component: Firends
    },
    {
      path: '/logon',
      name: 'Logon',
      component: Logon
    }
  ]
});

Copier après la connexion

C'est ainsi que pensent les gens ordinaires, et ag1 doit également apporter Contrôleur (un tel concept n'existe pas dans vue, concentrez-vous simplement sur le composant), ce qui le rend plus facile à utiliser. En mode MVC, vous devez pointer vers l'action sous le contrôleur. S'il existe de nombreuses catégories de navigation, la stratégie correspondante est le routage imbriqué.

2 peut être spécifique à des éléments :

<router-link    class="footer-item"  exact  to="home">首页</router-link>

Copier après la connexion

La maison (en ignorant la casse) après ceci to est le nom de la route définie ci-dessus. C'est très pratique. Un routage similaire à Asp.net MVC peut restituer le chemin par son nom sans avoir à saisir le chemin à tout moment.

3 sont des interceptions d'événements :

Si nous voulons vérifier, le mieux est de vérifier avant que l'utilisateur n'atteigne la page :

router.beforeEach((to, from, next) => {  //todo 以后增加不需要验证的地址判断
  if(to.path!=="/logon"&&!store.state.userInfo.Account){
     next({ path: '/logon' })     return;
  }else{
   next();
  } 
})

Copier après la connexion

Par exemple, dans beforeEach pour le traitement. Il a également de nombreuses fonctions, je ne les listerai donc pas toutes. Document officiel : http://router.vuejs.org/zh-cn/

3 Utiliser des composants dans les composants

. pour voir, j'ai utilisé plusieurs bibliothèques d'interface utilisateur mobile. Au début, j'ai été surpris qu'il n'y ait pas de composant de pied de page. Maintenant, je comprends que le routage est si pratique qu'il n'est pas nécessaire qu'une interface utilisateur tierce encapsule le pied de page, et ce n'est pas pratique. pour l'encapsuler (car il repose sur le routage). La navigation est donc probablement le premier élément que vous devez écrire vous-même.

Par exemple, un Footer.vue est défini

Copier après la connexion

Derniers articles par auteur

Introduction à la dernière version de PHP Programmer Toolbox v1.0

2018-06-11 11:57:34
Comment gérer l'échec du routage vue.js

2018-06-15 15:55:18
Comment utiliser js pour analyser la base de données (avec code)

2018-06-15 15:49:00
Comment utiliser js pour lier les événements DOM dans le projet

2018-06-15 15:46:15
Comment utiliser les chaînes JS et les caractères spéciaux

2018-06-15 15:42:38
Comment utiliser chaque méthode dans jQuery dans un projet

2018-06-15 15:40:34
Comment utiliser jquery pour télécharger des fichiers

2018-06-15 15:39:32
Comment utiliser le prototype JS et la chaîne de prototypes

2018-06-15 15:37:14
Démonstration pratique du projet Angular CLI+Angular 5

2018-06-15 15:34:21
Remplacer les éléments de nœud à l'aide de jQuery (code ci-joint)

2018-06-15 15:22:51

Derniers numéros

Résoudre les problèmes de build de production des composants Web Vue3 J'essaie de migrer mes composants vue2web vers vue3, bien que le problème survienne lorsqu...

Depuis 2024-04-06 12:43:37

473

Rubriques connexes

Plus>