Vue 2.0 Grundlagen im Detail

// Vue-Einzelseiteninstanz <template>
    Etikett...
</Vorlage>
<Skript>
    Standard exportieren {
      Daten () {},
      Methoden: {},
      berechnet: {},
      betrachten: {}
    }
</Skript>
<Stil>
    Stil...
</Stil>

Daten() {
    zurückkehren {
        Anzahl: 2
        Anzahl Kopien: 1
    }
}

// Mit this.count // 2

// Die berechnete Eigenschaft akzeptiert keine Parameter, speichert abhängige Daten im Cache und muss eine Rückgabe haben
berechnet: {
    doubleCount: Funktion () {
      gib dies zurück.Anzahl *= 2
    },
}

// Verwenden von this.doubleCount // 4

Methoden: {
    cLog(Nachricht) {
        Konsole.log(Nachricht)
    }
}

// Use this.cLog('Die Funktion wurde aufgerufen') // Konsolenausgabe: Die Funktion wurde aufgerufen

betrachten:
    Anzahl(Wert, [alterWert]) {
        // Wert: der geänderte Wert this.copyCount = Wert + 1
    }
}

// Wird automatisch ausgelöst, wenn sich die Anzahl ändert. this.count = 2
diese.copyCount // 3

importiere UploadImg von 'xxxx'

Komponenten: { UploadImg }

// Vorlage
<Bild hochladen>

// NPM herunterladen npm install vue-router
// router.js
Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
Vue.use(VueRouter)

//Seitenrouting definieren (Pfad, Komponente)
exportiere standardmäßig einen neuen Router({
    { Pfad: '/foo', Komponente: () => import('/pages/foo') }, // Routing-Komponente Lazy Loading { Pfad: '/bar', Komponente: '/pages/bar'}
})
// Haupt.js
Router aus „./router.js“ importieren
neuer Vue({
  el: '#app',
  Router, // Mounten Sie die Route zur Vue-Instanz render: h => h(App)
})

// Seite.vue
<!-- Es ist wichtig, die Beziehung zwischen den beiden zu unterscheiden -->
this.$router // Zugriff auf den Router, integrierte Push- und Replace-Routingmethoden this.$route // Zugriff auf die aktuelle Route, den integrierten Pfad, die Abfrage und andere Routingattribute // app.vue
<!-- Komponenten, die mit der Route übereinstimmen, werden hier gerendert-->
<Router-Ansicht></Router-Ansicht>

<router-link :to="...">
<router-link :to="..." ersetzen>

this.$router.push({ Pfad: 'registrieren', Abfrage: { Plan: 'privat' }})
this.$router.replace(...) // Der Unterschied zu Push besteht darin, dass keine Verlaufsdatensätze eingefügt werden. this.$router.go( [Number] n ) // Wie viele Schritte vorwärts oder rückwärts im Verlaufsdatensatz // Wenn der Routenparameter Chinesisch enthält, wird empfohlen, ihn zuerst mit encodeURLComponent zu transkodieren, um verstümmelte Zeichen zu vermeiden.

// Weiterleitung zu /login, wenn die Authentifizierung des Benutzers fehlschlägt
router.beforeEach((bis, von, weiter) => {
  // to ist das einzugebende Routenobjekt, from ist die Quellroute, next ist die Hook-Funktion, ob freigegeben werden soll, if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  sonst weiter()
})

router.beforeResolve((zu, von, weiter) => {
  // ...
})

router.afterEach((bis, von) => {
  // Dieser Routenwächter akzeptiert die nächste Hook-Funktion nicht // ...
})

const router = neuer VueRouter({
  Routen: [
    {
      Pfad: '/foo',
      Komponente: Foo,
      beforeEnter: (bis, von, weiter) => {
        // ...
      }
    }
  ]
})

vorRouteEnter
beforeRouteUpdate (neu in 2.2)
vorRouteVerlassen

//store.js
Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)
...

exportiere standardmäßig neuen Vuex.Store({
  Zustand,
  Getter,
  Mutationen,
  Aktionen,
  Module
})
// Haupt.js
Store aus „./store“ importieren

Vue.prototype.$store = speichern

//store.js
konstanter Zustand = {
    Name: 'zzz'
}

<!--page.vue-->
// 1. Rufen Sie direkt this.$store.state.name auf // 'zzz'
// 2. Hilfsfunktionsmapping berechnet: {
    ...mapState(['name'])
}
dieser.name // 'zzz' 

const Mutationen = {
    updateName(status, neuerName) {
        state.name = neuerName
    }
}

<!--page.vue-->
// 1. Rufen Sie this.$store.commit(updateName, 'zzh') direkt auf // state.name: 'zzh'
// 2. Methoden zur Zuordnung von Hilfsfunktionen: {
    ...mapMutations(['updateName'])
}
this.updateName('zzh') // Status.Name: 'zzh'

const Aktionen = {
    asyncUpdateName(Kontext) {
        // Asynchroner Vorgang, z. B. das Einleiten einer HTTP-Anforderung zum Abrufen des aktualisierten Namens, vorausgesetzt, Name=xxx
        ...
        Kontext.commit('Updatename', Res.name) // Status.name: 'xxx'
    }
}

<!--page.vue-->
// 1. Rufen Sie this.$store.dispatch(asyncUpdateName) direkt auf
// 2. Methoden zur Zuordnung von Hilfsfunktionen: {
    ...mapActions(['asyncUpdateName'])
}
dies.asyncUpdateName()

const getter = {
    formatName(Staat) {
        Rückgabewert: Staat.Name + '2021'
    }
}

<!--page.vue-->
// 1. Rufen Sie direkt this.$store.getter.formatName() auf // 'xxx2021'
// 2. Hilfsfunktionsmapping berechnet: {
    ...mapGetters(['formatName'])
}
dies.formatName() // // 'xxx2021'

// Innerhalb des Moduls this.$store.state.name // Für den internen Zugriff wird kein Namespace benötigt. // Außerhalb des Moduls this.$store.state.login.name // login ist der Namespace des Moduls …
Andere Eigenschaften sind ähnlich

<!-- api.js -->
Axios von „Axios“ importieren

// Erstellen und konfigurieren Sie eine Instanz axios.create({
    baseURL: „http://www.baidu.com“, // Timeout der Anforderungsbasisadresse: 1000 // Anforderungs-Timeout …
})

//Abfangjäger anfordern axios.interceptors.request.use(request => {
    request.headers['Inhaltstyp'] = 'Anwendung/json'
    ...
})
// Antwort-Interceptor axios.interceptors.response.use(response => {
    ...
    Antwortdaten zurückgeben
})
//Anforderungsexportstandard konfigurieren {
    getId: () => axios.get('/getId'),
    getNameById: id => axios.post('/getNameById', id)
}

<!-- main.js -->
API aus „./api.js“ importieren

Vue.prototype.$api = api
<!-- Seite.vue -->
dies.$api.getId().then(res => {
    ...
}).fangen()