suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Anwendungsfälle von V-Bind und V-On

Detaillierte Erläuterung der Anwendungsfälle von V-Bind und V-On

php中世界最好的语言
php中世界最好的语言Original
2018-05-14 13:52:122528Durchsuche

Dieses Mal werde ich Ihnen die Anwendungsfälle von v-bind und v-on ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von v-bind und v-on? Fall, werfen wir einen Blick darauf.

v-bind-Direktive wird verwendet, um HTML-Funktionen reaktionsfähig zu aktualisieren. Die Form ist: v-bind:href, abgekürzt als :href;

v-on-Direktive wird zur Überwachung verwendet DOM Ereignisse Zum Beispiel: v-on:click abgekürzt als @click;

<body>
 <p id="test">
  <img v-bind:src="src">
  <a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
  <a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
  <a href="{{url}}" rel="external nofollow" >百度一下</a>
  <a v-on:click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>
  <a @click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>
 </p>
 <script type="text/javascript">
  new Vue({
   el: '#test',
   data: {
    url: "https://www.baidu.com",
    src: "img/spring.jpg"16 17 18    },
   methods: {
    update: function(){
     this.src = "img/summer.jpg";
    }
   }
  })
 </script>
</body>

Hinweis: Diese beiden Anweisungen sind erst nach vue.js Version 1.0 verfügbar

v- bind, Abkürzung für v-on

Beim Erstellen einer Single Page Application (SPA) verwaltet Vue.js alle Vorlagen und das v- Präfix lautet ​​zu diesem Zeitpunkt nicht so wichtig. Daher stellt Vue.js spezielle Abkürzungen für die beiden am häufigsten verwendeten Anweisungen v-bind und v-on zur Verfügung:

Das Folgende ist die Abkürzung von v-bind: 

<!-- 完整语法 --> 
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
<!-- 缩写 --> 
<a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
<!-- 完整语法 --> 
<button v-bind:disabled="someDynamicCondition">Button</button> 
<!-- 缩写 --> 
<button :disabled="someDynamicCondition">Button</button>

v-on-Abkürzung: 

<!-- 完整语法 --> 
<a v-on:click="doSomething"></a> 
<!-- 缩写 --> 
<a @click="doSomething"></a>

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 zum Thema PHP Chinesische Website!

Empfohlene Lektüre:

JS+HTML5 zum Erstellen mausgebundener Partikelflussanimationen

vuex+localstorage überwacht den Speicher dynamisch Detaillierte Erklärung der Schritte

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsfälle von V-Bind und V-On. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Schritte zur Steuerung von Routing-Berechtigungen mit React Router4+ReduxNächster Artikel：Detaillierte Erläuterung der Schritte zur Steuerung von Routing-Berechtigungen mit React Router4+Redux

In Verbindung stehende Artikel

Mehr sehen