频道导航

关于vue.js v-bind 的一些理解和思考

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了关于vue.js v-bind 的一些理解和思考，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_4030@

一、v-bind 初探

@H403_0@它是一个 vue 指令，用于绑定 html 属性，如下：

<div class="jb51code">
<pre class="brush:xhtml;">
<div id="app">
<p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令

...... var vm = new Vue({ el: '#app',data: { title: 'title content' } });

@H_403_0@这里的 html 最后会渲染成：

属性不能使用双大括号形式绑定，只能使用v-bind指令

@H_403_0@

二、指令预期值

@H_403_0@上面这种 v-bind 这也是我们对于 vue 指令最初的理解，但实际上，vue 指令的预期值（如 v-bind:class="classProperty" 中，v-bind 是指令，: 后面的 class 是参数，而 classProperty 则在官方文档中被称为“预期值”），除了像上面那样绑定一个字符串类型变量，其实它是支持一个单一 JavaScript 表达式（v-for 除外）。所以在这里，我们就可以有更多的选择，例如：

@H_403_0@

（1）执行运算

属性不能使用双大括号形式绑定，只能使用v-bind指令

...... var vm = new Vue({ el: '#app',data: { t1: 'title1',t2: 'title2' } });

@H_403_0@最后渲染的结果：

属性不能使用双大括号形式绑定，只能使用v-bind指令

@H_403_0@

（2）执行函数等

属性不能使用双大括号形式绑定，只能使用v-bind指令

...... var vm = new Vue({ el: '#app',data: { getTitle: function () { return 'title content'; } } });

@H_403_0@最后渲染的结果：

属性不能使用双大括号形式绑定，只能使用v-bind指令

@H_403_0@

三、支持的数据类型

@H_403_0@上面的内容，指令预期值得到的都是字符串类型的数据，但实际上，我们知道 js 有很多数据类型，它如果放入其中呢？

@H_403_0@

（1）对象类型

...... var obj = {}; var vm = new Vue({ el: '#app',data: { obj: obj } }); @H_403_0@为什么一来就选择对象类型呢？答案是它比较有代表性，它渲染结果如下：

@H_403_0@诶，这个怎么有点眼熟？有点像...没错！对象的 toString 方法的返回值！为了验证我们的猜想，我们进行进一步的测试：

...... var obj = {};

obj.toString = function () {
return 'edited in toString!';
};

var vm = new Vue({
el: '#app',data: {
obj: obj
}
});

@H_403_0@上面这里修改了 obj 的 toString 方法（但准确的说，这里不是修改，而是添加。一开始的 obj 对象上自身是没有 toString 方法的，它继承了 Object.prototype.toString，但这里我们执行 obj.toString = function..... 实际上是为它添加了一个 toString 方法，使得它执行的时候，不用再去调用继承自 Object 的方法），渲染结果如下：

@H_403_0@这里就进一步证实了我们的猜想。

@H_403_0@

（2）数组类型

@H_403_0@数组类型的 toString 方法和对象类型的有所不同，它将返回和执行 arr.join(',') 相同的结果。如 [1,2,3].toString() 将返回 “1,3”。下面进行测试：

...... var vm = new Vue({ el: '#app',data: { arr: [1,3] } }); @H_403_0@渲染结果如下：

@H_403_0@仍然跟预期结果一样。

@H_403_0@

（3）其它类型

number 类型，正常执行 toString，包括数字0，结果都正常渲染成对应的字符串；
boolean 类型，true 正常渲染成字符串 "true"，但 false 虽然执行 toString 方法将返回 "false" 字符串，但是却没有渲染出来；
null / undefined 类型，二者没有 toString 方法，也没有渲染出来。

@H_403_0@显然，在执行 toString 方法之前，vue 内部应该先做了类型校验，满足条件才输出。而且这里不是简单的真 / 假值校验，因为、0 虽为假值，但最终却像真值一样渲染了出来。具体如何实现，可能需要参考 vue 的源码了，这里不再深究。

@H_403_0@

四、多 html 属性值绑

定

@H_403_0@一个的 html 属性值，可能包含许多内容，需要我们进行一些操作，将多个数据绑定到一个属性上，这里我们可以考虑像前面一样，通过如 “+” 等运算符号等实现字符串的连接操作。但是事实上，字符串连接麻烦又易错，不易于维护。于是我们可以考虑像前面一样向指令预期值中存入一个对象或数组，来实现多个数据绑定到一个属性上的作用。

@H_403_0@

（1）利用对象绑定

...... var obj = { name: 'Dale',age: 22 };

// 利用 for-in 循环遍历对象属性，拼接成字符串
obj.toString = function () {
var str = '';
for(var i in this) {
str += i + ': ' + this[i] + '; ';
}
return str;
};

// 防止 toString 方法自身被遍历出来
Object.defineProperty(obj,'toString',{'enumerable': false});

var vm = new Vue({
el: '#app',data: {
obj: obj
}
});

@H_403_0@输出结果：

@H_403_0@上面通过 for-in 循环在 toString 方法中得到所有可遍历的属性以及对应的属性值，然后将其拼接成字符串再进行输出，可以实现多属性值绑定，至于如何拼接，可以自己在 toString 方法中进行不同的实现。

@H_403_0@

（2）利用数组绑定

...... var arr = [1,3];

arr.toString = function () {
return this.join(' ');
};

var vm = new Vue({
el: '#app',data: {
arr: arr
}
});

@H_403_0@渲染结果如下：

@H_403_0@相比于对象字符串拼接，数组的拼接操作则显得简单得多，可以直接在 toString 方法返回 join 方法的返回值，默认的 toString 方法的返回值其实就和 join(',') 的返回值相同。

@H_403_0@

（3）思考

@H_403_0@其实想想一个 html 属性绑定多个值的情况其实并不少见，最典型的应该是 class 和 style 属性，或者说我们经常都会接触到这样的场景。

@H_403_0@但我们这里的实现，看起来还是问题比较多，数组的绑定还好，对象的绑定，除了每次要重写 toString 方法以外，我们还需要设置 toString 方法变得不可枚举，否则它将在 for-in 循环中被遍历出来（一般情况下，这不是我们希望看到的结果），这样无疑会增加很多重复性工作，而 vue 为我们考虑到了这一点，它在框架内部进行了一些优化操作。

@H_403_0@