首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 06, 2017

一、v-bind 初探

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

<div id="app">
  <p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
  el: '#app',
  data: {
    title: 'title content'
  }
});

这里的 html 最后会渲染成：

<div id="app">
  <p title="title content">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>

二、指令预期值

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

（1）执行运算

<div id="app">
  <p v-bind:title="t1 + ' ' + t2">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
  el: '#app',
  data: {
    t1: 'title1',
    t2: 'title2'
  }
});

最后渲染的结果：

<div id="app">
  <p title="title1 title2">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>

（2）执行函数等

<div id="app">
  <p v-bind:title="getTitle()">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
  el: '#app',
  data: {
    getTitle: function () {
      return 'title content';
    }
  }
});

最后渲染的结果：

<div id="app">
  <p title="title content">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>

三、支持的数据类型

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

（1）对象类型

<div id="app">
  <p v-bind:title="obj">content</p>
</div>
......
var obj = {};
var vm = new Vue({
  el: '#app',
  data: {
    obj: obj
  }
});

为什么一来就选择对象类型呢？答案是它比较有代表性，它渲染结果如下：

<div id="app">
  <p title="[object Object]">content</p>
</div>

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

<div id="app">
  <p v-bind:title="obj">content</p>
</div>
......
var obj = {};

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

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

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

<div id="app">
  <p title="edited in toString!">content</p>
</div>

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

（2）数组类型

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

<div id="app">
  <p v-bind:title="arr">content</p>
</div>
......
var vm = new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3]
  }
});

渲染结果如下：

<div id="app">
  <p title="1,2,3">content</p>
</div>

仍然跟预期结果一样。

（3）其它类型

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

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

四、多 html 属性值绑定

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

（1）利用对象绑定

<div id="app">
  <p v-bind:title="obj">content</p>
</div>
......
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
  }
});

输出结果：

<div id="app">
  <p title="name: Dale; age: 22; ">content</p>
</div>

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

（2）利用数组绑定

<div id="app">
  <p v-bind:title="arr">content</p>
</div>
......
var arr = [1, 2, 3];

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

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

渲染结果如下：

<div id="app">
  <p title="1 2 3">content</p>
</div>

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

（3）思考

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

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

五、vue 对于 class 和 style 绑定的增强

基于上面的情况，vue 对 class 和 style 这两个 html 属性进行了一定程度的增强。vue 具体的实现方式请参考其源码，这里仅给出基于上面的结论的实现方式。

（1）基于对象针对 class 的增强

<div id="app">
  <p v-bind:class="obj">content</p>
</div>
......
var obj = {
  c1: true,
  c2: false,
  c3: null,
  c4: undefined
};

obj.toString = function () {
  var str = '';
  for(var i in this) {
    if(this[i]) {
      str += i + ' ';
    }
  }

  return str;
};

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

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

渲染结果：

<div id="app">
  <p class="c1">content</p>
</div>

同样是 for-in，与之前不同的是，当检测到 obj 的某个属性值为真的时候，则将这个属性的属性名添加到绑定的元素的 class 上。当然，我这里只是一个模拟实现，vue 实际的实现方式，请参考 vue 源码。

（2）基于数组对 class 的增强

<div id="app">
  <p v-bind:class="arr">content</p>
</div>
.......
var arr = ['c1', 'c2', 'c3'];

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

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

渲染结果：

<div id="app">
  <p class="c1 c2 c3">content</p>
</div>

这里基本和前面的实现思路一样，利用 join(' ') 实现。

（3）基于对象对 style 的增强

<div id="app">
  <p v-bind:style="obj">content</p>
</div>
......
var obj = {
  color: 'red',
  backgroundColor: '#ddd',
  fontSize: '20px',
};

obj.toString = function () {
  var str = '';
  for(var i in this) {
    if(this[i]) {
      str += i + ':' + this[i] + ';';
    }
  }

  return str;
};

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

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

渲染结果：

<div id="app">
  <p style="color: red; background-color: rgb(221, 221, 221); font-size: 20px;">content</p>
</div>

这里基本和前面的实现思路一样，利用 for-in 配合字符串拼接实现。

（4）基于数组对 style 的增强

<div id="app">
  <p v-bind:style="arr">content</p>
</div>

<script>
var arr = [{
    color: "red"
  }, {
    backgroundColor: '#ddd'
  }, {
    fontSize: '20px'
  }];

arr.toString = function () {
  var str = '';
  arr.forEach(function (val, key) {
    for(var i in val) {
      str += i + ':' + val[i] + ';';
    }
  });
};

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

渲染结果：

<div id="app">
  <p style="color: red; background-color: rgb(221, 221, 221); font-size: 20px;">content</p>
</div>

这里通过 forEach 方法遍历了数组，然后将数组元素（也就是这里我们的样式对象）再通过 for-in 遍历并拼接成样式字符串达到效果。

六、结语

再次强调，这里只是个人的理解和思考，仅供参考，vue 本身的实现方式未必相同。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

江湖z

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 #Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 #Javascript
详解Vue 开发模式下跨域问题
Jun 06 #Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 #Javascript
深入理解vue-loader如何使用
Jun 06 #Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 #Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 #Javascript
Spring Boot(5) ICF-5900W(2) EventBus(1) pt-archiver(1) TcpServer(1) 忘记密码(1) 多线程(6) muduo(1) Spring-Retry(1) Fragment(1)
You might like
php+mysql实现数据库随机重排实例
2014/10/17 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
php实现微信支付之企业付款
2018/05/30 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
this和执行上下文实现代码
2010/07/01 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址（80）
2017/09/18 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
PyTorch中permute的用法详解
2019/12/30 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
LN-CC日本：高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
社团文化节邀请函
2014/01/10 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书