Heim > Artikel > Web-Frontend > So führen Sie den Datenbindungsvorgang von vue.js durch
Dieses Mal zeige ich Ihnen, wie Sie den vue.jsDatenbindungsvorgang durchführen und welche Vorsichtsmaßnahmen für den vue.js-Datenbindungsvorgang gelten. Das Folgende ist ein praktischer Fall. Werfen wir einen Blick darauf.
Datenbindung
Responsives Datenbindungssystem. Nachdem die Bindung hergestellt wurde, wird das DOM mit den Daten synchronisiert und es besteht keine Notwendigkeit, das DOM manuell zu verwalten. Machen Sie den Code prägnanter und verständlicher und verbessern Sie die Effizienz.
Datenbindungssyntax
1. Textinterpolation
{{ }}Mustache-Tag
<span>Hello {{ name }}</span>
data:{ name: 'vue' } == > Hello vue
Einzelne Interpolation
Das Ändern des VM-Instanzattributwerts nach der ersten Zuweisung führt nicht zu DOM-Änderungen
<span v-once="name">{{ name }}</span>
2. HTML-Attribute
Mustache-Tag {{ }}
<p v-bind:id="'id-'+id"></p>
Abkürzung:
<p :id="'id-'+id"></p>
3. Bindungsausdruck
Text Inhalte, die innerhalb des Moustache-Tags platziert werden. Zusätzlich zur direkten Ausgabe des Attributwerts kann ein Bindungsausdruck aus einem einfachen JavaScript-Ausdruck und optional einem oder mehreren Filtern bestehen (reguläre Ausdrücke werden nicht unterstützt; wenn eine komplexe Konvertierung erforderlich ist, verwenden Sie Filter oder berechnete Eigenschaften dafür Verarbeitung).
{{ index + 1}} {{ index == 0 ? 'a' : 'b' }} {{name.split('').join('|') }} {{ var a = 1 }} //无效
4. Filter
vue.js ermöglicht das Hinzufügen optionaler Filter nach Ausdrücken, angezeigt durch das Pipe-Zeichen „|“.
{{ name | uppercase }} // Vue.js将name的值传入给uppercase这个内置的过滤器中(本质是一个函数),返回字符串的大写值。 {{ name | filterA | filterB }} //多个过滤器链式使用 {{ name | filterA arg1 arg2 }} //传入多个参数
Zu diesem Zeitpunkt übergibt filterA den Wert von name als ersten Parameter und arg1 und arg2 als zweiten und dritten Parameter an die Filterfunktion.
Schließlich ist der Rückgabewert der -Funktion das Ausgabeergebnis. arg1 und arg2 können Ausdrücke verwenden oder einfache Anführungszeichen hinzufügen, um Zeichenfolgen direkt zu übergeben.
Zum Beispiel:
{{ name.split('') | limitBy 3 1 }} // ->u,e
Der Filter limitBy kann zwei Parameter akzeptieren. Der erste Parameter dient zum Festlegen der Anzeigenummer, und der zweite Parameter ist optional und bezieht sich auf den Array-Index des Startelements . .
Die 10 integrierten Filter von vue.js (entfernt in Vue.js2.0)
Großschreibung: Das erste Zeichen der Zeichenfolge wird in Großbuchstaben umgewandelt.
Großbuchstaben: Konvertieren Sie die Zeichenfolge in Großbuchstaben.
Kleinbuchstaben: Konvertieren Sie die Zeichenfolge in Kleinbuchstaben.
Währung: Die Parameter sind {String}[Währungssymbol], {Number}[Dezimalstellen], konvertieren die Zahl in ein Währungssymbol und fügen automatisch numerische Abschnittsnummern hinzu.
{{ amount | currency '¥' 2 }} //若amount值为1000,则输出为¥1,000.00
pluralize: Die Parameter sind {String}single, [double, Triple] und der String wird pluralisiert.
<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: Der Parameter ist {Number}[indent] Leerzeichen-Einrückungsnummer, und die JSON-Objektdaten werden in eine Zeichenfolge ausgegeben, die dem JSON-Format entspricht.
Entprellen: Der eingehende Wert muss eine Funktion sein, und der Parameter ist optional, nämlich {Number}[wait], also die Verzögerungslänge. Dies hat zur Folge, dass die Aktion erst n Millisekunden nach dem Aufruf der Funktion ausgeführt wird.
<input v-on:keyup="onKeyup | debounce 500"> //input元素上监听了keyup事件,并且延迟500ms触发
limitBy: Der eingehende Wert muss ein Array sein, die Parameter sind {Number}limit
, {Number}[offset]
, limit ist die anzuzeigende Zahl und offset ist der Index, mit dem die Anzeige beginnt Array.
<p v-for="item in items | limitBy 10"></p> //items为数组,且只显示数组中的前十个元素
filterBy: Der eingehende Wert muss ein Array sein und der Parameter ist {String | Function}targetStringOrFunction
, also die Zeichenfolge oder Funktion, die abgeglichen werden muss; „in“ ist ein optionales Trennzeichen . {String}[...searchKeys]
ist der abgerufene Attributbereich.
<p v-for="name in names | filterBy '1.0'">{{ name }}</p> //检索names数组中值包含1.0的元素 <p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json }}</p> //检索items中元素属性name值为1.0的元素输出。检索区域也可以为数组,即in [name,version],在多个属性中进行检索。
//输出结果 vue1.0 {"name":"vue1.0","version":"1.0"}
Verwenden Sie eine benutzerdefinierte Filterfunktion, die in den Optionsmethoden
<p v-for="item in items | filterBy customFilter" methods:{ cuestomFilter:function(item){ if(item.name) return true; //检索所有元素中包含name属性的元素 } }
orderBy definiert werden kann: Der eingehende Wert muss ein Array sein und der Parameter ist {String|Array|Function}sortKeys
, d. h. Geben Sie die Sortierstrategie an.
Einzelner Schlüsselname:
<p v-for="item in items | orderBy 'name' -1">{{ item.name}}</p> //items数组中以键名name进行降序排列
Mehrere Schlüsselnamen:
<p v-for="item in items | orderBy [name,version]">{{item.name}}</p> //使用items里的两个键名进行排序
Benutzerdefinierte Sortierfunktion:
<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. Befehle Der Wert der
-Direktive ist auf den Bindungsausdruck beschränkt, d. h. wenn sich der Wert des Ausdrucks ändert, wird ein spezielles Verhalten auf das gebundene DOM angewendet.
Parameter: src ist der Parameter
<img v-bind:src="avatar" /> <==> <img src="{{avatar}}" />
修饰符:以半角句号.开始的特殊后缀,用于表示指令应该以特殊方式绑定。
<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="{'active':active,'unactive':!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:'red'}"></p>
数组语法:v-bind:style
允许将多个样式对象绑定到同一元素上。
<p v-bind:style="[ styleObjectA,styleObjectB]" .></p>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Das obige ist der detaillierte Inhalt vonSo führen Sie den Datenbindungsvorgang von vue.js durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!