Explication détaillée de la méthode de montage des composants VUE

Cette fois, je vais vous donner une explication détaillée de la méthode de montage des composants VUE, et quelles sont les précautions de montage des composants VUE. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Trois méthodes de montage des composants

Montage automatique

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

Montage manuel

// 可以实现延迟按需挂载
<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. La manière de routage des paramètres

<p>
  <!-- query要用path来引入，params要用name来引入,故不能写为 :to="{path:&#39;/login&#39;,params: {isLogin: true}} -->
  <!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: &#39;/login&#39;, query: {isLogin : true}}); -->
  <!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; -->
  <router-link :to="{name:&#39;login&#39;,params: {isLogin: true}}">亲，请登录</router-link>
  <router-link :to="{name:&#39;login&#39;,params: {isLogin: false}}">免费注册</router-link>
 </p>
 <!-- 路由出口, 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>

3. Compréhension de render:h => h=>h(App) est la méthode d'écriture de la fonction flèche dans ES6, qui équivaut à render:function(h){return h(App);}.

1 Dans la fonction flèche, cela pointe vers. l'objet en dehors de la fonction qui l'enveloppe.

2.h est l'alias de creatElement, la gestion générale de l'écosystème vue

3.template :'', composants :{App} utilisés ensemble et séparément render :h=>h(App) obtiendra le même effet

Le premier reconnaît la balise