Heim > Artikel > Web-Frontend > Zusammenfassung der Vue-Grundkenntnisse: Vue-Komponentenentwicklung

Zusammenfassung der Vue-Grundkenntnisse: Vue-Komponentenentwicklung

WBOYnach vorne: 2022-08-10 09:56:111791Durchsuche

Dieser Artikel bringt Ihnen Informationen zu vueEr stellt hauptsächlich Probleme im Zusammenhang mit der Entwicklung von Vue-Komponenten vor. Wir können eine unabhängige und wiederverwendbare kleine Komponente entwickeln, um unsere zu erstellen. Werfen wir einen Blick auf die folgenden Anwendungskomponenten es wird für alle hilfreich sein.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

1. Funktionale Programmierung

Funktionale Programmierung ist eine Programmiermethode, die Computeroperationen integriert werden als Berechnungen von Funktionen behandelt. Die wichtigste Grundlage der funktionalen Programmiersprache ist die Lambda-Kalküle, und Lambda-Kalkülfunktionen können Funktionen als Eingabe (Parameter) und Ausgabe (Rückgabewerte) akzeptieren.

Im Vergleich zur imperativen Programmierung betont die funktionale Programmierung, dass die Berechnung von Funktionen wichtiger ist als die Ausführung von Anweisungen.

Im Vergleich zur prozeduralen Programmierung kann die Berechnung von Funktionen in der funktionalen Programmierung jederzeit aufgerufen werden.

Die Filterfunktion filtert automatisch alle Elemente des Objekts und gibt „true“ zurück, bevor es im angegebenen Objekt gespeichert wird.

Die Funktion „Reduzieren“ fasst alle Elemente innerhalb des Arrays zusammen -model

Vue verwendet häufig Formularelemente wie und

. Die Datenbindung dieser Elemente durch Vue unterscheidet sich etwas von der jQuery, die wir zuvor häufig verwendet haben. Vue verwendet das V-Modell, um die bidirektionale Bindung dieser Tag-Daten zu implementieren. Es wählt automatisch die richtige Methode zum Aktualisieren von Elementen basierend auf dem Steuerelementtyp aus. <p></p>
<h3 id="2%E3%80%81%E4%BB%A3%E7%A0%81%E5%AE%9E%E4%BE%8B">1. V-Modell-Zwei-Wege-Bindung <strong></strong><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {{totalPrice()}}
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    methods :{
      totalPrice(){
        const nums = [10,9,21,16,7]
        let total = nums.filter(x => x<10).map(x => x*2).reduce((pre,n)=>pre+n);
        console.log(total)
        return total
      }
    }
  })
</script>
</body>
</html></pre>
</h3>Das Implementierungsprinzip der dynamischen Zwei-Wege-Bindung des V-Modells besteht im Wesentlichen aus zwei Operationen: <h2 id="%E4%BA%8C%E3%80%81v-model"></h2> (1) V-Bind bindet ein Wertattribut <p></p> (2 ) Die v-on-Anweisung bindet das Eingabeereignis an das aktuelle Element<h3 id="1%E3%80%81v-model%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A">
<pre class="brush:php;toolbar:false"><input type="text" v-model="message"></pre>
<strong>2. Verwenden Sie das V-Modell in Kombination mit dem Radio</strong>
</h3>
<p></p>
<p>3. Verwenden Sie das V-Modell in Kombination mit dem CheckBox-Optionsfeld</p>
<p></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  
  <input type="text" :value="message" @input="message = $event.target.value">
  {{message}}
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '哪吒'
    },
    methods: {
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>
</body>
</html></pre> <h3 id="2%E3%80%81v-model%E5%92%8Cradio%E7%BB%93%E5%90%88%E4%BD%BF%E7%94%A8"></h3>
<p><img alt="" src="https://img.php.cn/upload/article/000/000/067/620f98adb6ef2848f53c3da086068630-0.png"> 4. Verwenden Sie das V-Modell in Kombination mit der CheckBox-Mehrfachauswahlbox. </p>
<h3 id="3%E3%80%81v-model%E5%92%8CCheckBox%E5%8D%95%E9%80%89%E6%A1%86%E7%BB%93%E5%90%88%E4%BD%BF%E7%94%A8"><strong></strong></h3>5. Verwenden Sie das V-Modell in Kombination mit Select <p></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
    
    <input type="radio"id="male" value="男" v-model="sex">男
    <input type="radio"id="female" value="女" v-model="sex">女
  </label>
  <h3>您选择的是：{{sex}}</h3>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      sex: '女'
    }
  })
</script>
</body>
</html></pre>
<img alt="" src="https://img.php.cn/upload/article/000/000/067/f9c4dc2b9423c9d9df6629f78b5568e1-1.png"><h3 id="4%E3%80%81v-model%E5%92%8CCheckBox%E5%A4%9A%E9%80%89%E6%A1%86%E7%BB%93%E5%90%88%E4%BD%BF%E7%94%A8">
<strong></strong> 7. Verwendung des V-Modell-Modifikators </h3>
<p></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  
  <label for="license">
    <input type="checkbox"id="license" v-model="isAgree">同意协议
  </label>
  <h3>您选择的是：{{isAgree}}</h3>
  <button :disabled="!isAgree">下一步</button>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isAgree: false
    }
  })
</script>
</body>
</html></pre>
<img alt="" src="https://img.php.cn/upload/article/000/000/067/f9c4dc2b9423c9d9df6629f78b5568e1-2.png"> 3. Komponentenentwicklung <h3 id="5%E3%80%81v-model%E7%BB%93%E5%90%88select%E4%BD%BF%E7%94%A8"> Komponenten sind eine wichtige Idee in Vue.js <strong></strong>
</h3> Sie bieten eine Abstraktion, die es uns ermöglicht, eine unabhängige und wiederverwendbare Lösung zu entwickeln kleine Komponente Zum Erstellen unserer Anwendungskomponenten<p><img alt="" src="https://img.php.cn/upload/article/000/000/067/f9c4dc2b9423c9d9df6629f78b5568e1-3.png">kann HTML-Elemente erweitern und wiederverwendbaren Code kapseln</p>
<h3 id="6%E3%80%81v-for%E5%80%BC%E7%BB%91%E5%AE%9A">Das Komponentensystem ermöglicht es uns, unabhängige wiederverwendbare kleine Komponenten zu verwenden, um große Anwendungen zu erstellen. Die Schnittstelle fast jeder Art von Anwendung kann in einen Komponentenbaum abstrahiert werden </h3>
<p><img alt="" src="https://img.php.cn/upload/article/000/000/067/f9c4dc2b9423c9d9df6629f78b5568e1-4.png">Anwendung komponentenbasierter Ideen </p>
<h3 id="7%E3%80%81v-model%E4%BF%AE%E9%A5%B0%E7%AC%A6%E7%9A%84%E4%BD%BF%E7%94%A8"><strong>Bei der komponentenbasierten Idee müssen wir sie in der zukünftigen Entwicklung voll ausnutzen</strong></h3>Teilen Sie die Seite so weit wie möglich in kleine, wiederverwendbare Komponenten auf<h2 id="%E4%B8%89%E3%80%81%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91"></h2> Das macht unseren Code einfacher zu organisieren und zu verwalten und verfügt über eine starke Skalierbarkeit<p></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  
  <input type="checkbox" value="比比东" v-model="girls">比比东
  <input type="checkbox" value="千仞雪" v-model="girls">千仞雪
  <input type="checkbox" value="美杜莎" v-model="girls">美杜莎
  <input type="checkbox" value="云韵" v-model="girls">云韵
  <input type="checkbox" value="雅妃" v-model="girls">雅妃
  <h3>您选择的是：{{girls}}</h3>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      girls: []
    }
  })
</script>
</body>
</html></pre>
<ul>
<li><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  
  <select name="abc" v-model="girl">
    <option value="云韵">云韵</option>
    <option value="比比东">比比东</option>
    <option value="雅妃">雅妃</option>
    <option value="千仞雪">千仞雪</option>
    <option value="美杜莎">美杜莎</option>
  </select>
  <h3>您的选择是：{{girl}}</h3>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      girl: '云韵'
    }
  })
</script>
</body>
</html></pre></li>
<li>
<li>3<h3 id="4%E3%80%81%E7%BB%84%E4%BB%B6%E5%8C%96%E8%AF%AD%E6%B3%95%E7%B3%96%E5%86%99%E6%B3%95"><strong>4、组件化语法糖写法</strong></h3>
<p>vue为了简化注册组件的过程，提供了语法糖的写法，主要是省去了调用Vue.extend()的步骤，直接使用一个对象替代。</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
</div>
 
<script src="../js/vue.js"></script>
<script>
  //注册组件语法糖写法
  Vue.component('my-cpn',{
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是CSDN哪吒</p>
      </div>
      `
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>
</html></pre>
<h3 id="5%E3%80%81%E7%BB%84%E4%BB%B6%E6%A8%A1%E6%9D%BF%E6%8A%BD%E7%A6%BB%E5%86%99%E6%B3%95">5、组件模板抽离写法</h3>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
 







 

<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是CSDN哪吒</p>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
 
  // 1.注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn'
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
 
</body>
</html></pre>
<h2 id="%E5%9B%9B%E3%80%81%E7%BB%84%E4%BB%B6%E5%8F%AF%E4%BB%A5%E8%AE%BF%E9%97%AEVue%E5%AE%9E%E4%BE%8B%E6%95%B0%E6%8D%AE%E5%90%97%EF%BC%9F"><strong>四、组件可以访问Vue实例数据吗？</strong></h2>
<h3 id="1%E3%80%81%E7%AE%80%E4%BB%8B"><strong>1、简介</strong></h3>
<p>实验发现，组件不能访问Vue实例数据，而且即便可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变得非常臃肿。</p>
<p>Vue组件应该有自己保存数据的地方。</p>
<p>组件自己的数据存放在哪里？</p>
<ul>
<li>组件对象也有一个data属性（也有method等属性）；</li>
<li>只是这个data属性必须是一个函数；</li>
<li>而且这个函数返回一个对象，对象内部保存着数据；</li>
</ul>
<h3><strong>2、代码实例</strong></h3>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>{{title}}</h2>
    <p>我是热门</p>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
 
  // 1.注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: '哪吒必胜'
      }
    }
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      // title: '我是标题'
    }
  })
</script>
 
</body>
</html></pre>
<h3 id="3%E3%80%81%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%C2%A0">3、效果展示 </h3>
<p><img alt="" src="https://img.php.cn/upload/article/000/000/067/0b258ebf2a010865b34556821bc54828-7.png"></p>
<h2 id="%E4%BA%94%E3%80%81%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1">五、父子组件通信</h2>
<h3 id="1%E3%80%81%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%E7%AE%80%E4%BB%8B"><strong>1、父子组件通信简介</strong></h3>
<p>在开发中，往往一些数据确实需要从上层传递到下层：</p>
<p>比如在一个页面中，我们从服务器请求到了很多的数据。</p>
<p>其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。</p>
<p>这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。</p>
<p>如何进行父子组件间的通信呢？Vue官方提到：</p>
<p>通过props向子组件传递数据</p>
<p>通过事件向父组件发送消息</p>
<p><img alt="" src="https://img.php.cn/upload/article/000/000/067/0b258ebf2a010865b34556821bc54828-8.png"></p>
<p>在组件中，使用选项props来声明需要从父级接收到的数据。</p>
<p>props的值有两种方式：</p>
<p>方式一：字符串数组，数组中的字符串就是传递时的名称。</p>
<p>方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。</p>
<h3 id="2%E3%80%81%E7%88%B6%E4%BC%A0%E5%AD%90%E4%BB%A3%E7%A0%81%E5%AE%9E%E4%BE%8B">2、父传子代码实例</h3>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  
  
 
  <cpn :cmessage="message" :cgirls="girls"></cpn>
</div>
 
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cgirls">{{item}}</li>
    </ul>
    <h2>{{cmessage}}</h2>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
  // 父传子: props
  const cpn = {
    template: '#cpn',
    // props: ['cgirls', 'cmessage'],
    props: {
      // 1.类型限制
      // cgirls: Array,
      // cmessage: String,
 
      // 2.提供一些默认值, 以及必传值
      cmessage: {
        type: String,
        default: 'aaaaaaaa',
        required: true
      },
      // 类型是对象或者数组时, 默认值必须是一个函数
      cgirls: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {
 
    }
  }
 
  const app = new Vue({
    el: '#app',
    data: {
      message: 'CSDN哪吒',
      girls: ['云韵', '比比东', '雅妃']
    },
    components: {
      cpn
    }
  })
</script>
</body>
</html></pre>
<h3 id="3%E3%80%81%E7%88%B6%E4%BC%A0%E5%AD%90%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%C2%A0"><strong>3、父传子效果展示 </strong></h3>
<p><img alt="" src="https://img.php.cn/upload/article/000/000/067/c0432c9e0b10c8fd8712f21bdb5af889-9.png"></p>
<h3 id="4%E3%80%81props%E4%B8%AD%E7%9A%84%E9%A9%BC%E5%B3%B0%E6%A0%87%E8%AF%86"><strong>4、props中的驼峰标识</strong></h3>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <cpn :c-info="info" :child-my-message="message" v-bind:class></cpn>
</div>
 
<template id="cpn">
  <div>
    <h2>{{cInfo}}</h2>
    <h2>{{childMyMessage}}</h2>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    props: {
      cInfo: {
        type: Object,
        default() {
          return {}
        }
      },
      childMyMessage: {
        type: String,
        default: ''
      }
    }
  }
 
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: '哪吒',
        age: 18,
        height: 1.88
      },
      message: 'csdn博客专家'
    },
    components: {
      cpn
    }
  })
</script>
 
</body>
</html></pre>
<p>效果展示 </p>
<p><img alt="" src="https://img.php.cn/upload/article/000/000/067/c0432c9e0b10c8fd8712f21bdb5af889-10.png"></p>
<h3 id="5%E3%80%81%E5%AD%90%E4%BC%A0%E7%88%B6%EF%BC%88%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%E6%96%B9%E5%BC%8F%EF%BC%89"><strong>5、子传父（自定义事件方式）</strong></h3>
<p>自定义事件方式完成子传父。</p>
<p>什么时候需要自定义事件呢？</p>
<p>当子组件需要向父组件传递数据时，就要用到自定义事件了。</p>
<p>我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。</p>
<p>自定义事件的流程：</p>
<ul style="list-style-type: disc;">
<li><p>在子组件中，通过$emit()来触发事件。</p></li>
<li><p>在父组件中，通过v-on来监听子组件事件。</p></li>
</ul>
<h3 id="6%E3%80%81%E5%AD%90%E4%BC%A0%E7%88%B6%E4%BB%A3%E7%A0%81%E5%AE%9E%E4%BE%8B"><strong>6、子传父代码实例</strong></h3>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 

<div id="app">
  <cpn @item-click="cpnClick"></cpn>
</div>
 

<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
 
  // 1.子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: '1', name: '云韵'},
          {id: '2', name: '比比东'},
          {id: '3', name: '雅妃'},
          {id: '4', name: '纳兰嫣然'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        // 发射事件: 自定义事件
        this.$emit('item-click', item)
      }
    }
  }
 
  // 2.父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: 'csdn哪吒'
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        console.log('cpnClick', item);
      }
    }
  })
</script>
 
</body>
</html></pre>
<h3 id="7%E3%80%81%E5%AD%90%E4%BC%A0%E7%88%B6%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA">7、子传父效果展示</h3>
<p><img alt="" src="https://img.php.cn/upload/article/000/000/067/c0432c9e0b10c8fd8712f21bdb5af889-11.png"></p>
<p>【相关推荐：<a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript视频教程</a>、<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端</a>】</p>
</li>
</ul><p>Das obige ist der detaillierte Inhalt vonZusammenfassung der Vue-Grundkenntnisse: Vue-Komponentenentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Eingehende Analyse der globalen Axios-Konfiguration, der Interceptoren und des domänenübergreifenden Proxy-Proxys (Bild und Text)" href="http://m.php.cn/de/faq/494788.html">Eingehende Analyse der globalen Axios-Konfiguration, der Interceptoren und des domänenübergreifenden Proxy-Proxys (Bild und Text)</a></span><span>Nächster Artikel：<a class="dBlack" title="Eingehende Analyse der globalen Axios-Konfiguration, der Interceptoren und des domänenübergreifenden Proxy-Proxys (Bild und Text)" href="http://m.php.cn/de/faq/494790.html">Eingehende Analyse der globalen Axios-Konfiguration, der Interceptoren und des domänenübergreifenden Proxy-Proxys (Bild und Text)</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/494763.html" title="Eingehende Analyse der API für berechnete Eigenschaften von Vue (berechnet)" class="aBlack">Eingehende Analyse der API für berechnete Eigenschaften von Vue (berechnet)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/494764.html" title="Ein Artikel, der den Unterschied zwischen watch und watchEffect in Vue erklärt" class="aBlack">Ein Artikel, der den Unterschied zwischen watch und watchEffect in Vue erklärt</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/494772.html" title="Implementierung von VUE-Instanzparsing und Mount-Instanzmontage" class="aBlack">Implementierung von VUE-Instanzparsing und Mount-Instanzmontage</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/494773.html" title="Einführung in die Verwendung von vue3 Axios und Datenrendering" class="aBlack">Einführung in die Verwendung von vue3 Axios und Datenrendering</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/494778.html" title="Ausführliche Erläuterung der bidirektionalen Bindung von Vue-Daten und der Konfiguration der Datei vue.config.js" class="aBlack">Ausführliche Erläuterung der bidirektionalen Bindung von Vue-Daten und der Konfiguration der Datei vue.config.js</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai"  >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs"  ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a  onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan "  href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a  onclick="javascript:setlang('en');" class="language course-right-orders chooselan "  href="javascript:;"><span>English</span><span>（EN）</span></a><a  onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan "  href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a  onclick="javascript:setlang('ja');" class="language course-right-orders chooselan "  href="javascript:;"><span>日本語</span><span>（JA）</span></a><a  onclick="javascript:setlang('ko');" class="language course-right-orders chooselan "  href="javascript:;"><span>한국어</span><span>（KO）</span></a><a  onclick="javascript:setlang('ms');" class="language course-right-orders chooselan "  href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a  onclick="javascript:setlang('fr');" class="language course-right-orders chooselan "  href="javascript:;"><span>Français</span><span>（FR）</span></a><a  onclick="javascript:;" class="language course-right-orders chooselan chooselanguage"  href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script>            var swiper = new Swiper('.nphpNavSwiper1', {
                slidesPerView : 'auto',
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper

});
        </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>