Syntaxe de base de Vue3

Mobile 2023-07-21 11:21:31 views: null

Vous Yuxi

Annuaire d'articles

avant-propos

提示：这里可以添加本文要记录的大概内容：

Il y a plusieurs raisons d'apprendre le framework Vue frontal :

  1. Vue est un framework frontal léger, facile à apprendre et à utiliser.
  2. Vue dispose d'une documentation complète et d'un support communautaire, ce qui facilite la recherche de solutions aux problèmes ;
  3. Vue utilise une programmation par composants, qui peut vous aider à mieux gérer et organiser votre code ;
  4. Vue dispose d'un écosystème riche, comprenant un grand nombre de composants et de plug-ins tiers, qui peuvent vous aider à développer des applications plus rapidement ;
  5. Vue a de bonnes performances dans le développement de terminaux mobiles et peut vous aider à créer rapidement une interface utilisateur réactive.
  6. Vue fonctionne également bien dans les projets à grande échelle et peut répondre à des besoins de développement exigeants.

L'objectif principal du développement de Vue : les modifications de données
simplifient la programmation DOM

提示：以下是本篇文章正文内容，下面案例可供参考

Cadre MVVM

insérez la description de l'image ici

Découvrez Vue

Adresse de référence en ligne de vue.js (adresse d'importation officielle de vue) :

<script src="https://unpkg.com/vue@next"></script>

Voici un exemple d'écriture d'une simple application "Hello World" en utilisant Vue.js :

  1. Importer le fichier Vue.js
  2. Pour créer un objet d'instance de vue, vous devez passer un objet de configuration (le plus important : les données)
  3. Montez l'objet d'instance de vue créé sur une marque dans la vue (syntaxe CSS vm.mount('#xxx'))
  4. Utiliser la syntaxe d'interpolation à l'intérieur de la plus grande div

[Exemple de code] :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 4.输入框的数据改变，同步到title（指明h1内容就是title内容）插值语法 -->
        <h1>{
    
    {
    
    title}}</h1>
    </div>
</body>
<!-- 1.引入vue js文件（这里可以替换成网页） -->
<script src="./js/vue3.js"></script>

<script>
    // 2.创建vue实例对象，需要传入配置对象
    // 配置对象中需要指定若干个配置项 data代表数据配置项
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                title: 'Hello World'
            }
        },
    })

    // 3.将创建的vue实例对象，挂载到视图中某个标记上
    vm.mount('#app')
    // css选择器思想
</script>
</html>

Effet de sortie :
insérez la description de l'image ici
ce qui précède est une liaison unique et ce qui suit est une liaison bidirectionnelle

<body>
    <div id="app">
        <!-- 4.输入框的数据改变，同步到title（指明h1内容就是title内容）插值语法 -->
        <h1>{
    
    {
    
    title}}</h1>
        <input type="text" v-model="title">
    </div>
</body>

Effet de sortie :
insérez la description de l'image ici
modifiez le contenu dans la zone de saisie, et le contenu de h1 ci-dessus changera également en conséquence
insérez la description de l'image ici

Instruction de rendu de texte v-text

directive v-text :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-text="x">
        </div>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                x: '<h1>xxx</h1>'
            }
        },
    })
    vm.mount('#app')
</script>
</html>

Effet de sortie :
écrivez le contenu sous forme de texte brut.
insérez la description de l'image ici
Remplacez v-text par la syntaxe d'interpolation :

<body>
    <div id="app">
        <div>
            {
    
    {
    
    x}}
        </div>
    </div>
</body>

L'effet est le même
insérez la description de l'image ici
v-text modifier l'attribut innerText v-html modifier l'attribut innerHtml
v-text est équivalent à { {syntaxe d'interpolation}}

directive de liaison d'attribut

Il peut lier dynamiquement la valeur d'une propriété.
Vous pouvez lier l'attribut de classe d'un composant à un attribut de données dans l'instance Vue pour obtenir un contrôle de style dynamique

liaison dynamique d'attribut de titre

Semblable à la liaison des attributs de classe et de style, via la commande v-bind, nous pouvons lier l'attribut title de l'élément avec l'attribut data dans l'instance Vue pour réaliser une liaison dynamique.Lorsque l'attribut data lié change, la valeur de l'attribut title sera également mise à jour dynamiquement en conséquence, réalisant ainsi une liaison dynamique

[Exemple de code] :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a :href="address">跳转</a>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                address:'https://rej177.blog.csdn.net/article/details/131444680'
            }
        },
    })

    vm.mount('#app')
</script>
</html>

résultat de sortie
insérez la description de l'image ici

Liaison dynamique d'attribut de classe

Un ou plusieurs noms de classe peuvent être liés aux attributs de données dans l'instance de Vue. Lorsque la valeur de l'attribut de données change, le nom de la classe sera également mis à jour dynamiquement

[Exemple de code] :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
    
    
            color: aqua;
        }
        .two{
    
    
            color: yellowgreen;
        }
        .three{
    
    
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p :class="className">杰瑞</p>
        <p :class="[className,className1]">汤姆</p>
        <p :class="{one: flag}">斯派克</p>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                className: 'two',
                // 改成one变成湖绿色
                // className: 'one',
                // 多个属性配置中间加逗号分割
                className1: 'three',
                flag: true,
                // true生效，false不生效
            }
        },
    })

    vm.mount('#app')
</script>
</html>

Effet de sortie :
insérez la description de l'image ici

liaison dynamique d'attribut de style

Un ou plusieurs attributs de style peuvent être liés aux attributs de données dans l'instance de Vue. Lorsque la valeur de l'attribut de données change, l'attribut de style sera également mis à jour dynamiquement

[Exemple de code] :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p :style="{textAlign: a,backgroundColor: b}">二哈喇子！</p>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                a: 'center',
                b: 'pink'
            }
        },
    })

    vm.mount('#app')
</script>
</html>

Effet de sortie :
insérez la description de l'image ici

Liaison d'événement @nom de l'événement

La fonction exécutée par l'événement dans Vue doit être écrite dans l'élément de configuration des méthodes

Si vous souhaitez accéder aux données configurées dans l'élément de configuration des données dans le corps de la fonction méthodes, vous devez ajouter ceci.

[Exemple de code] :

Simuler les données d'addition et de soustraction du panier
insérez la description de l'image ici

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- Vue开发两个最基本的最重要的配置项是 data 和 methods  -->
    <!-- Vue开发核心的关注点：数据的变化 -->
    <div id="app">
        <button @click="minus">-</button>
        {
    
    {
    
    num}}
        <button @click="plus">+</button>
        <!-- 事件绑定是 v-on事件名 简写成：@事件名 -->
        <div @click="b" style="width: 200px;height: 200px;border: 1px solid red;">
            <div @click.stop="a" style="width: 50px;height: 50px;background-color: yellow;"></div>
        </div>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                num: 1
            }
        },
        // Vue中事件执行的函数，必须编写在methods配置项中
        methods: {
    
    
            // methods中定义的函数，function可以省略
            plus: function (event) {
    
    
                event.preventDefault()
                // methods函数体中想要访问data配置项中配置的数据，必须加this.前缀
                this.num++
            },
            minus: function (event) {
    
    
                event.preventDefault()
                if (this.num > 0) {
    
    
                    this.num--
                }
            },
            a: function () {
    
    
                console.log('点击子标记')
            },
            b: function () {
    
    
                console.log('点击父标记');
            }
        },
    })
    vm.mount('#app')

</script>

</html>

Effet de sortie :
insérez la description de l'image ici

Le code ci-dessus est une application Vue de base implémentant un compteur et un élément div imbriqué avec un élément enfant à l'intérieur. Voici une explication détaillée du code :

Ce code est une page HTML + Vue.js de base, qui contient des boutons plus et moins et une petite boîte jaune qui rebondit.

Les principales étapes de cette page sont les suivantes :

  1. Utilisez des balises dans l'en-tête de la page <script>pour importer la bibliothèque Vue.js.

  2. <body>Ajoutez une balise aux balises de la page <div>avec une valeur d'attribut ID de "app".

  3. Ajoutez deux boutons dans cette <div>balise, à savoir "+" et "-", et liez les fonctions de traitement d'événement correspondantes plus et moins.

  4. <div>Ajoutez un carré jaune rebondissant à cette balise, qui a un parent et un enfant. Nous pouvons observer l'effet du bouillonnement d'événements et de la prévention du bouillonnement en liant les événements de clic de souris à ces deux éléments.

  5. Utilisez l'étiquette au bas de l'étiquette <script>pour définir une instance vm de Vue, et définissez l'attribut de données et la méthode method dans l'instance.

  6. Il n'y a qu'une seule variable numérique num dans l'attribut de données, qui représente la valeur numérique actuelle.

  7. La méthode method contient quatre fonctions plus, moins, a et b, qui sont utilisées pour augmenter la valeur, diminuer la valeur, générer la balise enfant de clic et générer la balise parent de clic.

  8. Utilisez vm.mountla méthode pour monter l'instance Vue sur l'élément app de la page.

Lorsque l'utilisateur clique sur les boutons plus et moins ou sur les petits carrés de la page, l'instance de Vue exécute la fonction correspondante pour modifier les données et restitue les données modifiées sur la page. Dans le même temps, vous pouvez également voir l'effet du bouillonnement d'événements et du blocage du bouillonnement.

Directives de rendu conditionnel

Les instructions de rendu conditionnel font référence aux instructions qui déterminent s'il faut rendre les nœuds DOM en fonction des conditions des frameworks frontaux (tels que Vue, React, etc.). Dans Vue, les instructions de rendu conditionnel incluent v-if et v-show :

v-si

La directive v-if ajoutera ou supprimera des nœuds DOM en fonction de la valeur de l'expression (true ou false). Si la valeur est false, le nœud sera supprimé du DOM ; si la valeur est true, le nœud sera ajouté au DOM.
L'avantage de cette directive est qu'elle peut enregistrer le rendu des nœuds DOM, mais l'inconvénient est que le nœud entier sera restitué lorsque la condition est modifiée.

[Exemple de code] :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="isShow">条件渲染</div>
    <div v-if="price<=800">价格太贵了，买不起</div>
  </div>
</body>
<script src="../js/vue3.js"></script>
<script>
  let vm = Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        // 显示的值为true时会显示出来
        isShow: true,
        // 默认不显示，只有price<=800时会显示
        price: 900
      }
    },
  })
  vm.mount('#app')
</script>
</html>

v-if 和 v-show

v-ifet v-show différence:

  1. v-if est le vrai rendu conditionnel, et l'implémentation cachée consiste à supprimer directement la marque dynamiquement
  2. v-show consiste à contrôler l'affichage et le masquage de la marque en modifiant le style d'affichage de la marque
  3. v-show est très efficace. Si un marqueur doit être changé fréquemment pour afficher l'état caché, il est recommandé d'utiliser v-show

[Exemple de code v-if] :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="flag">hello world</div>
    <button @click="change">切换</button>
  </div>
</body>
<script src="../js/vue3.js"></script>
<script>
  let vm = Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        flag: true
      }
    },
    methods: {
    
    
      change(){
    
    
        this.flag=!this.flag
      }
    },
  })
  vm.mount('#app')
</script>
</html>

Veuillez ajouter une description de l'image
[Exemple de code v-show] :
remplacez la dixième ligne par <div v-if="flag">hello world</div>v-show
Veuillez ajouter une description de l'image

v-else 和 v-else-if

Cet exemple présente également le fichier Vue 3 JS vue3.js et utilise vm.mount pour monter l'instance Vue <div id="app">partout , afin que Vue puisse surveiller et répondre aux modifications de données et mettre à jour dynamiquement le contenu de la page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="type==1">A</div>
    <div v-else-if="type==1">B</div>
    <div v-else>C</div>
  </div>
</body>
<script src="../js/vue3.js"></script>
<script>
  let vm = Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        type: 1
      }
    },
  })
  vm.mount('#app')
</script>
</html>

Si type est égal à 1, le texte « A » est affiché ;
si type n'est pas égal à 1, mais est égal à 1, le texte « B » est affiché ;
si type n'est ni 1 ni 2, le texte « C » est affiché.

parcourir les instructions en boucle

Dans Vue, vous pouvez utiliser l'instruction v-for pour parcourir un tableau ou un objet et générer les éléments correspondants.

<div v-for="(item, index) in items">
  {
    
    {
    
     index }} - {
    
    {
    
     item }}
</div>

Parmi eux, items est le tableau ou l'objet à parcourir, item représente l'élément du cycle en cours et index représente l'index de l'élément en cours.

S'il s'agit d'un tableau, index est l'indice de l'élément courant ;
s'il s'agit d'un objet, index est le nom de la clé de l'élément courant.

En plus des tableaux et des objets, vous pouvez également boucler sur des nombres, par exemple :

<div v-for="i in 5">
  {
    
    {
    
     i }}
</div>

Le code ci-dessus générera 5 éléments div affichant respectivement les nombres 1 à 5.

[Exemple de code d'instruction de parcours de boucle] :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="game in arr">{
    
    {
    
    game}}</li>
    </ul>
  </div>
</body>
<script src="../js/vue3.js"></script>
<script>
  let vm = Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        arr: ['我的世界','英雄联盟','CS：GO']
      }
    },
  })
  vm.mount('#app')
</script>
</html>

Effet de sortie :
insérez la description de l'image ici
[Exemple] Opération de suppression de la liste de produits Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <style>
        table{
    
    
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #298cce;
            margin-top: 20px;
        }
        th, td{
    
    
            padding: 10px;
            text-align: center;
            border: 1px solid #298cce;
        }
        th{
    
    
            background-color: #f2f2f2;
        }
        tr:nth-child(even){
    
    
            background-color: #f2f2f2;
        }
        button{
    
    
            background-color: #298cce;
            color: #fff;
            border: none;
            padding: 6px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
   <div id="app">
        <table>
            <caption><h2>商品列表</h2></caption>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>成色</th>
                    <th>售后服务</th>
                    <th>连接方式</th>
                    <th>套餐类型</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(goods, index) in goods">
                    <td>{
    
    {
    
    index+1}}</td>
                    <td>{
    
    {
    
    goods.brand}}</td>
                    <td>{
    
    {
    
    goods.model}}</td>
                    <td>{
    
    {
    
    goods.fineness}}</td>
                    <td>{
    
    {
    
    goods.after}}</td>
                    <td>{
    
    {
    
    goods.connection}}</td>
                    <td>{
    
    {
    
    goods.type}}</td>
                    <td>{
    
    {
    
    goods.price}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
   </div> 
</body>
<script src="../js/vue3.js"></script>
<!-- 代替vue.js网页 -->
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                goods: [
                    {
    
    
                        brand: 'OPES',
                        model: 1.0,
                        fineness: '全新',
                        after: '一年质保',
                        connection: '有线/无线',
                        type: '基础版',
                        price: '500',
                    },
                    {
    
    
                        brand: 'OPES',
                        model: 1.0,
                        fineness: '全新',
                        after: '两年质保',
                        connection: '有线/无线',
                        type: '进阶版',
                        price: '600'
                    },
                    {
    
    
                        brand: 'OPES',
                        model: 1.0,
                        fineness: '全新',
                        after: '一年质保',
                        connection: '无线',
                        type: '战损版',
                        price: '500'
                    },
                    {
    
    
                        brand: 'OPES',
                        model: 1.0,
                        fineness: '全新',
                        after: '两年质保',
                        connection: '有线/无线',
                        type: '高级版',
                        price: '700'
                    },
                ]
            }
        },
        methods: {
    
    
            del(i){
    
    
                this.goods.splice(i,1)
            }
        },
    })
    vm.mount('#app')
</script>
</html>

Effet de sortie :
insérez la description de l'image ici

Je suppose que tu aimes

Origine blog.csdn.net/rej177/article/details/131444680
conseillé
Classement
du quotidien
Plus
2024-07-22(0)
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)

Code World

© 2018 codetd.com