Heim > Artikel > Web-Frontend > Grundlegende Verwendung von Vue

Grundlegende Verwendung von Vue

巴扎黑Original: 2017-06-26 11:52:131008Durchsuche

Vue ist mittlerweile sehr beliebt, deshalb werde ich heute eine kurze Einführung geben

Was genau ist Vue?

Es basiert auf dem MVVM-Framework und ähnelt Angular. Es ist kleiner und einfacher zu verwenden.

offizielle Vue-Website:

Vue-Handbuch-Website:

Wenn Sie eckig können, ist es das großartig. Es ist einfach, Vue zu lernen. Weil sie im Grunde ähnlich sind

Der Vue-Befehl lautet v-xxx. Vue besteht aus einem Stück HTML-Code in Kombination mit JSON und erstellt eine neue Vue-Instanz. Vue wird von Einzelpersonen entwickelt und von Einzelpersonen verwaltet

vue Aufgrund seiner geringen Größe eignet es sich besser für mobile Endgeräte. Es ist auch nicht mit niedrigeren Versionen von IE wie Angular kompatibel.

Wenn Sie es verwenden möchten, müssen Sie zuerst gehen Besuchen Sie die offizielle Vue-Website, um die Bibliotheksdatei herunterzuladen.

Grundlegende Verwendung von Vue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box"> //上面说了我们需要一片html代码来展示数据

　　　　{{msg}} //这样我们就完成了一条数据的基本展示
　　</div> 
　　　

　　<script src="vue.js?1.1.11"></script>
　　<script>
　　　　new Vue({   //new 一个实例来展示一条基本数据
　　　　　　el:"#box", //el意思是element这个是固定的后边的是页面中你要展示数据到那个元素，就类似于anguar的控制器。 只是angular是写在html
　　　　　　　　　　　　　　页面中这个是获取到了元素然后再展示。它里面是选择器class id 标签名都是可以的。
　　　　　　data:{     //data也是定死的
　　　　　　　　msg:"这是一条数据"    //这其中就是数据当然他是个对象你可以写多条数据,还有这里面只可以放数据不可以是函数
　　　　　　}
　　　　})
　　</script>
</body>
</html>

Allgemeine Anweisungen:

Angular verfügt über ein NG-Modell, um Formularelementdaten abzurufen. Vue ruft Formularelementdaten ab as v -Model und Angular können auch eine bidirektionale Datenbindung durchführen.

Es gibt ng-repeat in angle, um Array-JSON-Objekte zu durchlaufen. Es verwendet v-for='val in arr'. Natürlich ist die Verwendung immer noch dieselbe, nur indem der Name geändert wird .

Die Vue-Schleife kommt auch mit jedem Index von {{$index}}. Sie bringt auch einen {{$key}} mit, der den Schlüsselnamen von JSON anzeigen kann

vue-Ereignis:

Angular hat Ereignisse, natürlich hat Vue sie auch. Der Unterschied besteht darin, dass Angular ng-click und Vue v-on:click="fn()" ist

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box"> //上面说了我们需要一片html代码来展示数据
　　　　　<button v-on:click="fn()"></button>  //v-on:    后面可以跟你任何想跟的事件。
　　　　{{msg}} //这样我们就完成了一条数据的基本展示
　　</div> 
　　　

　　<script src="vue.js?1.1.11"></script>
　　<script>
　　　　new Vue({   
　　　　　　el:"#box",
　　　　　　data:{    
　　　　　　　　msg:"这是一条数据"    //这里只可以是数据
　　　　　　}，
　　　　　　methods:{    //这里写方法
　　　　　　　　fn:function(){ //如果你要使用上边的数据也不太一样angular是 $scope.a
　　　　　　　　　　alert(1);
　　　　　　　　　　alert(this.msg);   //这个this代表new的实例对象所以 this.msg 就调用到上边的数据了
　　　　　　　　}
　　　　　　}
　　　　})
　　</script>

</body>
</html>

Das obige ist der detaillierte Inhalt vonGrundlegende Verwendung von Vue. 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：Eine einfache Einführung in objektorientiertes JavaScriptNächster Artikel：Eine einfache Einführung in objektorientiertes JavaScript

In Verbindung stehende Artikel

Mehr sehen