Maison >interface Web >js tutoriel >Qu'est-ce que le bucket familial vue2 et comment l'utiliser ?

Qu'est-ce que le bucket familial vue2 et comment l'utiliser ?

php中世界最好的语言original: 2018-03-16 11:05:0210167parcourir

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

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
    }
  ]
});

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>

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();
  } 
})

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