常用js框架之vue.js(深入二:杂项）

妈蛋，写了一大半给弄没了，又重写。

1.数据绑定语法。
前面用过{{}},可以替换文本，也可以替换属性值中的文本比如<input id = "{{id}}">

{{{}}}三重花括号则可以替换html，有点6啊。

也可以插入表达式{{a+1}}

过滤器我们前面用过了{{value|filter1|filter2}},同时也可以带参数{{ message | filterA ‘arg1’ arg2 }}

指令、参数、修饰符 <a v-bind:href.literal="/a/b/c"></a>。v-bind是指令表示执行什么操作，href是参数表明要操作的对象，literal是修饰符表名操作限制。

指令也可以缩写 v-bind:href 可以写作:href v-on:click可以缩写成@click

2.计算属性。
前面用过表达式{{a+1}},当我们的表达式没这么简单，比如计算一个位置在球面的坐标，一行代码搞不定，这时候就要用到计算属性。
两种方式：
一是使用vue基类的watch方法

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})
vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

此时watch监听data属性中的firstname字段，当其有变化时自动执行后面的方法，val代表firstname当前值。

二是使用vue基类的computed:{}属性

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

3.Class 与 Style 绑定
vue模板也可以用作样式绑定。还记得外部样式class和内部样式style吗？
绑定class时使用 v-bind:class,分为对象绑定和数组绑定

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
data: {
  isA: true,
  isB: false
}
//渲染为：
<div class="static class-a"></div>
//当 isA 和 isB 变化时，class 列表将相应地更新。例如，如果 isB 变为 true，class 列表将变为
<div class="static class-a class-b"></div>
//你也可以直接绑定数据里的一个对象：
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    'class-a': true,
    'class-b': false
  }
}

此为对象绑定，是动态切换样式的好办法。数组样式v-bind:class=”[classObject1,classObject2]”很明显可以组合不同样式

绑定style时使用 v-bind:style,也是分为对象绑定和数组绑定

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}
//直接绑定到一个样式对象通常更好，让模板更清晰：
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组绑定类似class的用法

4.条件渲染不说了 v-if v-else v-show前面都用过了

5.列表渲染v-for也用过了，适用于单个li的模板，如果是多个li，就使用template v-for

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

列表模板经常要对其数据进行操作，考虑以下vue实例

var vm = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

对数组items进行操作的方式很多，还记得原生js的数组操作吗？这里类似，不过有所区别。
vue提供了某些操作的变异方法，这些变异方法直接修改了原数组，让页面实时刷新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

也有非变异方法：
如 filter(), concat() 和 slice()，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组：

example2.items = example2.items.filter(function (item) {
  return item.message.match(/Foo/)
})

可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，因而用另一个数组替换数组是一个非常高效的操作。

还有track-by，注意刚才我们看到vue对列表渲染是有做优化的，尽可能的复用，track-by也是出于这个考虑的，意思是根据什么特征来进行复用。

例如，假定数据为：

{
  items: [
    { _uid: '88f869d', ... },
    { _uid: '7496c10', ... }
  ]
}
然后可以这样给出提示：

<div v-for="item in items" track-by="_uid">
  <!-- content -->
</div>
然后在替换数组 items 时，如果 Vue.js 遇到一个包含 _uid: '88f869d' 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。

同时，还记得v-for里面可以使用$index吗？所以track-by="$index"也是可以的，简单地以对应索引的新值刷新。据说也有坑，暂时还没体验到。

6.方法与事件处理器
方法处理器v-on:click=”say(‘hi’)” 前面用过了，不多说。
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="say('hello!', $event)">Submit</button>
// ...
methods: {
  say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
}

虽然这样可以写dom事件，但是将dom事件跟业务逻辑混在一起是很蛋疼的，有没办法分开？
有，事件修饰符。Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop
所以以上代码完全可以改写为：v-on:click.prevent=”say(‘hello!’)”
event.preventDefault() 或 event.stopPropagation()可以分别用.prevent 与 .stop修饰符改写。

1.0.16 添加了两个额外的修饰符：

<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

也有按键修饰符
记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：

enter
tab
delete
esc
space
up
down
left
right

使用 v-on 有几个好处：

a.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
b.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
c.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

7.表单控件绑定vue，这里不多说，大概讲的是各种表单控件如何绑定vue，好处是表单控件的值被模板化后动态更新。