简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben： 2018-03-16 11:05:02
Original
10089 Leute haben es durchsucht

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
Nach dem Login kopieren

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
    }
  ]
});
Nach dem Login kopieren

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>
Nach dem Login kopieren
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();
  } 
})
Nach dem Login kopieren
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

    
     
     
     
     首页
     
     
      
      
      统计
     
       
      
      
      更多
Nach dem Login kopieren
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！