vue2-note

Vue特性

Vue组件系统：小型、自包含、可复用
跨组件数据流，自定义事件通信以及构建工具集成。

Vue对象

1.每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的
2.在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
所有的 Vue.js 组件其实都是被扩展的 Vue 实例。
3.不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父级上下文，所以 this不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义。
4.可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器：

var MyComponent = Vue.extend({
  // 扩展选项
});
// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent();

注：所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

组件

1.组件更适合担任 UI 重用与复合的基本单元,在vue中一个组件本质上是一个拥有预定义选项的一个 Vue 实例
2.指令（Directives）是带有 v 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
3.通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外，它必须是函数。

使用prop传递数据

在 Vue.js 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。
子组件要显式地用 props 选项声明它期待获得的数据：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

动态prop

在模板中，要动态地绑定父组件的数据到子模板的props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件：

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
  <!-- 上面一行可缩写成以下： -->
  <child :my-message="parentMsg"></child>
</div>

单向数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

v-on绑定自定义事件

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

解耦：
软件的所有问题都可以通过增加一层interface来解决。
解耦就是将存在的依赖去掉，比如类A的一个函数需要类B的一个函数返回值，那么A就是依赖B，那么B改动时A
很有可能功能受影响，那么不如在中间加另一个类C，使C成为A和B的桥梁，于是A对B的依赖就消失了
，B在改动时也不影响A，而想要影响时，改动C就行了，这就是解耦。
子组件已经和它外部完全解耦了。它所做的只是报告自己的内部事件，至于父组件是否关心则与它无关。

此处子组件只是通过调用vue中原生的事件接口$emit去向父组件去报告自己内部会触发的事件，至于
父组件接不接收、对此事件是否进行处理，子组件都无法得知。

4.组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。

缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

事件修饰符

<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

3种字符串模板

<script type="text/x-template">
JavaScript内联模版字符串
.vue组件

slot

使用场景：当父组件模板中使用子组件模板时，可以将父组件中的内容分发到子组件模板中对应的位置。
用法:
1.在子组件模板中声明<slot></slot>插口。(相当于先用标签占着组件中的某块位置)
2.在父组件模板中引用子组件(即自定义标签)时，可以在自定义标签内包含父组件的内容.然后这块内容就会在子组件的<slot></slot>的位置中出现，相当于把`覆盖了。
e.g:

<!-- <my-component>组件 -->
<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>
<!-- 父组件模板(模板内引用了<my-component>) -->
<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>
<!-- 渲染结果： -->
<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

单个slot的场景：
当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。
一开始存在于 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

Vue组件的三部分API：

Props 允许外部环境传递数据给组件
Events 允许从外部环境在组件内触发副作用
Slots 允许外部环境将额外的内容组合在组件中

模板如下：

<my-component
  :foo="baz"
  :bar="qux"
  @event-a="doThis"
  @event-b="doThat"
>
  <img slot="icon" src="...">
  <p slot="main-text">Hello!</p>
</my-component>