Résumé très complet de l'utilisation de vue.js

Vue.js est une bibliothèque JavaScript MVVM très populaire en ce moment. Elle est construite avec des idées basées sur des données et des composants. Par rapport à Angular.js, Vue.js fournit une API plus simple et plus facile à comprendre, nous permettant de démarrer et d'utiliser rapidement Vue.js. L'article suivant vous présente principalement le résumé pertinent de l'utilisation de vue.js. Les amis dans le besoin peuvent s'y référer.

1. Le composant Vue.js

vue.js est utilisé pour créer des composants

Vue.component('componentName',{ /*component*/ })；

Une chose à noter ici est que le composant doit être enregistré avant utilisation, c'est-à-dire :

Vue.component('mine',{
  template:'#mineTpl',
  props:['name','title','city','content']
 });

 var v=new Vue({
 el:'#vueInstance',
 data:{
  name:'zhang',
  title:'this is title',
  city:'Beijing',
  content:'these are some desc about Blog'
 }
});

S'il est inversé, une erreur sera signalée, car cela signifie que le composant est utilisé en premier, mais que le composant n'est pas enregistré.

Une fois que Webpack a signalé une erreur, utilisez webpack --display-error-details pour dépanner

2. Commande keep-alive

Comme vous pouvez le voir en regardant. la démo Dans vue-router, keep-alive est écrit, et la signification de keep-alive est :

Si vous gardez le composant commuté en mémoire, vous pouvez conserver son état ou éviter de restituer . Pour cela, vous pouvez ajouter une directive keep-alive

<component :is=&#39;curremtView&#39; keep-alive></component>

3. Comment faire fonctionner le CSS uniquement dans le composant actuel

Dans chaque composant vue, vous pouvez définir son propre css, js, si vous voulez que le css écrit dans le composant n'affecte que le composant actuel, il vous suffit d'écrire scoped dans le style, c'est-à-dire :

<style scoped></style>

4. Vuejs insère des images dans une boucle

Lors de l'écriture d'une boucle, écrivez le code suivant :

<p class="bio-slide" v-for="item in items"> 
 <img src="{{item.image}}">
</p>

A ce moment, un avertissement apparaîtra sur la console
[Vue Warn] : src ="{{item.image}}" : l'interpolation dans l'attribut "src" provoquera une requête 404. Utilisez plutôt v-bind:src. Cela signifie que l'interpolation dans l'attribut "src" provoquera une requête 404. Utilisez plutôt v-bind:src.

Alors remplacez-le par ce qui suit :

<p class="bio-slide" v-for="item in items"> 
 <img v-bind:src="item.image">
</p>

Voici la clé, v-bind ne peut plus utiliser {{}} lors de l'écriture, selon le communiqué officiel :

<a v-bind:href="url" rel="external nofollow" ></a>

Ici, href est un paramètre qui indique à la directive v-bind de lier l'attribut href de l'élément à la valeur de l'url de l'expression. Vous avez peut-être remarqué que vous pouvez obtenir le même résultat avec l'interpolation de fonctionnalités href="{{url}}" rel="external nofollow" : c'est correct, et l'interpolation de fonctionnalités en interne se convertit en fait en liaison v-bind.

5. Lier la valeur à un attribut dynamique de l'instance Vue

Pour les boutons radio, les cases à cocher et les options de zone de sélection, la valeur liée au v-model est généralement une chaîne statique ( pour les cases à cocher, c'est une valeur logique) :

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

Mais parfois vous souhaitez lier la valeur à un attribut dynamique de l'instance de vue. Dans ce cas, vous pouvez utiliser v-bind pour y parvenir. , et cet attribut La valeur de ne peut pas être une chaîne. Par exemple, liez la valeur de Checkbox à un attribut dynamique de l'instance de vue :

<input 
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
<p>{{toggle}}</p>

Après la liaison ici, cela ne signifie pas que vous pouvez passer de vrai et faux à a et b après avoir cliqué, car Les dynamiques a et b définies ici sont a et b sur la portée et ne peuvent pas être affichées directement à ce moment,

//当选中时
vm.toggle === vm.a
//当没选中时
vm.toggle === vm.b

, donc a et b doivent être définis dans les données à ce moment, cela. est :

new Vue({
 el:'...',
 data:{
 a:'a',
 b:'b' 
 }
});

6. Instance de fragment

Les situations suivantes transformeront l'instance en instance de fragment :

1. Le modèle contient plusieurs éléments de niveau supérieur.

2. Le modèle ne contient que du texte normal.

3. Le modèle contient uniquement d'autres composants (les autres composants peuvent être une instance de fragment).

4. Le modèle ne contient qu'une seule directive d'élément, telle que ou

5. Le nœud racine du modèle a une directive de contrôle de flux, telle que v-if ou v-for.

Ces cas autorisent des instances avec un nombre inconnu d'éléments de niveau supérieur, qui traiteront son contenu DOM comme des fragments. Les instances de fragment rendront toujours le contenu correctement. Cependant, il n'a pas de nœud racine et son $el pointe vers un nœud d'ancrage, qui est un nœud de texte vide (un nœud de commentaire en mode développement).

Mais plus important encore, les directives de contrôle de non-flux, les attributs non-prop et les transitions sur les éléments des composants seront ignorés car il n'y a pas d'élément racine auquel se lier :

<!-- 不可以，因为没有根元素 -->
<example v-show="ok" transition="fade"></example>
 
<!-- props 可以 -->
<example :prop="someData"></example>
 
<!-- 流程控制可以，但是不能有过渡 -->
<example v-if="ok"></example>

Les instances de fragment peuvent être utiles, mais il est généralement préférable d'avoir un nœud racine pour le composant, ce qui garantit que les directives et les propriétés des éléments du composant sont correctement traduites et que les performances sont légèrement meilleures.

7. Imbrication de route

L'imbrication de route rendra d'autres composants dans le composant au lieu de sauter la page entière elle-même rendra le composant dans l'emplacement, si. vous souhaitez accéder à la page, vous devez restituer la page vers le composant racine Lors de la configuration de la route, écrivez :

var App = Vue.extend({ root });
router.start(App,'#app');

Ici, enregistrez d'abord le composant racine pour configurer la route. rendu, puis le composant racine est monté sur l'élément correspondant à #app.

8. Implémentez plusieurs méthodes d'affichage de texte différent selon différentes conditions

v-if, v-else peut réaliser une sélection conditionnelle, mais s'il s'agit d'une sélection conditionnelle continue multiple, vous besoin d'utiliser l'attribut calculé calculé. Par exemple, pour afficher la chaîne 'vide' lorsque rien n'est écrit dans la zone de saisie, sinon afficher le contenu dans la zone de saisie, le code est le suivant :

<p id="test">
 <input type="text" v-model="inputValue">
 <h1>{{changeVaule}}</h1>
</p>
new Vue({
 el:'#test',
 data:{
 changeVaule:'123'
 },
 computed :{
 changeVaule:function(){
  if(this.inputValue!==''){
  return this.inputValue;
  }else{
  return 'empty';
  }
 }
 }
});

Problèmes de détection de changement Vuejs<.>

1. Détecter les tableaux

En raison des limitations de JavaScript, vuejs ne peut pas détecter les modifications dans les tableaux suivants :

Indexer directement les éléments de configuration, tels que vm.item[0 ]={} ;

Modifiez la longueur des données, par exemple vm.item.length.

Pour résoudre le problème 1, Vuejs étend le tableau d'observation et y ajoute une méthode $set() :

// 与 `example1.items[0] = ...` 相同，但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})

问题2，需要一个空数组替换items。

除了$set() ，vuejs也为观察数组添加了$remove()方法，用于从目标数组中查找并删除元素，在内部调用了splice() 。

因此，不必：

var index = this.items.indexOf(item)
if (index !== -1) {
 this.items.splice(index, 1)
}

只需：

this.items.$remove(item);

2.检测对象

受ES5的显示，Vuejs不能检测到对象属性的添加或删除。因为Vuejs在初始化时候将属性转化为getter/setter，所以属性必须在data对象才能让Vuejs转换它，才能让它是响应的，例如：

var data = { a: 1 }
var vm = new Vue({
 data: data
})
// `vm.a` 和 `data.a` 现在是响应的
 
vm.b = 2
// `vm.b` 不是响应的
 
data.b = 2
// `data.b` 不是响应的

不过，有办法在实例创建之后添加属性并且让它是响应的。对于Vue实例，可以使用$set(key,value)实例方法：

vm.$set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的

对于普通数据对象，可以使用全局方法Vue.set(object, key, value) :

Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 添加属性。但是，添加到对象上的新属性不会触发更新。这时可以创建一个新的对象，包含原对象的属性和新的属性：

// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

十、关于vuejs页面闪烁{{message}}

在vuejs指令中有v-cloak，这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

用法如下：

[v-cloak]{
 display:none;
}
<p v-cloak>{{message}}</p>

这样

不会显示，直到编译结束

十一、关于在v-for循环时候v-model的使用

有时候需要循环生成input，用v-model绑定后，利用vuejs操作它，此时我们可以在v-model中写一个数组selected[$index] ，这样就可以给不同的input绑定不同的v-model，从而分别操作他们。这个我在demo中的dataBind.vue中用到。

十二、vuejs中过渡动画

在vuejs中，css定义动画：

 .zoom-transition{
  width:60%;
  height:auto;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
 }
 .zoom-enter, .zoom-leave{
  width:150px;
  height:auto;
  position: absolute;
  left:20px;
  top:20px;
  transform: translate(0,0);
 }

其中动画在定的时候要注意上下对应，上面有什么，下面有什么，都要变化的，如果有不变化的，应该抽离出去，作为公共css样式，在上面的css中，如果我只写 transform: translate(-50%,-50%);而不写下面的transform: translate(0,0);则会导致上面的transform: translate(-50%,-50%);被添加到下面，认为这个是不变的。

十三、指令v-el的使用

有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el访问这个元素。

注意

HTML不区分大小写，所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。

示例

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"
this.$els.msg //-><span>hello</span>

十四、关于vuejs中使用事件名

在vuejs中，我们经常要绑定一些事件，有时候给DOM元素绑定，有时候给组件绑定。绑定事件在HTML中用v-on:click-"event" ,这时evet的名字不要出现大写，因为在1.x中不区分大小写，所以如果我们在HTML写v-on:click="myEvent"而在js中写myEvent就出错误，所以在vuejs的1.x绑定事件时候，要尽量避免使用大写字母。在2.0中没有该限制！

十五、v-if与v-show的区别

v-if直接不渲染这个DOM元素，而v-show是会渲染DOM元素，只是使用display:none隐藏，打开开发者工具可以看到该DOM

十六、关于transition全局钩子如何在组件中使用

Vue.transition是定义一个全局transition钩子的，如果想针对组件定义，则需要如下写法：

export default{
 transition:{
  'fade':{
   enter() {},
   leave() {}
  }
 }
}

这样fade这个过度钩子只会作用于组件内，如果同时有同名的全局钩子，则会优先使用组建定义的

十七、利用vue-router如何实现组件在渲染出来前执行某个事件

export default{
 data(){
  return{
   selected:0,
   currentView:'view_0'
  }
 },
 methods:{
  choose(index) {
   this.selected=index;
   this.currentView='view_'+index;
  }
 },
 route:{
  data() {
   /*每次切换路由，在渲染出页面前都会执行*/
  }
 }
}

更多超全面的vue.js使用总结相关文章请关注PHP中文网！

相关文章：

通过纯Vue.js构建Bootstrap组件

强大Vue.js组件详细说明

Vue.js环境搭建教程介绍