Vue学习记录（二）

Vue学习记录（二）

组件

1.组件介绍：

组件(Component)可以扩展HTML元素，封装可重用的代码。所有的Vue组件同时也都是Vue的实例，所以可接受相同的选项对象(除了一些根级特有的选项)并提供相同的生命周期钩子。

2.组件使用：

(1) 全局注册：

1) 创建一个Vue实例：

new Vue({
  el: '#example'
})

2) 注册一个全局组件：

Vue.component('my-component', {
  template: '<div>Hello World!</div>'
})

3) 注册后的组件，便可作为自定义元素在一个实例的模板中使用(注意确保在初始化根实例之前注册组件)：

<div id="example">
  <my-component></my-component>
</div>

以上三步效果即相当于：

<div id="example">
  <div>Hello World!</div>
</div>

(2) 局部注册: 通过某个Vue实例/组件的实例选项components注册仅在其作用域中可用的组件，这种封装也适用于其它可注册的Vue功能，比如指令：

var Child = {
  template: '<div>Hello World!</div>'
}
new Vue({
  components: {
    'my-component': Child
  }
})

(3) DOM 模板解析注意事项：
Vue只有在浏览器解析、规范化模板之后才能获取其内容。像<ul>、<ol>、<table>、<select>这样的元素里允许包含的元素有一定的限制，而另一些像<option>这样的元素只能出现在某些特定元素的内部，这样的情况下自定义组件会导致错误的渲染效果，一般的解决方法是使用is特性，比如：

<table>
  <tr is="my-row"></tr>
</table>

注意，如果使用来自以下来源之一的字符串模板，则没有此限制：

1) <script type="text/x-template">
2) JavaScript 内联模板字符串
3) .vue 组件
综上，应尽可能使用字符串模板。

(4) data 必须是函数：

<div id="example">
  <my-component></my-component>
</div>
var data = { count: 0 }
Vue.component('my-component', {
  template: '<button v-on:click="count+= 1">{{ count}}</button>',
  data: function () {
    return data
  }
})

(5) 组件组合：
通过一个良好定义的接口来尽可能将父子组件解耦是很重要的，这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。

3.过滤器：
Vue.js允许自定义过滤器，用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在JavaScript 表达式的尾部，由“管道”符号指示，例如：

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="divId | capitalize "></div>
<!-- 在一个组件的选项中定义本地的过滤器 -->
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}