Comment faire fonctionner la liaison de données vue.js

Cette fois, je vais vous montrer comment utiliser la liaison de données vue.js et quelles sont les précautions à prendre pour utiliser la liaison de données vue.js. Ce qui suit est un cas pratique, jetons un coup d'œil.

Cet article décrit l'opération de liaison de données vue.js avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Liaison de données

Système de liaison de données réactif. Une fois la liaison établie, le DOM sera synchronisé avec les données et il n'est pas nécessaire de maintenir manuellement le DOM. Rendre le code plus concis et facile à comprendre et améliorer l'efficacité.

Syntaxe de liaison de données

Interpolation de texte

{{ }}Balise moustache

<span>Hello　{{ name }}</span>

data:{
    name: 'vue'
}
== > Hello vue

Interpolation unique

La modification de la valeur de l'attribut de l'instance vm après la première affectation n'entraînera pas de modifications du DOM

<span v-once="name">{{ name }}</span>

2.Attributs HTML

Balise moustache {{ }}

<p v-bind:id="&#39;id-&#39;+id"></p>

Abréviation :

<p :id="&#39;id-&#39;+id"></p>

3 .Le l'expression de liaison

est placée dans le contenu du texte dans la balise Moustache. En plus de générer directement la valeur d'attribut, une expression de liaison peut consister en une simple expression JavaScript et éventuellement un ou plusieurs filtres (les expressions régulières ne sont pas prises en charge. Si une conversion complexe est requise, utilisez des filtres ou des propriétés calculées pour le traitement).

{{ index + 1}}
{{ index == 0 ? 'a' : 'b' }}
{{name.split('').join('|') }}
{{ var a = 1 }} //无效

4. Filtre

vue.js permet d'ajouter des filtres facultatifs après les expressions, indiqués par le caractère pipe "|".

{{ name | uppercase }} // Vue.js将name的值传入给uppercase这个内置的过滤器中(本质是一个函数)，返回字符串的大写值。
{{ name | filterA | filterB }}  //多个过滤器链式使用
{{ name | filterA arg1 arg2 }} //传入多个参数

À ce stade, filterA transmet la valeur de name comme premier paramètre, et arg1 et arg2 comme deuxième et troisième paramètres dans la fonction de filtre.

La valeur de retour de la fonction finale est le résultat de sortie. arg1 et arg2 peuvent utiliser des expressions ou ajouter des guillemets simples pour transmettre directement des chaînes.

Par exemple :

{{ name.split('') | limitBy 3 1 }} // ->u,e

Le filtre limitBy peut accepter deux paramètres. Le premier paramètre consiste à définir le nombre d'affichages. Le deuxième paramètre est facultatif et fait référence au tableau d'éléments de. le début.

Les 10 filtres intégrés à vue.js (supprimés dans Vue.js2.0)

capitaliser : Le premier caractère de la chaîne est converti en majuscule.
majuscule : Convertit la chaîne en majuscule.
minuscule : convertit la chaîne en minuscule.
devise : Les paramètres sont {String}[symbole de devise], {Number}[decimal places], convertissent le nombre en symbole monétaire et ajoutent automatiquement des numéros de section numériques.

{{ amount | currency '￥' 2 }} //若amount值为1000，则输出为￥1,000.00

pluralize : Les paramètres sont {String}single, [double, triple], et la chaîne est pluralisée.

<p v-for="c in count">{{ c | pluralize 'item' }} {{ c | pliralize 'st' 'nd' 'rd' 'th' }} </p>

//输出结果：
1item 1st
2items 2nd
3items 3rd
4items 4th

json : Le paramètre est {Number}[indent] numéro d'indentation d'espace, et les données de l'objet json sont sorties dans une chaîne conforme au format json.

anti-rebond : la valeur entrante doit être une fonction et le paramètre est facultatif, qui est {Number}[wait], qui est la durée du délai. L'effet est que l'action ne sera exécutée que n millisecondes après l'appel de la fonction.

<input v-on:keyup="onKeyup | debounce 500"> //input元素上监听了keyup事件，并且延迟500ms触发

limitBy : La valeur entrante doit être un tableau, les paramètres sont {Number}limit, {Number}[offset], limit est le nombre à afficher et offset est l'indice à démarrer afficher le tableau.

<p v-for="item in items | limitBy 10"></p> //items为数组，且只显示数组中的前十个元素

filterBy : la valeur entrante doit être un tableau et le paramètre est {String | Function}targetStringOrFunction, qui est la chaîne ou la fonction qui doit correspondre ; séparateur en option. {String}[...searchKeys], est la zone d'attribut récupérée.

<p v-for="name in names | filterBy &#39;1.0&#39;">{{ name }}</p> //检索names数组中值包含1.0的元素
<p v-for="item in items | filterBy &#39;1.0&#39; in &#39;name&#39;">{{ item | json }}</p> //检索items中元素属性name值为1.0的元素输出。检索区域也可以为数组，即in [name,version],在多个属性中进行检索。

//输出结果
vue1.0
{"name":"vue1.0","version":"1.0"}

Utiliser une fonction de filtre personnalisée, qui peut être définie dans les méthodes d'options

<p v-for="item in items | filterBy customFilter"
  methods:{
    cuestomFilter:function(item){
      if(item.name) return true;  //检索所有元素中包含name属性的元素
    }
  }

orderBy : La valeur entrante doit être un tableau , Le paramètre est {String|Array|Function}sortKeys, qui spécifie la stratégie de tri.

Nom de clé unique :

<p v-for="item in items | orderBy &#39;name&#39; -1">{{ item.name}}</p> //items数组中以键名name进行降序排列

Noms de clés multiples :

<p v-for="item in items | orderBy [name,version]">{{item.name}}</p> //使用items里的两个键名进行排序

Fonction de tri personnalisée :

<p v-for="item in items | orderBy customOrder">{{item.name}}</p>
methods:{
  customOrder: function(a,b){
    return parseFloat(a.version) > parseFloat(b.version) //对比item中version的值的大小进行排序
  }
}

5. La valeur de l'instruction

est limitée à l'expression de liaison, c'est-à-dire que lorsque la valeur de l'expression change, un comportement spécial sera appliqué au DOM lié.

Paramètre : src est le paramètre

<img v-bind:src="avatar" /> <==>  <img src="{{avatar}}" />

Modificateur : Un suffixe spécial commençant par un point demi-largeur., utilisé pour indiquer que l'instruction doit être liée d'une manière spéciale.

<button v-on:click.stop="doClick"></button> //stop:停止冒泡。相当于调用了e.stopPropagagation().

计算属性

避免在模板中加入过重的业务逻辑，保证模版的结构清晰和可维护性。

1.基础例子

var vm = new Vue({
    el: '#app',
    data: {
      firstName:'Gavin',
      lastName:'CLY'
    },
    computed: {
      fullName:function(){
        //this指向vm实例
        return this.firstName + ' ' + this.lastName;
      }
    }
})

<p>{{ firstName }}</p>  //Gavin
<p>{{ lastName }}</p>  //CLY
<p>{{ fullName }}</p>  //Gavin CLY

注：此时对vm.firstName和vm.lastName进行修改，始终会影响vm.fullName。

2.Setter

更新属性时带来便利

var vm = new Vue({
    el:'#el',
    data:{
      cents:100
    },
    computed:{
      price:{
        set:function(newValue) {
          this.cents = newValue * 100;
        },
        get:function(){
          return (this.cents / 100).toFixed(2);
        }
      }
    }
})

表单控件

v-model：对表单元素进行双向数据绑定，在修改表单元素值时，实例vm中对应的属性值也同时更新，反之亦然。

var vm = new Vue({
    el:'#app',
    data: {
      message: '',
      gender: '',
      cheched: '',
      multiChecked: '',
      a: 'checked',
      b: 'checked'
    }
})

1. Text

输入框示例，用户输入的内容和vm.message直接绑定：

<input type="text" v-model="message" />
<span>Your input is : {{ message }} </span>

2. Radio

单选框示例：

<label><input type="radio" value="male" v-model="gender">男</lable>
<label><input type="radio" value="famale" v-model="gender">女</lable>
<p>{{ gender }}</p> //显示的是value值

3.Checkbox

单个勾选框，v-model即为布尔值，此时Input的value并不影响v-model的值。

<input type="checkbox" v-model="checked" />
<span>checked: {{ checked }} </span> //显示的是true/false

多个勾选框，v-model使用相同的属性名称，且属性为数组。

<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="1" v-model="multiChecked">2</label>
<label><input type="checkbox" value="1" v-model="multiChecked">3</label>
<p>MultiChecked:{{ multiChecked.join{'|'} }}</p> //multiChecked:1|2

4.Select

单选

<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

多选

<select v-model="multiSelected" multiple>
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>MultiSelected: {{ multiSelected.join('|') }}</span>

5.绑定value

通过v-bind实现，表单控件的值绑定到Vue市里的动态属性上。

Checkbox

<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b" />

选中：

vm.checked == vm.a  //=> true

未选中：

vm.checked == vm.b //=>true

Radio

<input type="radio" v-model="checked" v-bind:value="a" >

选中：

vm.checked == vm.a //=> true

3.Select Options

<select v-model="selected">
    <!-- 对象字面量 -->
    <option v-bind:value="{ number:123}">123</option>
</select>

选中：

typeof vm.selected //=> object
vm.selected.number //=> 123

6.参数特性

.lazy:默认情况下，v-model在input事件中同步输入框与数据，加lazy属性后会在change事件中同步。

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number:自动将用户输入转为Number类型，如果原值转换结果为NaN，则返回原值。

<input v-model.number="age" type="number">

.trim:如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

<input v-model.trim="msg">

Class与Style绑定

1.Class绑定

对象语法：v-bind:class接受参数是一个对象，而且可以与普通的class属性共存。

<p class="tab" v-bind:class="{&#39;active&#39;:active,&#39;unactive&#39;:!active}"></p>

vm实例中需要包含：

data：{
  active:true
}

渲染结果为：

<p class="tab active"></p>

数组语法：v-bind:class也接受数组作为参数。

<p v-bind:class="[classA,classB]"></p>

vm实例中需要包括：

data:{
  classA:"class-a",
  classB:"class-b"
}

渲染结果为：

<p class="class-a class-b"></p>

使用三元表达式切换数组中的class

<p v-bind:class="[classA,isB?classB:""]"></p>

若

vm.isB = false

则渲染结果为

<p class="class-a"></p>

2.内联样式绑定(style属性绑定)

对象语法：直接绑定符合样式格式的对象。

<p v-bind:style="alertStyle"></p>

vm实例中包含：

data:{
  alertStyle:{
    color: 'red',
    fontSize: '2px'
  }
}

<p v-bind:style="{fontSize:alertStyle.fontSize,color:&#39;red&#39;}"></p>

数组语法：v-bind:style允许将多个样式对象绑定到同一元素上。

<p v-bind:style="[ styleObjectA,styleObjectB]" .></p>

3.自动添加前缀

在使用transform这类属性时，v-bind:style会根据需要自动添加厂商前缀。:style在运行时进行前缀探测，如果浏览器版本本省就不支持不加前缀的css属性，那就不会添加。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

VUE做出带有数据收集、校验和提交功能表单

怎样使用Vue操作DIV

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!