使用 JavaScript 代替模板功能

v-if 和 v-for

只要在原生的 JavaScript 中可以轻松完成的操作，Vue 的渲染函数就不会提供专有的替代方法。比如，在模板中使用的 v-if 和 v-for：

  1. <ul v-if="items.length">
  2.   <li v-for="item in items">{{ item.name }}</li>
  3. </ul>
  4. <p v-else>No items found.</p>

这些都可以在渲染函数中用 JavaScript 的 if/else 和 map 来重写：

  1. props: ['items'],
  2. render: function (createElement) {
  3.   if (this.items.length) {
  4.     return createElement('ul', this.items.map(function (item) {
  5.       return createElement('li', item.name)
  6.     }))
  7.   } else {
  8.     return createElement('p', 'No items found.')
  9.   }
  10. }

v-model

渲染函数中没有与 v-model 的直接对应——你必须自己实现相应的逻辑：

  1. props: ['value'],
  2. render: function (createElement) {
  3.   var self = this
  4.   return createElement('input', {
  5.     domProps: {
  6.       value: self.value
  7.     },
  8.     on: {
  9.       input: function (event) {
  10.         self.$emit('input', event.target.value)
  11.       }
  12.     }
  13.   })
  14. }

这就是深入底层的代价，但与 v-model 相比，这可以让你更好地控制交互细节。

事件 & 按键修饰符

对于 .passive、.capture 和 .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on：

修饰符前缀
.passive&
.capture!
.once~
.capture.once 或.once.capture~!

例如:

  1. on: {
  2.   '!click': this.doThisInCapturingMode,
  3.   '~keyup': this.doThisOnce,
  4.   '~!mouseover': this.doThisOnceInCapturingMode
  5. }

对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：

修饰符处理函数中的等价操作
.stopevent.stopPropagation()
.preventevent.preventDefault()
.selfif (event.target !== event.currentTarget) return
按键：.enter, .13if (event.keyCode !== 13) return (对于别的按键修饰符来说，可将 13 改为另一个按键码)
修饰键：.ctrl, .alt, .shift, .metaif (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)

这里是一个使用所有修饰符的例子：

  1. on: {
  2.   keyup: function (event) {
  3.     // 如果触发事件的元素不是事件绑定的元素
  4.     // 则返回
  5.     if (event.target !== event.currentTarget) return
  6.     // 如果按下去的不是 enter 键或者
  7.     // 没有同时按下 shift 键
  8.     // 则返回
  9.     if (!event.shiftKey || event.keyCode !== 13) return
  10.     // 阻止 事件冒泡
  11.     event.stopPropagation()
  12.     // 阻止该元素默认的 keyup 事件
  13.     event.preventDefault()
  14.     // ...
  15.   }
  16. }

插槽

你可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组：

  1. render: function (createElement) {
  2.   // `<div><slot></slot></div>`
  3.   return createElement('div', this.$slots.default)
  4. }

也可以通过 this.$scopedSlots 访问作用域插槽，每个作用域插槽都是一个返回若干 VNode 的函数：

  1. props: ['message'],
  2. render: function (createElement) {
  3.   // `<div><slot :text="message"></slot></div>`
  4.   return createElement('div', [
  5.     this.$scopedSlots.default({
  6.       text: this.message
  7.     })
  8.   ])
  9. }

如果要用渲染函数向子组件中传递作用域插槽，可以利用 VNode 数据对象中的 scopedSlots 字段：

  1. render: function (createElement) {
  2.   return createElement('div', [
  3.     createElement('child', {
  4.       // 在数据对象中传递 `scopedSlots`
  5.       // 格式为 { name: props => VNode | Array<VNode> }
  6.       scopedSlots: {
  7.         default: function (props) {
  8.           return createElement('span', props.text)
  9.         }
  10.       }
  11.     })
  12.   ])
  13. }