Maison > Article > interface Web > Utilisation de base de vue
Utilisation de base de vue
- 巴扎黑original
- 2017-06-26 11:52:13955parcourir
Vue est très populaire maintenant, alors aujourd'hui je vais vous donner une brève introduction
Qu'est-ce que vue exactement ?
Il est basé sur le framework mvvm et est similaire à angulaire. Il est plus petit et plus facile à utiliser.
vue site officiel :
vue site manuel :
Si vous pouvez angulaire, c'est super C'est facile d'apprendre vue. Parce qu'ils sont fondamentalement similaires
La commande vue est v-xxx Vue est composée d'un morceau de code html combiné avec json, et une nouvelle instance de vue est créée. Vue est développée par des individus et maintenue par des individus
vue En raison de sa petite taille, il est plus adapté aux terminaux mobiles. Il n'est pas non plus compatible avec les versions inférieures d'IE comme angulaire
Si vous souhaitez l'utiliser, vous devez d'abord y aller. sur le site officiel de vue pour télécharger son fichier de bibliothèque.
Utilisation de base de 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>Instructions courantes :
Angular a ng-model pour obtenir les données des éléments de formulaire, vue obtient les données des éléments de formulaire car v -Model et angulaire peuvent également effectuer une liaison de données bidirectionnelle.
Il y a ng-repeat dans angulaire pour parcourir les objets json du tableau. Vue est différent. Il utilise v-for='val in arr'.
La boucle vue est également livrée avec chaque indice de {{$index}} Elle apporte également un {{$key}} qui peut afficher le nom de la clé de l'événement json
vue :
Angular a des événements, bien sûr, Vue les a aussi. La différence ici est qu'angular est ng-click et vue est v-on:click=" fn()"
<!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><.>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!