Table des matières
Exemple de démarrage
1. Introduisez d'abord l'environnement de production vue dans la page html et collez le code suivant dans la balise body
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. Faisons un exemple d'introduction, comme suit.
el point de montage
La partie entourée d'accolades sera remplacée par la donnée du même nom dans data.
Vous pouvez également utiliser le sélecteur de classe, mais il est recommandé d'utiliser le sélecteur d'identifiant car l'identifiant est unique dans le développement réel.
Vue gérera les optionsélément touchéet son interneÉléments descendants
En fait, il peut être mis en correspondance sans la balise div, et il peut également être utilisé avec la balise p. Le principe est que id et el correspondent. Mais il ne peut prendre en charge que les balises doubles, telles que p, h1, head, etc. (les balises HTML et body ne sont pas prises en charge).
objet de données de données
L'objet écrit dans data est le suivant :
pour afficher les données du type d'objet, vous pouvez directement utiliser le nom et l'attribut de l'objet définis.
Par exemple
{
{ student.name }} {
{ student.age }}
, les propriétés de l'objet peuvent ainsi être directement appelées et affichées.
Pour le tableau déclaré dans data, l'utilisation est la suivante :
Comment ça fonctionne :
{
{ 数组名[0] }}Il s'agit d'afficher directement le premier élément du tableau.
vue balises de base
v-texte
Définir la valeur du texte de l'étiquette (textContent)
<h2 v-text="message">hello, world!</h2>
Il remplacera le contenu de h2 par le contenu du message texte.
L'exemple est le suivant :
Il est également possible d'utiliser des expressions d'interpolation pour réaliser des chaînes d'épissage.
Les résultats sont les suivants
Vous pouvez également utiliser la méthode suivante pour les expressions d'interpolation
<body>
<div id="app">
<h2 v-text="'hello ' + message"></h2>
<h2>{
{
"hello " + message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Chain"
}
})
</script>
Le résultat est le suivant
- La fonction de l'instruction v-text est : définir le contenu de l'étiquette (textContent)
- Le libellé par défaut remplacera tout le contenu, utilisez l'expression de différence {parts} pour remplacer le contenu spécifié
v-html
La fonction principale est de restituer le code HTML dans la balise au lieu du texte brut
<body>
<div id="app">
<p v-html="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='https://www.baidu.com/'>屌毛是你</a>"
}
})
</script>
</body>
Le résultat est le suivant : rendu sous forme de lien, vous pouvez cliquer pour sauter
La fonction de la directive v-html est la suivante : s'il existe une structure HTML dans le contenu innerHTML de l'élément défini, elle sera analysée comme une balise. La directive v-text ne l'analysera qu'en texte, quel que soit le contenu
. .
v-on
Lier des événements à des éléments
Un exemple de code ressemble à ceci :
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="doIt">
<input type="button" value="单击事件" @click="doIt">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(){
alert("are you 叼毛");
}
}
})
</script>
</body>
Les résultats de la démonstration sont les suivants :
Cependant, l'utilisation générale n'est pas si simple, mais avec diverses fonctions et divers mots-clés, comme suit
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="doIt">
<input type="button" value="单击事件" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{
{
food }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Chain",
content:"<a href='https://www.baidu.com/'>屌毛是你</a>",
food:"石头拌稀饭"
},
methods:{
doIt:function(){
alert("are you 叼毛");
},
changeFood:function(){
this.food += "炒鸡好吃！"
}
}
})
</script>
</body>
- La fonction de la directive v-on est de lier les événements aux éléments
- Le nom de l'événement n'a pas besoin d'être écrit dessus
- La commande peut être abrégée en @
- La méthode liée est définie dans l'attribut méthodes
Mise en œuvre d'un contre-exemple
Probablement obtenir cet effet
Implémentez la logique des étapes :
1. Définissez les données dans data : telles que num
2. Ajoutez deux méthodes dans les méthodes : telles que add (incrémentation), sub (décrémentation)
3. Utilisez v-text pour définir num sur la balise span
4. Utilisez v-on pour ajouter , sous Lié aux boutons + et - respectivement
5. La logique d'accumulation : s'il est inférieur à 10, il s'accumulera, sinon il demandera
6. La logique de décrémentation : s'il est supérieur à 0, il diminuera, sinon cela vous demandera.
<body>
<div id="app">
<button @click="sub">-</button>
<span>{
{
num }}</span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
if(this.num < 10){
this.num++;
}else{
alert("最大为10，叼毛别点了");
}
},
sub:function(){
if(this.num > 0){
this.num--;
}else{
alert("不能为负");
}
}
}
})
</script>
</body>
Le résultat est le suivant :
Les choses à noter sont les suivantes
- Lors de la création d'un exemple Vue : el (point de montage), data (data), méthodes (méthodes)
- La fonction de l'instruction v-on est de lier des événements, abrégés en @
- Dans la méthode, les données dans les données sont obtenues grâce à ceci et à des mots-clés
- La fonction de la directive v-text est de définir la valeur texte de l'élément, abrégée en { {}}
v-show
Le code d'implémentation est le suivant : (Tout le monde le sait, vous pouvez afficher ou masquer quelque chose en fonction de l'âge)
<body>
<div id="app">
<input type="button" value="切换限制级别" @click="man">
<input type="button" value="切换青少年级别" @click="boy">
<img v-show="age >= 18" src="https://img1.mydrivers.com/img/20230305/e103b86e-b368-45bb-93aa-8e4d51964fe2.png">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
age:16
},
methods:{
man:function(){
this.age = 18;
},
boy:function(){
this.age = 16;
}
}
})
</script>
</body>
L'effet est comme indiqué ci-dessous
De retour au sujet, la balise v-show fait essentiellement passer l'attribut d'affichage du style à aucun.
Précautions
- La fonction de l'instruction v-show est de changer l'état d'affichage de l'élément en fonction de vrai et faux.
- Le principe est de modifier l'affichage de l'élément pour réaliser l'affichage et le masquage.
- Le contenu suivant l'instruction sera finalement analysé en une valeur booléenne
- Les éléments ayant une valeur true sont affichés, les éléments ayant une valeur false sont masqués.
- Une fois les données modifiées, l'état d'affichage de l'élément correspondant sera mis à jour de manière synchrone.
v-si
v-if et v-show sont en fait similaires, les deux sont utilisés pour contrôler l'affichage ou le masquage d'éléments. La syntaxe est la suivante
Code démo
<body>
<div id="app">
<p v-if="isShow">叼毛</p>
<input type="button" value="切换显示" @click="change">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
change:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
Résultats de la démonstration
La différence entre v-show et v-if est que lors du changement, v-if supprimera directement la balise lorsqu'elle est modifiée et non affichée, tandis que v-show ne modifie que l'état de la balise de style.
La figure suivante montre clairement les changements dans les deux modifications d'étiquette lors du changement.
Utilisez v-show pour les éléments fréquemment commutés, car v-if modifiera l'arborescence dom et v-show n'exploite que le style, donc v-show a de meilleures performances, mais les éléments cachés de v-show seront toujours affichés, ce qui est dangereux.
- Le rôle de l'instruction v-if est de changer l'état d'affichage de l'élément selon le vrai ou le faux de l'expression
- L'essence est de changer l'état d'affichage en manipulant l'élément dom
- La valeur de l'expression est vraie, l'élément existe dans l'arbre dom, et false, il est supprimé de l'arbre dom
- Changez fréquemment de v-show, sinon utilisez v-if, la consommation de commutation du premier est faible
liaison en V
Syntaxe : v-bind : nom d'attribut = expression
Cette liaison en V peut également être omise. Les deux manières sont possibles comme indiqué ci-dessous
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" alt="" :title="imgtitle+'!!!'">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"https://img0.baidu.com/it/u=340747937,2651100772&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
imgtitle:"可可奈奈"
}
})
</script>
</body>
Cette balise de titre affichera le texte lorsque la souris survole. Après le réglage, le texte du titre sera affiché lors du survol de la deuxième image, mais pas de la première image. Il ressort également du code ci-dessus que ce titre peut également être divisé en chaînes.
:title="imgtitle+'!!!'"
<img :src="imgSrc" alt="" :title="imgtitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
La classe de cette étiquette, c'est-à-dire si active prend effet, dépend du fait que isActive soit vrai ou faux.
Exemple de changement d'image
Cet exemple combine ce que nous avons appris auparavant. C'est une bonne démo. Pour obtenir l'effet, cliquez sur la flèche à gauche pour passer à l'image précédente ; cliquez sur la flèche à droite pour passer à l'image suivante. Masquer l'image de gauche sur la première image. Flèche, cache la flèche droite sur la dernière image.
Ses étapes de mise en œuvre sont les suivantes
Explication : Écrivez JavaScript : void (n'importe quel nombre) pour empêcher le lien hypertexte de sauter
<body>
<div id="mask">
<div class="center">
<h2 class="title">
<img src="./images/logo.png" alt="">
</h2>
<!-- 图片 -->
<img :src="imgArr[index]" alt="" />
<!-- 左箭头 -->
<a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="" />
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
<img src="./images/next.png" alt="" />
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#mask",
data: {
imgArr: [
/* 添加图片路径 */
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
"./images/04.jpg",
"./images/05.jpg",
"./images/06.jpg",
"./images/07.jpg",
"./images/08.jpg",
"./images/09.jpg",
"./images/10.jpg",
],
/* 数组索引 */
index: 0
},
methods: {
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
},
})
</script>
</body>
v-pour
Utilisé pour parcourir des tableaux afin de générer automatiquement des structures de liste.Il peut être compris comme copier et coller, parcourir automatiquement des tableaux et lier et afficher les données d'éléments en séquence.
Analyse comme indiqué ci-dessous
Remarque : ce qui précède
:titleutilise v-bind, en définissant un attribut tiele, mais il peut être omis sous la forme : titre ; alors { index}} signifie prendre l'indice du tableau.
Exemple d'utilisation pratique :
coder d'abord
<body>
<div id="app">
<ul>
<li v-for="item in arr">
人称：{
{
item}}
</li>
</ul>
<h2 v-for="i in food">
{
{
i.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["你","我","他"],
food:[
{
name:"石头拌稀饭"},
{
name:"黄沙炒米饭"}
]
}
})
</script>
</body>
Les résultats de la démonstration sont les suivants :
En fait, à travers l'exemple ci-dessus, vous devez comprendre que l'utilisation de v-for signifie parcourir des éléments de données et les présenter dans le même format.
Nous y ajoutons deux méthodes de clic,Utilisez la directive v-on pour lier
L'effet est le suivant :
Le principe est très simple : la méthode d'ajout de nourriture consiste à ajouter de nouveaux éléments au tableau, puis grâce à la balise v-for, ils sont tous parcourus. La méthode de
soustraction de nourriture est la même. En utilisant la méthode shift, chaque Chaque fois que l'élément le plus à gauche du tableau est supprimé, il ne peut plus être parcouru. Si vous atteignez cet élément, il ne sera naturellement pas affiché.
v-for peut nous aider à générer une liste très facilement.
supplément v-on
Passer des paramètres personnalisés, des modificateurs d'événements
Exemple d'utilisation :
Les résultats de la vérification sont les suivants :
Autre exemple, déclenchement d'une fenêtre pop-up basée sur la touche Entrée du clavier
modèle en V
Obtenez et définissez la valeur des éléments de formulaire (liaison de données bidirectionnelle)
Exemple de démonstration
demande de réseau axios
utilisation de base d'axios
Lorsque vous utilisez axios, vous devez être connecté à Internet et introduire la syntaxe de base de la bibliothèque de demande d'adresse en ligne axios fournie par le site officiel
. Il s'agit en fait d'une encapsulation d'Ajax.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Elle est divisée en deux, une fonction de rappel qui répond à une exécution réussie et une fonction de rappel qui répond à un échec d'exécution, comme indiqué ci-dessous.
post请求中，第一个参数是url的地址，第二个参数是post的数据
Utilisons ces deux documents d'interface comme démonstration.
Exemple de code (pas de vue, js natif)
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
// axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
.then(function (response) {
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",{
username:"盐焗西兰花"})
.then(function(response){
console.log(response);
console.log(this.skill);
},function (err) {
console.log(err);
})
}
</script>
</body>
Utiliser axios dans vue
Le cœur des données du réseau réside dans le fait qu’une partie des données est obtenue via le réseau.Par conséquent, la requête réseau est envoyée dans la méthode et, une fois la réponse réussie, les données renvoyées par le serveur sont liées à la valeur de données correspondante.
Piège, ajax est asynchrone, ceci dans la fonction ajax ne pointe pas vers l'instance de vue, vous ne pouvez pas obtenir l'instance en vue via cela, vous ne l'utiliserez donc pas dans la fonction axios
cela va changer, donc la solution est de le sauvegarder d'abord et de définir un that, var that = this;
<body>
<div id="app">
<input type="button" value="获取笑话" @>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function(){
var that = this;
axios.get("https://autumnfish.cn/api/joke").then
(function(response){
console.log(response.data);
that.joke = response.data;
},function(err){
})
}
}
})
</script>
</body>
