Heim > Artikel > Web-Frontend > Zusammenfassung der Vue-Konstruktion und Routing-Nutzung
Dieses Mal werde ich Ihnen eine Zusammenfassung der Vue-Konstruktion und Routing-Nutzung geben. Was sind die Vorsichtsmaßnahmen für die Vue-Konstruktion und Routing-Nutzung?
Drei Montagemethoden für Komponenten
Automatische Montage
var app3 = new Vue({ el: '#app-3', data: { seen: true } })
Manuelle Montage
// 可以实现延迟按需挂载 <p id="app"> {{name}} </p> <button onclick="test()">挂载</button> <script> var obj= {name: '张三'} var vm = new Vue({ data: obj }) function test() { vm.$mount("#app"); }
// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例 var app= Vue.extend({ template: '<p>{{message}}</p>', data: function () { return { message: 'message' } } }) new app().$mount('#app') // 创建 app实例,并挂载到一个元素上
2 , Der Weg von Routing-Parametern
<p> <!-- query要用path来引入,params要用name来引入,故不能写为 :to="{path:'/login',params: {isLogin: true}} --> <!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); --> <!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; --> <router-link :to="{name:'login',params: {isLogin: true}}">亲,请登录</router-link> <router-link :to="{name:'login',params: {isLogin: false}}">免费注册</router-link> </p> <!-- 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view>
3. Verstehen Sie render:h => h (App)
render:h=>h (App). Pfeilfunktions-Schreibmethode in ES6, die render:function(h){return h(App);} entspricht.
1. Dies in der Pfeilfunktion zeigt außerhalb der Funktion, die dies auf das Objekt umschließt .
2.h ist der Alias von creatElement, der allgemeinen Verwaltung des Vue-Ökosystems
3.template:'
Ersteres erkennt das -Tag und letzteres analysiert die ID unter der Vorlage direkt als p der App (ignoriert). Existenz der Vorlage)
new Vue({ el: '#app', // 相当于 new Vue({}).$mount('#app'); template: '<App/>', // 1、可以通过在 #app 内加入<app></app>替代 2、或者 通过 render: h => h(App) 渲染一个视图,然后提供给el挂载 components: { // vue2中可以通过 render: h => h(App) 渲染一个视图,然后提供给el挂载 App } });
4. Verständnis von Vue.nextTick()
Die DOM-bezogenen Operationen werden in den Funktionsrückruf geschrieben, um sicherzustellen, dass das DOM vorhanden ist wurde gerendert
nextTick Origin:
Da die datengesteuerte Ansichtsaktualisierung von VUE asynchron ist, d. h. wenn die Daten geändert werden, wird die Ansicht nicht sofort aktualisiert. Es wird jedoch gewartet, bis alle Datenänderungen in derselben Ereignisschleife abgeschlossen sind.
Trigger-Timing von nextTick:
Nachdem sich die Daten in derselben Ereignisschleife geändert haben, schließt das DOM die Aktualisierung ab und der Rückruf in nextTick(callback) wird sofort ausgeführt.
Anwendungsszenario:
Nach der Aktualisierung der Ansicht muss auf der Grundlage der neuen Ansicht gearbeitet werden.
Die DOM-Operation, die in der Hook-Funktion „created()“ des Vue-Lebenszyklus ausgeführt wird, muss in der Rückruffunktion von Vue.nextTick platziert werden () Mitte. Was ist der Grund? Der Grund dafür ist, dass das DOM überhaupt nicht gerendert wird, wenn die Hook-Funktion create() ausgeführt wird, und DOM-Operationen zu diesem Zeitpunkt vergeblich sind, sodass der js-Code für DOM-Operationen in Vue eingefügt werden muss. In der Callback-Funktion von nextTick(). Dies entspricht der gemounteten Hook-Funktion. Da bei Ausführung dieser Hook-Funktion das gesamte Mounten und Rendern des DOM abgeschlossen ist, treten bei der Ausführung von DOM-Vorgängen in dieser Hook-Funktion keine Probleme auf.
Wenn eine Operation ausgeführt werden muss, nachdem sich die Daten geändert haben, und diese Operation die Verwendung einer DOM-Struktur erfordert, die sich ändert, wenn sich die Daten ändern, sollte diese Operation in die Rückruffunktion von Vue.nextTick() eingefügt werden .Eine kurze Zusammenfassung der Ereignisschleife:
Synchronische Codeausführung-> Finden Sie die asynchrone Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website! Empfohlene Lektüre:vue-cli+webpack erstellt einen Projektfehlerbericht
Wie das jquery Fullpage-Plug-in funktioniert der Kopf und das Ende
Das obige ist der detaillierte Inhalt vonZusammenfassung der Vue-Konstruktion und Routing-Nutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!