你不知道的vue

在使用class对象语法时使用计算属性返回对象好点

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
// 在数组中也可以使用对象语法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

v-for 时可以遍历对象

// object: {
//   title: 'How to do lists in Vue',
//   author: 'Jane Doe',
//   publishedAt: '2016-04-10'
// }
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}  
</div>
/** 
 * 在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
 */

数组更新检测

• vue内部重构了数组的方法 每次使用这些方法都会更新视图 push()，pop()，shift()，unshift()，splice()，sort()，reverse()
• 替换数组 例：filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组。 （你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。）

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

可以使用计算属性和方法当做循环的list

// 计算属性
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

// 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

你所不知道的事件修饰符 ()

• 常用的修饰符有 (.stop, .prevent, .capture, .self, .once, .passive)

  <!-- 常用修饰符 -->
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>


<!-- 你所不知道的修饰符 -->
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。 因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.   self.prevent 只会阻止对元素自身的点击。


<!-- 点击事件将只会触发一次 -->
// once 修饰符还能被用到自定义的组件事件
<a v-on:click.once="doThis"></a>

// Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
这个 .passive 修饰符尤其能够提升移动端的性能。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

vue的组件通讯 （共8种）

• 通过 props 传递
• 通过 $emit 触发自定义事件
• 使用 ref
• EventBus
• root
• Vuex
• attrs 与 listeners
• Provide 与 Inject

上面6种是常用的就不细讲

 <!-- attrs 与 listeners -->
适用场景：祖先传递数据给子孙
设置批量向下传属性$attrs和 $listeners
包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
可以通过 v-bind="$attrs" 传⼊内部组件

 <!-- child：并未在props中声明foo -->
<p>{{$attrs.foo}}</p>

 <!-- parent -->
<HelloWorld foo="foo"/>


 <!-- 给Grandson隔代传值，communication/index.vue -->
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>

 <!-- Child2做展开 -->
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>

 <!-- Grandson使⽤ -->
<div @click="$emit('some-event', 'msg from grandson')">
{{msg}}
</div>

// provide 与 injects
// 1 provide 与 injects 两个必须成对出现
// 2 provide 定义在根组件或者父组件中，子组件通过injects可以在子组件或者孙组件中接收这个值
// 3 主要使用在孙组件中使之可以跨级访问不用写太多props
// 父或者根
provide(){
    return {
        foo:'foo'
    }
}
// 孙或者子
inject:['foo'] // 获取到祖先组件传递过来的值