Maison >interface Web >js tutoriel >Discussion sur les composants et les modèles dans Vue.js

Discussion sur les composants et les modèles dans Vue.js

黄舟original: 2017-10-28 09:29:281452parcourir

Résumé : La directive

est une fonctionnalité importante de Vue.js. Elle fournit principalement un mécanisme pour mapper les modifications des données au comportement du DOM. Alors, quels changements dans les données sont mappés aux comportements du DOM ? Vue.js est piloté par les données , nous ne modifierons donc pas directement la structure du DOM, et il n'y aura pas de $('ul').append( similaire) ' 25edfb22a4f469ecb59f1190150159c6onebed06894275b65c1ab86501b08a632eb') une telle opération, lorsque les données changent, l'instruction modifiera le DOM avec une opération définie, de sorte que vous puissiez vous concentrer uniquement sur les changements de données sans avoir à gérer les changements et l'état du DOM ,

Instructions intégrées de Vue

v-bind

v-bind Il est principalement utilisé pour lier les attributs d'élément DOM.

signifie que la valeur réelle de l'attribut d'élément est fournie par l'attribut data dans l'instance vm.

Par exemple :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo">
  <span v-bind:cutomId="id">{{message}}</span>
</p>
<script>
  //数据
  let obj ={
    message:"Hello World",
    id:&#39;123&#39;
  };
 //声明式渲染
  var vm = new Vue({
    el:&#39;#demo&#39;,
    data:obj  });
</script>
</body>
</html>

v-bind peut être abrégé en ":",

L'exemple ci-dessus peut être abrégé en 399eb065b6564f5053ca47f36acdc178

L'effet est le suivant ：

2.v-on

Lier l'écouteur d'événement, en abrégé @.

Nous l'avons également utilisé hier, regardons l'effet en abréviation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!-- HTML模版 -->
  <p id="demo">
    <span @click="clickHandle">{{message}}</span>
  </p>
  <script>
    //数据
    let obj = {
      message:"hello Vue"
    };
    //声明式渲染
    var vm = new Vue({
      el:"#demo",
      data:obj,
      methods:{
        clickHandle(){
            alert("click")
            }
      }
    });
  </script>
</body>
</html>

L'effet est le suivant :

3. v-html

v-html, le type de paramètre est une chaîne,

est utilisé pour mettre à jour innerHTML, et la

string

est acceptée. par n'effectuera pas la compilation et d'autres opérations,

le traitera comme du HTML normal

Le code est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo" v-html="HTML"></p>
<script>
  //数据
  let obj = {
    HTML:"<p>Hello World</p>"
  };
  var vm = new Vue({
    el:"#demo",
    data:obj  })
</script>
</body>
</html>

Le l'effet est le suivant

Pour plus d'instructions intégrées, veuillez consulter le site officiel : Instructions Vue.js

Modèle

modèle HTML

modèle basé sur DOM, les modèles sont tous analysables et valides html

interpolation

texte : utilisez la syntaxe "Moustache" (double accolades) {{value}}

Fonction : remplacer sur l'instance Valeur de l'attribut,

Lorsque la valeur change, le contenu interpolé sera automatiquement mis à jour

HTML natif : les doubles accolades génèrent du texte et n'analyseront pas l'attribut HTML

: utilisez v-bind pour la liaison, qui peut répondre aux modifications

Utilisez JavaScript expression : vous pouvez écrire des expressions simples

caractères Modèle de chaîne

chaîne de modèle

L'attribut de l'objet d'option de modèle

Le Le modèle remplacera l'élément suspendu. Le contenu suspendu à l'élément sera ignoré.

Le code est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <p id="demo"></p>
  <script>
    //数据
    let obj = {
      html:"<p>String</p>",
      abc:1
    };
    var str = "<p>Hello</p>";
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:str    })
  </script>
</body>
</html>

Avez-vous remarqué des changements surprenants

Le nœud racine ne peut en avoir qu'un.

Écrivez la structure html dans une paire de balises de script et définissez type="X-template"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <p id="demo">
    <span>vue</span>
  </p>
  <script type="x-template" id="temp">
    <p>
      Hello,{{abc}},
      <span>sunday</span>
    </p>
  </script>
  <script>
    //数据
    let obj = {
      html:"<p>String</p>",
      abc:1
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:"#temp"
    });
  </script>
</body>
</html>

pour obtenir l'effet suivant :

est encore relativement limité lorsqu'il est écrit dans des balises de script

Si d'autres fichiers ont également cette structure,

ne peut pas être réutilisé.

Fonction de rendu de modèle

fonction de rendu

Attributs de l'objet d'option de rendu

createElement(tag name, {data object}, [child element]);

Les sous-éléments sont du texte ou des tableaux

Utilisons un morceau de code pour démontrer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>render函数</title>
  <script src="../vue.js"></script>
  <style type="text/css">
    .bg{
      background: #ee0000;
    }
  </style>
</head>
<body>
  <p id="demo"></p>
  <script>
    //数据
    let obj = {
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      render(createElement){
        return createElement(
          //元素名
          "ul",
          //数据对象
          {
            class:{
              bg:true
            }
           },
          //子元素
          [
            createElement("li",1),
            createElement("li",2),
            createElement("li",3)
          ]
        );
      }
    })
  </script>
</body>
</html>

L'effet est le suivant

Résumé

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de définition d'utilisation d'une liste doublement chaînée dans la structure de données JavaScriptArticle suivant：Exemple de définition d'utilisation d'une liste doublement chaînée dans la structure de données JavaScript

Articles Liés

Voir plus