Vue（三）——数据绑定

数据绑定

简单文本绑定

最简单也是最常用的数据绑定方法，通过使用{{}}标签来绑定数据：

var app = new Vue({el : '#app',data : {name: 'hengyumo'}
})

<span>Hello, this is {{name}}</span> --> Hello, this is hengyumo

通过app.name = 'xiaoli’可以实现数据的更新

使用{{* name }}可以实现单次插值，即数据只在首次赋值中起作用，而后续的更新不会引起变化。

vue2中使用v-once替代了{{* name }}的写法，即<span v-once='name'>{{name}}</span>

{{}}同样可以用在html元素的属性上，例如<h1 id="title-{{id}}">title-{{id}}</h1>，
在vue2中用v-bind代替了这种写法：<h1 v-bind:id="'title-' + id">title-{{id}}</h1>
或者简写成<h1 :id="'title-' + id">title-{{id}}</h1>

示例：

<!DOCTYPE html>
<html>
<head><title>test data binding 1</title><script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
</head>
<body><div id="app"><span>Hello, this is {{name}}</span><span>My name is {{* name }}</span><h1 id="title-{{id}}">title-{{id}}</h1></div>
</body><script type="text/javascript">var app = new Vue({el : '#app',data: {name: 'hengyumo',id: 0} })app.name = 'xiaoli'
</script>
</html>

结果：

f12查看dom：

表达式绑定

放在{{}}之中的除了最基本的数据之外，还可以是js表达式，下面是几个示例：

{{ i + 1 }}
{{ i == 0 ? 'yes': 'no' }}
{{ location.split('-') }}
{{ times.join('-') }}

注意只能是表达式而不能是语句，下面的示例是错误的：

{{ var name = 'xiaoli' }}
{{ if (ok) {return name} }}

过滤器

在表达式后边可以添加过滤器，用’|'来进行分隔，如：

{{ name | uppercase }} //返回字符串的大写值
{{ name | filter_1 | filter_2 }} //使用两个过滤器
{{ name | filter arg_1 arg_2 }} //使用arg_1和arg_2作为filter的参数
{{ name.split('') | limitBy 3 1 }} //返回name.split('')之后的1-4个数组元素

以下是vue1内置的10个过滤器：
① capitalize ：字符串首字符转化成大写
② uppercase ：字符串转化成大写
③ lowercase ：字符串转化成小写
④ currency 参数为{String}[货币符号] ,{Number} [小数位]，将数字转化成货币符号，并且会自动添加数字分节号。例如：
{{ amount | currency ‘￥’ 2 }} // -> 若amount值为10000，则输出￥10,000.00
⑤ pluralize 参数为 {String} single, [double, triple]，字符串复数化。如果接收的是一个参数，那复数形式就是在字符串末尾直接加一个“s”。如果接收多个参数，则会被当成数组处理，字符串会添加对应数组下标的值。如果字符串的个数多于参数个数，多出部分会都添加最后一个参数的值。例如：

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

结果：
1item 1st
2items 2nd
3items 3rd
4items 4th
⑥ json 参数为 {Number}[indent] 空格缩进数，与 JSON.stringify() 作用相同，将 json 对象数据输出成符合 json 格式的字符串。
⑦ debounce 传入值必须是函数，参数可选，为 {Number}[wait]，即延时时长。作用是当调用函数 n 毫秒后，才会执行该动作，若在这 n 毫秒内又调用此动作则将重新计算执行时间。例如：

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

⑧ limitBy 传入值必须是数组，参数为 {Number}limit，{Number}[offset], limit 为显示个数，offset 为开始显示数组下标。例如：

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

⑨ filterBy 传入值必须是数组，参数为 {String | Function} targetStringOrFunction，即需要匹配的字符串或函数（通过函数返回值为 true 或 false 来判断匹配结果）；“in” （可选分隔符）；{String}[…searchKeys]，为检索的属性区域。示例 :

names : ['xiaoli', 'xiaowan'],
items : {{ name : 'xiaoli', age : "10" },{ name : 'xiaowan', age : "20" }
}
...
<p v-for="name in names | ﬁlterBy 'li'">{{name}}</p>　// 检索items数组中 值包含1.0的元素
<p v-for="item in items | ﬁlterBy 'wan' in 'name'">{{ item | json}}</p> // 检索items数组中元素属性name值为1.0的元素输出。检索区域也可以为数组，即in [name, age]，在多个属性中进行检索

结果：
xiaoli
{“name” : “xiaowan”, “age” : “20” }

<p v-for="item in items | ﬁlterBy customFilter">{{ item | json}}</p> // 使用自定义的过滤函数，函数可以在选项methods中定义
methods : { customFilter : function(item) {if(item.name) return true　// 检索所有元素中包含name属性的元素}
}

⑩ orderBy 传入值必须是数组，参数为 {String|Array|Function}sortKeys，即指定排序策略。这里可以使用单个键名，也可以传入包含多个排序键名的数组。
也可以像 Array.Sort() 那样传入自己的排序策略函数。第二个参数为可选参数 {String}[order]，即选择升序或降序， order>=0 为升序，order<0 为降序。下面以三种不同的参数例子来说明具体的用法：

单个键名：
<p v-for="item in items | orderBy 'name' -1">{{item.name}}</p> // items数组中以键名name进行降序排列
多个键名：
<p v-for="item in items | orderBy [name,age] ">{{item.name}}</p> // 使用items里的两个键名进行排序
自定义排序函数:
<p v-for="item in items | orderBy customOrder">{{item.name}} </p>
methods: {customOrder: function (a, b) {return parseFloat(a.age) > parseFloat(b.age)　// 对比item中 age的值的大小进行排序}
}

在vue2中去除了内置的过滤器，但是我们仍可以定义自己的过滤器，也可以使用开源的插件中带的过滤器。

指令

vue.js是用v-加上指令名组成的，通过使用指令可以设置绑定数据和时间的规则：
① 参数绑定

等同于使用v-bind：

在这里v-bind是个命令，而src既是命令的参数
② 修饰符

计算属性中的函数

在使用数据绑定时，我们通常在呈现数据时都需要对数据进行一定的处理，为了避免过重的逻辑放在模板上，我们可以通过使用计算属性中的函数来预处理数据，从而提高可维护性和阅读性：
示例：

<p>{{ date }}</p>
<p>{{ time }}</p>
<p>{{ datetime }}</p>...var app = new Vue({el: '#app',data: {date: '2019-2-18',time: '10:31'},computed: {datetime: function() {return this.date + ' ' + this.time}}
})

更方便的是计算属性中的set和get：

<p>{{ show_num }}</p>...var app = new Vue({el: '#app,data: { num: 100 },computed: {show_num: {set: function(num) {this.num = num}get: function() {return 'num is ' + this.num}}}
}
app.num = 200 // -> num is 200

表单控件

通过使用v-model来进行对表单元素的双向数据绑定，在修改表单元素值时会同时对v-model绑定的数据进行修改：

var app = new Vue({el : '#app',data: {message : '',gender : '',checked : '', multiChecked : [],selected : '',multiSelected : []}
})

Text

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

Radio

<label><input type="radio" value="male" v-model="gender ">男</lable> <label><input type="radio" value="female" v-model="gender ">女</lable>
<p>{{ gender }}</p>
//gender 值即为选中的 radio 元素的 value 值。

CheckBox
Checkbox 分两种情况：单个勾选框和多个勾选框。单个勾选框，v-model 即为布尔值，此时 input 的 value 并不影响 v-model 的值。

<input type="checkbox" v-model="checked" />
<span>checked : {{ checked }}</span>

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

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

Select
同 Checkbox 元素一样，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>
<br>
<span>MultiSelected: {{ multiSelected.join('|') }}</span>

绑定value
表单控件的值同样可以绑定在 Vue 实例的动态属性上，用 v-bind 实现。
示例：

Checkbox

<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">
选中：app.checked == app.a　　// -> true
未选中：app.checked == app.b　// -> true

Radio

<input type="radio" v-model="checked", v-bind:value="a">
选中 : app.checked == app.a　// -> true

Select Options

<select v-model="selected"> 　 <!-- 对象字面量 --> 　 <option v-bind:value="{ number: 123 }">123</option>
</select>
选中：
typeof app.selected //　-> 'object'
app.selected.number // -> 123

参数特性
Vue.js 为表单控件提供了一些参数，方便处理某些常规操作。
① lazy
默认情况下，v-model 在 input 事件中同步输入框值与数据，加 lazy 属性后从会改到在 change 事件中同步

<input v-model="query" lazy />

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

<input v-model="age" number/>

③ debounce
debounce 为设置的最小延时，单位为 ms，即为单位时间内仅执行一次数据更新。该参数往往应用在高耗操作上，例如在更新时发出 ajax 请求返回提示信息。

<input v-model="query" debounce="500" />

不过 Vue.js 2.0 中取消了 lazy 和 number 作为参数，用修饰符（modifier）来代替 :

<input v-model.lazy="query" />　<input v-model.numer="age" />

新增了 trim 修饰符，去掉输入值首尾空格 :

<input v-model.trim="name" />

去除了debounce 这个参数，原因是无法监测到输入新数据，但尚未同步到app 实例属性时这个状态。如果仍有需要，官方提供了手动实现的例子https://jsbin.com/zefawu/3/edit?html,output。

样式绑定

通过使用v-bind:class或者v-bind:style就可以进行简单的样式绑定了，但是vue还有一些更高级的使用方法来方便我们。

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

<div class="tab" v-bind:calss="{'active' : active , 'unactive' : !active}"> </div> app实例中需要包含 　
data : {active : true}

结果为：

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

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

<div v-bind:class="[classA, classB]"></div> app实例中需要包含 　
data : {classA : 'class-a',classB : 'class-b'}

结果为：

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

也可以使用三元表达式切换数组中的 class，<div v-bind:class="[classA, isB ? classB : '']"></div>。如果 app.isB = false, 则渲染结果为

<div v-bind:class="class-a"></div>

2、内联样式绑定
style 属性绑定的数据即为内联样式，同样具有对象和数组两种形式：
① 对象语法：直接绑定符合样式格式的对象。

<div v-bind:style="alertStyle"></div>
data : {alertStyle : {color : 'red',fontSize : '20px'}
}

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

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

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