Zusammenfassung der wichtigsten VUE-Themen

Dieser Artikel fasst die wichtigen und schwierigen Punkte von VUE zusammen und teilt den Code im Detail. Interessierte Freunde können ihn als Referenz verwenden.

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: &#39;张三&#39;} 
 var vm = new Vue({ 
 data: obj
 }) 
 function test() { 
 vm.$mount("#app"); 
 }

// 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实例，并挂载到一个元素上

2 , Der Weg der Routing-Parameter

<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. Verstehen Sie render:h => h (App)

new Vue({
 el: '#app', // 相当于 new Vue({}).$mount('#app');
 template: &#39;<App/>&#39;, // 1、可以通过在 #app 内加入<app></app>替代 2、或者 通过 render: h => h(App) 渲染一个视图，然后提供给el挂载
 components: { // vue2中可以通过 render: h => h(App) 渲染一个视图，然后提供给el挂载
  App
 }
});

: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:'', Komponenten:{App} werden zusammen und getrennt verwendet render :h=>h(App) erzielt den gleichen Effekt

Ersteres erkennt das