Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation la plus complète de Vue.js

Explication détaillée de l'utilisation la plus complète de Vue.js

小云云original: 2017-12-21 13:20:095434parcourir

Vue.js est un framework progressif pour la création d'interfaces utilisateur. Il se concentre uniquement sur la couche de vue et adopte une conception de développement incrémental ascendant. L'objectif est d'obtenir une liaison de données réactive et des vues combinées via les composants API les plus simples possibles. . Vue est très facile à apprendre. Ce tutoriel est basé sur le test de la version Vue 2.1.8. Il est très populaire en programmation.Cet article présente principalement l'utilisation détaillée de Vue.js.Les amis qui en ont besoin peuvent s'y référer.J'espère que cela pourra aider tout le monde.

Tout d'abord, jetons un coup d'œil à Vue :

Vue.js est un framework progressif pour la création d'interfaces utilisateur. Contrairement à d’autres frameworks lourds, Vue adopte fondamentalement une conception à coût minimum et adoptable progressivement. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue et est facile à intégrer à d'autres bibliothèques tierces ou à des projets existants. D'un autre côté, lorsqu'il est combiné avec des composants et des bibliothèques à fichier unique pris en charge par l'écosystème Vue, Vue est également parfaitement capable d'alimenter des applications complexes d'une seule page. Par conséquent, Vue est en réalité très puissant.

1. Installation et syntaxe du modèle de Vue.js

L'utilisation de Vue est très simple Vous pouvez directement télécharger Vue.js ou importer Vue.min.js pour l'utiliser.

1-1 Syntaxe du modèle

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 sous-jacente.

Au cœur de Vue.js se trouve un système qui vous permet 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 peut calculer intelligemment le coût minimum du rendu du composant et l'appliquer aux opérations DOM.

1. modèle html

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

Interpolation :

Texte : utilisez "Moustache" " syntaxe (accolades) {{ valeur }} ; Fonction : Remplace la valeur de l'attribut sur l'instance. Lorsque la valeur change, le contenu interpolé sera automatiquement mis à jour. Vous pouvez également utiliser v-text="value" à la place.

　　<p>{{ value }}<p> 等价于 <p v-text="value"></p>

HTML natif : le texte affiché entre doubles accolades n'analysera pas la balise html. C'est-à-dire que lorsque les données de l'instance sont une balise html, elles ne peuvent pas être analysées mais sorties directement. Si vous souhaitez analyser à ce moment-là, vous pouvez utiliser v-html="value" à la place.

new Vue({
  data:{
    value: `<span>我是一个span标签</span>`
  }
});
<p>{{ value }}<p>  页面展示 => <span>我是一个span标签</span> 
<p v-html="value"><p>  页面展示 => 我是一个span标签

Il convient de noter que parfois, en raison de certains retards du réseau et d'autres raisons, les utilisateurs verront d'abord {{ xxx }}, puis disposeront de données. Si nous voulons éviter cet effet, nous pouvons utiliser v-text="xxxx" à la place.

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

title

Notez que show here est une valeur booléenne dans les données. Si c'est vrai, le rouge sera ajouté à la classe, si. false, supprimez la classe rouge,

Utilisez l'expression javascript : vous pouvez écrire des expressions simples. (Des opérations ternaires simples sont possibles, mais si les instructions ne peuvent pas être écrites, il y aura des attributs calculés dans le futur.)

{ 1+2 }
{ true? "yes":"no" }

2. Modèle de chaîne

chaîne de modèle

tempalte => Les attributs de l'objet option

modèle seront remplacés. Éléments montés. Le contenu de l'élément monté sera ignoré. Il n'y a qu'un seul nœud racine. Écrivez la structure HTML dans une paire de balises de script et définissez type="x-template".

<body>
  <p id="box">

  </p>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var str = '<h2>hello pink!</h2>'
    var vm = new Vue({
      el: '#box',
      template: str
    });
  },false);
</script>

indique que le poids est relativement élevé, "remplacez" directement le point de montage, remplacez le html d'origine et affichez-le.

//代码片段这个就是利用script标签对内定义模版，局限性：不能跨文件使用，一个页面中可以使用
<body>
  <p id="box">

  </p>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
  <p>我是一个p标签</p>
</script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#str'
    });
  },false);
</script>

Instance Vue. Chaque application crée une instance racine (instance racine) via le constructeur Vue pour démarrer New Vue (objet option). Vous devez transmettre l'objet options, qui contient des éléments suspendus, des données, des modèles, des méthodes, etc.

el : Sélecteur d'élément de montage --- String|HtmlElement
data : Données proxy --- Object|Function
méthodes : Méthode de définition --- Object

Vue Proxy data data. Chaque instance de Vue proxy tous les attributs de son objet de données. Ces attributs proxy sont réactifs. Les propriétés nouvellement ajoutées ne sont pas réactives et la vue ne sera pas mise à jour après les modifications.

Les propres propriétés et méthodes de l'instance Vue exposent ses propres propriétés et méthodes, commençant par « $ », telles que : $el, $data. . .

var vm = new Vue({
    el: '#app',
    data: {
     message: 'hello,Datura!!!'
    }，
    methods: {
      test (){
        alert(1);
      }
    },
    compontents:{
    //这里存放组件
    }
   });
 /* vm就是new出来的实例 */
 console.log(vm.$data);//也就是数据data，后面还有很多挂载在vm（new出来的）实例上的属性
//代码片段放在template标签里，并给一个id名
<body>
  <template id="tem">
    <p>我是template</p>
  </template>
  <p id="box">

  </p>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#tem'
    });
  },false);
</script>

3. Fonction de rendu de modèle

la fonction de rendu est très proche de l'éditeur
render => propriétés de l'objet d'option

propriétés de l'objet de données

class: {}, => 绑定class，和v-bind:class一样的API
style: {}, => 绑定样式，和v-bind:style一样的API
attrs: {}, => 添加行间属性
domProps: {}, => DOM元素属性
on: {}, => 绑定事件
nativeOn: {}, => 监听原生事件
directives: {}, => 自定义指令
scopedSlots: {}, => slot作用域
slot: {}, => 定义slot名称 和组件有关系，插曹
key: "key", => 给元素添加唯一标识
ref: "ref", => 引用信息
2Vue.js的条件、循环语句
2-1条件语句
v-if ：根据值的真假，切换元素会被销毁、重建； => 在dom中已消失
v-show ：根据值的真假，切换元素的display属性；
v-else ：条件都不符合时渲染；
v-else-if ：多条件判断，为真则渲染；

1. V-if

Le jugement conditionnel utilise l'instruction v-if :

<p id="app">
  <p v-if="seen">现在你看到我了</p>
  <template v-if="ok">
   <p>哈哈哈，打字辛苦啊！！！</p>
  </template>
</p>  
<script>
new Vue({
 el: '#app',
 data: {
  seen: true,
  ok: true
 }
})
</script>

Ici, l'instruction v-if sera basée sur la valeur du expression vu (true ou false ) pour décider d’insérer ou non l’élément p.

2. v-else

Vous pouvez utiliser la commande v-else pour ajouter un bloc "else" à v-if :

Générer aléatoirement un nombre pour déterminer si il est supérieur à 0,5. Affichez ensuite les informations correspondantes :

<p id="app">
  <p v-if="Math.random() > 0.5">
   Sorry
  </p>
  <p v-else>
   Not sorry
  </p>
</p>
  
<script>
new Vue({
 el: '#app'
})
</script>

3. v-show

Nous pouvons également utiliser la commande v-show pour afficher des éléments en fonction de conditions :

<p id="app">
  <h1 v-show="ok">Hello!</h1>
</p>
<script>
new Vue({
 el: '#app',
 data: {
  ok: true
 }
})
</script>

4. v-else-if

v-else-if a été ajouté dans la version 2.1.0, comme son nom l'indique, il est utilisé comme bloc else-if de v-if. . Peut être utilisé plusieurs fois dans une chaîne :

Juger la valeur de la variable de type :

<p id="app">
  <p v-if="type === &#39;A&#39;">
   A
  </p>
  <p v-else-if="type === &#39;B&#39;">
   B
  </p>
  <p v-else-if="type === &#39;C&#39;">
   C
  </p>
  <p v-else>
   Not A/B/C
  </p>
</p> 
<script>
new Vue({
 el: '#app',
 data: {
  type: 'C'
 }
})
</script>

[Utilisation et comparaison de v-show, v-if]

① v -show : Changez l'attribut d'affichage de l'élément en fonction de la valeur vraie ou fausse

Les éléments v-show seront toujours rendus et resteront dans le DOM.

v-show ne prend pas en charge la syntaxe des modèles.

② v-if est un véritable rendu conditionnel, car il garantira que le bloc conditionnel détruit et reconstruit correctement les écouteurs d'événements et les sous-composants au sein du bloc conditionnel lors de la commutation.

③ v-if有更高的切换消耗而v-show有更高的初始渲染消耗。

如果需要频繁切换使用v-show更好，如果在运行时条件不大可能改变，使用v-if比较好

2-2 循环语句 v-for

① 语法：v-for="x in items"

　　　　x是索引；items是数组，这样进行遍历

② v-for循环是不断创建新的标签，标签里的内容，我们决定，一般都是放在数组里，然后遍历显示出来。也可以放对象，遍历对象。

③ 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

<body>
  <p id="app">
    <ul>
      <li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li> //循环出来的列表项
    </ul>
  </p>
</body>
<script src="../vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#app',
      data:{
        fruitsArr:['apple','banana','orage','pear']  //数据源
      }
    });
  },false);
</script>

总结

以上所述是小编给大家介绍的Vue.js用法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

学完本文之后相信大家对Vue.js有一个更深的了解，大家觉得不错的话就收藏起来吧。

Articles Liés

Voir plus