Résumé des questions clés du VUE-js tutoriel-php.cn

Cet article résume les points importants et difficiles de VUE et partage le code en détail. Les amis intéressés peuvent s'y référer pour référence.

1. Trois méthodes de montage des composants

Montage automatique

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

Copier après la connexion

Montage manuel

// 可以实现延迟按需挂载
<p id="app"> {{name}} </p> 
<button onclick="test()">挂载</button> 
<script> 
 var obj= {name: &#39;张三&#39;} 
 var vm = new Vue({ 
 data: obj
 }) 
 function test() { 
 vm.$mount("#app"); 
 }

Copier après la connexion

// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例
var app= Vue.extend({ 
 template: &#39;<p>{{message}}</p>&#39;, 
 data: function () { 
 return { 
  message: &#39;message&#39;
  } 
 } 
 }) 
 new app().$mount(&#39;#app&#39;) // 创建 app实例，并挂载到一个元素上

Copier après la connexion

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>

Copier après la connexion

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