Zusammenfassung allgemeiner Anweisungen in vue.js

Dieses Mal werde ich Ihnen eine Zusammenfassung der allgemeinen Anweisungen von vue.js geben. Was sind die Vorsichtsmaßnahmen, wenn Sie die allgemeinen Anweisungen von vue.js verwenden? sehen.

Vue.js ist eine sehr beliebte JavaScript MVVM-Bibliothek (Model-View-ViewModel). Sie basiert auf datengesteuerten und komponentenbasierten Ideen. Im Vergleich zu Angular.js bietet Vue.js eine einfachere und leichter verständliche API, die uns einen schnellen Einstieg und die Verwendung von Vue.js ermöglicht.

Wenn Sie es gewohnt sind, jQuery zum Betreiben des DOM zu verwenden, sollten Sie beim Erlernen von Vue.js die Idee, das DOM manuell zu manipulieren, beiseite legen. Da Vue.js datengesteuert ist, ist keine manuelle Bedienung erforderlich das DOM. Es bindet DOM und Daten durch eine spezielle HTML-Syntax. Sobald Sie die Bindung erstellt haben, bleibt das DOM mit den Daten synchron und jedes Mal, wenn sich die Daten ändern, wird das DOM entsprechend aktualisiert.

Wenn Sie Vue.js verwenden, können Sie es natürlich auch in Verbindung mit anderen Bibliotheken wie jQuery verwenden.

1. Verwenden Sie

Der Prozess der Verwendung von Vue ist der Prozess der Definition der verschiedenen Komponenten von MVVM (Model-View-ViewModel).

<!--这里定义View-->
<p id="app">{{ message }}</p>
<script src="js/vue.js"></script>
<script>
    // 这里定义Model
    var exampleData = {
      message: 'Hello World!'
    }
    // 这里创建一个 Vue 实例或 "ViewModel"
    // 连接 View 与 Model
    new Vue({
      el: '#app',
      data: exampleData
    })
</script>

2. Allgemeine Befehle von Vue.js

Vue.js bietet einige häufig verwendete integrierte Anweisungen. Als Nächstes stellen wir die folgenden integrierten Anweisungen vor:

•v-if-Befehl
•v-show-Befehl
•v-else-Befehl
•v-for-Befehl
•v-bind-Befehl
•v-on-Befehl

Vue.js verfügt über eine gute Skalierbarkeit und wir können auch einige benutzerdefinierte Anweisungen entwickeln, die in späteren Artikeln vorgestellt werden.

2.1 v-if-Anweisung

Auf v-if folgt ein Ausdruck

, der in einen

<p id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-if="yes">Yes!</h1>
      <h1 v-if="no">No!</h1>
      <h1 v-if="age >= 25">Age: {{ age }}</h1>
      <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
</p>
 <script src="js/vue.js"></script>
 <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
 </script>

Booleschen Typ

konvertiert werden kann Hier ist die endgültige Ausgabe

<p id="app">
  <h1>Hello, Vue.js!</h1>
  <h1>Yes!</h1>
  <!---->
  <h1>Age: 28</h1>
  <!---->
</p>

2.2 V-Show

 <p id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-show="yes">Yes!</h1>
      <h1 v-show="no">No!</h1>
      <h1 v-show="age >= 25">Age: {{ age }}</h1>
      <h1 v-show="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
    </p>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
  </script>

Der Code hier ist nur v-if, geändert in v-show

Die Ausgabe ist

<p id="app">
<h1>Hello, Vue.js!</h1>
<h1>Yes!</h1>
<h1 style="display: none;">No!</h1>
<h1>Age: 28</h1>
<h1 style="display: none;">Name: keepfool</h1>
</p>

Der Unterschied besteht darin, dass das obige v-if den HTML-Code nicht direkt ausgibt. Verwenden Sie hier display:none, um

auszublenden 2.3 v-else-Befehl

<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        age: 28,
        name: 'keepfool',
        sex: 'Male'
      }
    })
</script>

Das vorherige Geschwisterelement muss v-if oder haben v-else-if, die neue Version von vue.js hat die gleiche Verwendung wie v-if, aber das vorherige Geschwisterelement muss v-if oder v-else-if haben Vor der Version von v-else steht v-else-if. Darauf kann v-show folgen, der neuen Version von v-else kann jedoch kein v-show vorangestellt werden.

2.4 v-for-Befehl

<p v-for="p in people">
   <h1>Age: {{ p.age }}</h1>
   <h1>Name: {{ p.name }}</h1>
   <h1>Sex: {{ p.sex }}</h1>
</p>
<script charset="utf-8" src="js/vue.js"></script>
<script type="text/javascript">
   var myModel = {
    people:[
      {
        age: 25,
        name: 'keepfool',
        sex: 'Male'
      },
      {
        age: 26,
        name: 'keepfool2',
        sex: 'FeMale'
      },
      {
        age: 27,
        name: 'keepfool3',
        sex: 'Male2'
      }
    ]
  };
 var vm = new Vue({
  el: '#app',
  data: myModel
})
</script>

Das übergeordnete Element verwendet v-for und das untergeordnete Element kann die gebundene entsprechende Array-Objektnummer | durchlaufen v-for kann auch so verwendet werden:

<p v-for="(item, index) in items"></p>
<p v-for="(val, key) in object"></p>
<p v-for="(val, key, index) in object"></p>

2,5 V-Bind-Befehl

Die v-bind-Direktive kann nach ihrem Namen einen durch einen Doppelpunkt getrennten Parameter annehmen. Dieser Parameter ist normalerweise das Attribut des

HTML-Elements

Ein weiteres Beispiel:

<p id="app">
   <ul class="pagination">
     <li v-for="n in pageCount">
       <a href="javascripit:void(0)" rel="external nofollow" v-bind:class="activeNumber === n ? &#39;active&#39; : &#39;&#39;">{{ n }}</a>
     </li>
   </ul>
</p>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        activeNumber: 1,
        pageCount: 10
      }
    })
  </script>

<img v-bind:src="&#39;/path/to/images/&#39; + fileName">
<p v-bind="{ &#39;id&#39;: someProp, &#39;other-attr&#39;: otherProp }"></p>

2.6 v-on-Befehl

<p id="app">
      <p><input type="text" v-model="message"></p>
      <p>
        <!--click事件直接绑定一个方法-->
        <button v-on:click="greet">Greet</button>
      </p>
      <p>
        <!--click事件使用内联语句-->
        <button v-on:click="say(&#39;Hi&#39;)">Hi</button>
      </p>
</p>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue.js!'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function() {
          // // 方法内 `this` 指向 vm
          alert(this.message)
        },
        say: function(msg) {
          alert(msg)
        }
      }
    })
  </script>

2.7 V-Modell-Befehl

v-model erstellt eine bidirektionale Datenbindung für Formularsteuerelemente

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonZusammenfassung allgemeiner Anweisungen in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!