Discussion sur les composants et les modèles dans Vue.js-js tutoriel-php.cn

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

黄舟

Libérer： 2017-10-28 09:29:28

original

1471 Les gens l'ont consulté

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) '

one

') 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>

Copier après la connexion

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

L'exemple ci-dessus peut être abrégé en <span :cotomId="id">

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

L'effet est le suivant