关于Vue.js的认识（部分）[转载]

一、关于v-bind

1.初识v-bind

（1）.加冒号的是 vue 的 v-bind 语法糖（指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用），绑定vue的一个数据；不加冒号的就是HTML的属性，和 onclick="doSth()"是一个意思。它是一个 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>

2.指令预期值

a.执行运算

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

<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>

b.执行函数等

<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>

3.支持的数据类型

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

a.对象类型

<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>

b.数组类型

数组类型的 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>

c.其它类型

number 类型，正常执行 toString，包括数字0，结果都正常渲染成对应的字符串；

boolean 类型，true 正常渲染成字符串 "true"，但 false 虽然执行 toString 方法将返回 "false" 字符串，但是却没有渲染出来；

<div id="app">
    <p v-bind:title="aaa">我是刘勇</p>
</div>
</body>
<script type="text/javascript">
    var obj={
            a:null,//a:undefined,a:false
    };
/*     obj.toString=function(){
        return false;
    }(); */
    var vm = new Vue({
        el:'#app',
        data:{
            aaa:obj.a
        }
    });
</script>

渲染结果：

<div id="app">
    <p >aaaaa</p>
</div>

结果确实没有渲染出来。

null / undefined 类型，二者没有 toString 方法，也没有渲染出来。

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

4、多 html 属性值绑定

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

关于Vue.js的认识（部分）[转载]

猜你喜欢