A quoi sert le modèle vuejs ?

Le modèle

vuejs stipule fondamentalement le formulaire d'interaction et le style d'interface utilisateur dans lesquels un système doit faire face aux utilisateurs, et suit cet ensemble de modèles pour concevoir et améliorer les fonctions ; ses fonctions sont : 1. Responsable de la prévention du XSS 2. Réutilisation des fragments de support ; 3. Prise en charge du traitement de sortie des données ; 4. Prise en charge des données dynamiques ; 5. Intégration étroite avec les processus asynchrones.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Étant donné que Vue.js est une technologie construite sur la couche vue, le système de modèles de Vue.js est l'une des fonctions très importantes. Pour la page d'affichage affichée à l'utilisateur, il est nécessaire de fournir la meilleure expérience utilisateur et les meilleures performances, et Vue.js fournit un système de modèles très pratique et applicable, ce qui le rend populaire parmi les développeurs.

1. Qu'est-ce qu'un système de modèles

Toute application utilisée pour la rédaction Web ou les applications orientées utilisateur doivent avoir des modèles. Les modèles stipulent fondamentalement la forme d'interaction et le style d'interface utilisateur auxquels un système doit faire face aux utilisateurs, et suivre cet ensemble de modèles pour concevoir et améliorer les fonctions constitue également le modèle de base du développement logiciel.

Cependant, il est presque impossible d'écrire une seule page pour toutes les pages en fonction du modèle. Parce qu'un système ne doit pas seulement avoir quelques pages statiques, mais à mesure que le contenu et les utilisateurs augmentent, ses pages doivent être infinies. Afin de résoudre ce problème, une nouvelle technologie est apparue : le moteur de modèles. Grâce à différentes données et contenus, ainsi qu'un modèle (format) unifié, vous pouvez obtenir une page personnalisée appartenant à un utilisateur ou à un contenu, ce qui non seulement réduit beaucoup de codage, mais facilite également grandement les futures mises à jour de style.

La définition d'un moteur de modèle strict consiste à saisir des caractères de modèle + des données et à obtenir une chaîne rendue (page). Dans la mise en œuvre, il existe diverses sorties allant du remplacement régulier à la saisie directe de la chaîne d'orthographe vers l'analyse AST, mais par définition. ils sont tous pareils.

Si les lecteurs ont appris JavaScript ou d'autres langages de développement Web, ils doivent essayer de restituer le contenu de la page HTML sur le backend et le renvoyer à la page front-end, afin de mettre à jour la page utilisateur. Mais remplacer innerHtml par la chaîne rendue est une méthode de mise à jour très inefficace. Un tel moteur de modèles n'est plus un bon choix dans le scénario purement frontal d'aujourd'hui.

Pourquoi est-ce parce que les ressources du serveur back-end sont limitées et que le traitement des données se superpose à mesure que le nombre d'utilisateurs augmente. Chaque opération d'utilisateur et de rendu de page consomme une petite quantité d'opérations utilisateur. peut ne pas provoquer le gel du serveur, mais lorsqu'il y a des milliers d'utilisateurs ou plus, les requêtes réseau à elles seules peuvent empêcher le serveur de répondre ou même planter (voir Transport pour la Fête du Printemps). Et si le rendu de la page est placé côté utilisateur (front-end), et qu'il n'y a qu'un seul utilisateur, le temps de rendu de plusieurs dizaines de millisecondes n'est pas du tout un goulot d'étranglement par rapport au délai de requête, il peut donc non seulement améliorer l'expérience utilisateur, mais également réduire la pression sur le serveur.

Vue.js est un framework de type MVVM. Vue.js utilise un moteur de liaison de vues basé sur les données Grâce à l'état de liaison du front-end et du back-end, on sait que les données du back-end sont mises à jour et les données associées. les affichages du frontal seront également modifiés en même temps.

Vue.js fournit aux utilisateurs un système de modèles si puissant, ce qui est l'une des raisons pour lesquelles les frameworks front-end tels que Vue.js sont si populaires.

Les raisons pour lesquelles vous devriez utiliser des modèles sont les suivantes

1 Le moteur de modèles front-end doit être responsable de la prévention du XSS

2. ;

3. Modèle frontal Le moteur doit prendre en charge le traitement de la sortie des données ;

4. Le moteur de modèle frontal doit prendre en charge les données dynamiques ;

5. processus ;

2. Syntaxe du modèle Vue.js

Vue .js utilise une syntaxe de modèle basée sur HTML, permettant aux développeurs de lier de manière déclarative le DOM aux données de l'instance Vue.js sous-jacente.

Vue.js est un système qui permet aux développeurs de restituer de manière déclarative des données dans le DOM en utilisant une syntaxe de modèle concise.

Combiné avec le système de réponse, lorsque l'état de l'application change, Vue.js peut calculer intelligemment le coût minimum du rendu du composant et l'appliquer aux opérations DOM.

2.1. Sortie de texte

La forme la plus courante de liaison de données est l'interpolation de texte utilisant la syntaxe Moustache (doubles accolades), comme suit :

<span>Message:{{ msg }}</span>
<span v-once>这个将不会改变:{{ msg }}</span>

Chaque fois que l'attribut msg sur l'objet de données lié se produit s'il est modifié, le contenu au point d'interpolation sera mis à jour. Mais grâce à la commande v-once, les développeurs peuvent également effectuer une interpolation unique.

2.2. Sortie HTML pure

Les doubles accolades interpréteront les données comme du texte ordinaire au lieu du code HTML. Afin de générer du vrai code HTML, les développeurs doivent utiliser la directive v-html :

5de0f04cfff460c993d059c2702ae5a916b28748ea4df4d9c2150843fecfba68

这个div的内容将会被替换成为属性值rawHtml，直接作为HTML会忽略解析属性值中的数据绑定。开发者不能使用v-html来复合局部模板，因为Vue.js不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    2e1cf0710519d5598b1f0f14c36ba674直接输出的模式：8c1ecd4bb896b2264e0711597d40766c
    dc6dce4a544fdca2df29d5ac0ea9906b{{msg}}16b28748ea4df4d9c2150843fecfba68
    2e1cf0710519d5598b1f0f14c36ba674解析后输出的模式：8c1ecd4bb896b2264e0711597d40766c
    cfe05ddd0349085145840ec346b4bae816b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  data () {
    return {
      msg: '6d587d38616572144abecc5790e4dc77helloWorld16b28748ea4df4d9c2150843fecfba68'
    }
  }
}
2cacc6d41bbb37262a98f745aa00fbf0

2.3、JavaScript表达式

Vue.js都提供了JavaScript表达式支持。

{{number + 1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="&#39;list-&#39;+ id"></div>

完整代码：

<template>
  <div>
    <label>数字1：</label>
    <input v-model="int1"/>
    <br/>
    <br/>
    <label>数字2：</label>
    <input v-model="int2"/>
    <br/>
    <label> 展示JavaScript表达式，您输入的数字加和为</label>
    {{parseInt(int1)+parseInt(int2)}}
  </div>
</template>
<script>
export default {
  data () {
    return {
      int1: 0,
      int2: 0
    }
  }
}
</script>

注意：每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1}}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if(ok) {return message }}}

2.4、指令参数

指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式（v-for是个例外情况）。指令的职责是当表达式的值改变是，将其产生的连带影响，响应式地作用于DOM。比如

<p v-if="seen">现在出现啦！</p>

有一些指令能够接收一个参数，在指令名称之后以冒号表示。比如v-bind:用于响应式地更新html属性：

<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 在这里href是参数，告知v-bind指令将该元素的href属性与表达式URL的值进行绑定 -->

v-on:它用于监听DOM事件：

<a v-on:click="doSomething">
<!-- 缩写 -->
<a @click="doSomething">

修饰符（Modifiers）是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();

<form v-on:submit.prevent="onSubmit"></form>

三、计算属性和观察者属性

为了让模版的内容变得更加干净和整洁，同时不会影响代码和内容的可用性，Vue.js提出了计算属性和观察者。

3.1、计算属性

模板内的表达式非常便利，但这类表达式实际上多用于简单运算。因为在模板中放入太多的逻辑会让模板过重且难以维护。

跟它的区别还有就是有“缓存”效果，多次访问计算属性会立即返回之前的计算结果，而不是再次执行函数。
计算属性默认只有getter方法，但在需要时开发者也可以提供setter方法。

'属性':{
      get:function(){},
      set:function(newValue){
         dosomething
      }
  }

3.2、观察属性

watch:{
   '属性':function(par){
      dosomething
  }
}

相关推荐：《vue.js教程》

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!