How to operate vue.js data binding-JS Tutorial-php.cn

This time I will show you how to operate vue.js data binding, and what are the precautions for operating vue.js data binding. The following is a practical case, let's take a look.

Data binding

Responsive data binding system. After the binding is established, the DOM will be synchronized with the data, and there is no need to manually maintain the DOM. Make the code more concise and easy to understand and improve efficiency.

Data binding syntax

1. Text interpolation

{{ }}Mustache tag

Hello　{{ name }}

Copy after login

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

Copy after login

Single interpolation

Changing the vm instance attribute value after the first assignment will not cause DOM changes

{{ name }}

Copy after login

2. HTML attributes

Mustache tag {{ }}

Copy after login

Abbreviation:

Copy after login

3. Binding expression

The text content placed in the Mustache tag. In addition to directly outputting the attribute value, a binding expression can consist of a simple JavaScript expression and optionally one or more filters (regular expressions are not supported. If complex conversion is required, use filters or computed properties for processing).

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

Copy after login

4. Filter

vue.js allows adding optional filters after expressions, indicated by the pipe character "|".

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

Copy after login

At this time, filterA passes the value of name as the first parameter, and arg1 and arg2 as the second and third parameters into the filter function.

The return value of the final function is the output result. arg1 and arg2 can use expressions or add single quotes to directly pass in strings.

For example:

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

Copy after login

The filter limitBy can accept two parameters. The first parameter is to set the number of displays. The second parameter is optional and refers to the array subscript of the starting element. .

The 10 built-in filters of vue.js (removed in Vue.js2.0)

capitalize: The first character of the string is converted to uppercase.
uppercase: Convert the string to uppercase.
lowercase: The string is converted to lowercase.
currency: The parameters are {String}[currency symbol], {Number}[decimal places], convert the number into currency symbol, and automatically add numerical section numbers.

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

Copy after login

pluralize: The parameters are {String}single,[double,triple], and the string is pluralized.

{{ c | pluralize 'item' }} {{ c | pliralize 'st' 'nd' 'rd' 'th' }}

Copy after login

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

Copy after login

json: The parameter is {Number}[indent] space indentation number, and the json object data is output into a string that conforms to the json format.

debounce: The incoming value must be a function, and the parameter is optional, which is {Number}[wait], which is the delay length. The effect is that the action will not be executed until n milliseconds after the function is called.

 //input元素上监听了keyup事件，并且延迟500ms触发

Copy after login

limitBy: The incoming value must be an array, the parameter is{Number}limit,{Number}[offset], and the limit is Display the number, offset is the starting array subscript.

//items为数组，且只显示数组中的前十个元素

Copy after login

filterBy: The incoming value must be an array, and the parameter is{String | Function}targetStringOrFunction, which is the string or function that needs to be matched; "in" can Select separator.{String}[...searchKeys], is the retrieved attribute area.

{{ name }}
 //检索names数组中值包含1.0的元素 {{ item | json }}
 //检索items中元素属性name值为1.0的元素输出。检索区域也可以为数组，即in [name,version],在多个属性中进行检索。

Copy after login

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

Copy after login

Use a custom filter function, which can be defined in the options methods

Copy after login

orderBy: The incoming value must be an array, and the parameter is{String |Array|Function}sortKeys, which specifies the sorting strategy.

Single key name:

{{ item.name}}
 //items数组中以键名name进行降序排列

Copy after login

Multiple key names:

{{item.name}}
 //使用items里的两个键名进行排序

Copy after login

Custom sorting function:

{{item.name}}
 methods:{ customOrder: function(a,b){ return parseFloat(a.version) > parseFloat(b.version) //对比item中version的值的大小进行排序 } }

Copy after login

5. CommandThe value of the

directive is limited to the binding expression, that is, when the value of the expression changes, some special behavior will be applied to the bound DOM.

Parameter: src is the parameter

 <==>

Copy after login

Modifier: a special suffix starting with a half-width period., used to indicate that the instruction should be bound in a special way.

 //stop:停止冒泡。相当于调用了e.stopPropagagation().

Copy after login

Computed Properties

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

1.基础例子

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

Copy after login

{{ firstName }}
 //Gavin {{ lastName }}
 //CLY {{ fullName }}
 //Gavin CLY

Copy after login

注：此时对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); } } } })

Copy after login

表单控件

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

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

Copy after login

1. Text

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

 Your input is : {{ message }}

Copy after login

2. Radio

单选框示例：

男 女 {{ gender }}
 //显示的是value值

Copy after login

3.Checkbox

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

 checked: {{ checked }}  //显示的是true/false

Copy after login

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

1 2 3 MultiChecked:{{ multiChecked.join{'|'} }}
 //multiChecked:1|2

Copy after login

4.Select

单选

 Selected: {{ selected }}

Copy after login

多选

 MultiSelected: {{ multiSelected.join('|') }}

Copy after login

5.绑定value

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

Checkbox

Copy after login

选中：

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

Copy after login

未选中：

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

Copy after login

Radio

Copy after login

选中：

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

Copy after login

3.Select Options

Copy after login

选中：

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

Copy after login

6.参数特性

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

Copy after login

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

Copy after login

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

Copy after login

Class与Style绑定

1.Class绑定

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

Copy after login

vm实例中需要包含：

data：{ active:true }

Copy after login

渲染结果为：

Copy after login

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

Copy after login

vm实例中需要包括：

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

Copy after login

渲染结果为：

Copy after login

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

Copy after login

若

vm.isB = false

Copy after login

则渲染结果为

Copy after login

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

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

Copy after login

vm实例中包含：

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

Copy after login

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

Copy after login

3.自动添加前缀

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

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

怎样使用js操作图片转为base64

The above is the detailed content of How to operate vue.js data binding. For more information, please follow other related articles on the PHP Chinese website!