Résumé de la construction de vues et de l'utilisation du routage

Cette fois, je vais vous apporter un résumé de la construction et de l'utilisation de Vue. Quelles sont les précautions pour la construction et l'utilisation de Vue. Voici des cas pratiques, jetons un coup d'œil.

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