Heim >Web-Frontend >js-Tutorial >Was ist der vue2 Family Bucket und wie wird er verwendet?

Was ist der vue2 Family Bucket und wie wird er verwendet?

php中世界最好的语言Original: 2018-03-16 11:05:0210213Durchsuche

Dieses Mal werde ich Ihnen vorstellen, was der Vue2 Family Bucket ist und wie man ihn verwendet. Was ist der Vue2 Family Bucket? Was sind die Vorsichtsmaßnahmen bei der Verwendung? Hier sind konkrete Fälle, schauen wir sie uns gemeinsam an.

Es wird gesagt, dass Vue2 einfach und leicht zu starten ist, aber Sie werden es wissen, nachdem Sie es selbst ausprobiert haben. Neben der ES6-Syntax und der Webpack-Konfiguration, die Ihnen das Gefühl geben, nicht vertraut zu sein, ist die Änderung wichtig Früher konnte man nur globale Variablen verwenden, um das DOM zu ändern, also müssen wir uns auf die Daten selbst konzentrieren. Die offizielle Dokumentation von Vue ist ziemlich gut und reicht von flach bis tief, aber wenn Sie Vue-Cli zum Erstellen eines Projekts verwenden, stellen Sie fest, dass die offizielle Dokumentation immer noch nicht ausreicht. Sie müssen auf Open-Source-Projekte auf Git verweisen und lernen es6. Und die Familien-Buckets von vue (vue-cli, vue-router, vue-resource, vuex) müssen noch installiert werden.

1.vue-cli

Dieses Build-Tool reduziert die Schwierigkeit bei der Verwendung von Webpack erheblich, unterstützt Hot-Updates und unterstützt den Webpack-Dev-Server, was dem Starten einer Anfrage entspricht Server, sodass Sie eine Testumgebung einrichten und sich nur auf die Entwicklung konzentrieren können.

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

Der Mechanismus des Hot-Updates besteht darin, Dateiänderungen zu erkennen und Websocket zu verwenden, um den Client zu benachrichtigen, entsprechende Aktualisierungen vorzunehmen. Weitere Informationen finden Sie unter: [Webpack] – Modul-Hot-Replacement

2.vue-router

Vue-Routing ist immer noch sehr praktisch, viel praktischer als ag1. Diese Bequemlichkeit spiegelt sich in drei Aspekten wider:

1 ist die Entsprechung zwischen Routing und Seiten (Komponenten):

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

So denken normale Menschen, und ag1 muss auch Controller (ein solches Konzept gibt es in Vue nicht, sondern konzentriert sich nur auf die Komponente), was die Verwendung erleichtert. Im MVC-Modus müssen Sie auf die Aktion unter dem Controller verweisen. Wenn viele Navigationskategorien vorhanden sind, ist die entsprechende Strategie verschachteltes Routing.

2 kann spezifisch für Elemente sein:

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

Das Zuhause (ohne Berücksichtigung der Groß-/Kleinschreibung) danach ist der oben definierte Routenname. Das ist sehr praktisch. Routing ähnlich wie Asp.net MVC kann den Pfad nach Namen rendern, ohne dass der Pfad ständig eingegeben werden muss.

3 sind Event-Interceptions:

Wenn wir überprüfen möchten, ist es am besten, dies zu überprüfen, bevor der Benutzer die Seite erreicht:

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

Zum Beispiel in beforeEach zur Bearbeitung. Es hat auch viele Funktionen, daher werde ich sie nicht alle auflisten: http://router.vuejs.org/zh-cn/

3. Verwenden Sie Komponenten in Komponenten

Um zu sehen, dass ich mehrere mobile UI-Bibliotheken verwendet habe, war ich zunächst überrascht, dass es keine Fußzeilenkomponente gab. Jetzt verstehe ich, dass die Benutzeroberfläche eines Drittanbieters nicht erforderlich ist, um die Fußzeile zu kapseln um es zu kapseln (weil es auf Routing basiert). Daher ist die Navigation wahrscheinlich die erste Komponente, die Sie selbst schreiben müssen.

Zum Beispiel ist eine Footer.vue definiert