vue2 记录（高阶）

advance

1 component

字母全小写且必须包含一个连字符 
kebab-case (短横线分隔命名) 
Vue.component('my-component-name', { /* ... */ })

使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })

2  全局注册
Vue.component 来创建组件 即全局注册
Vue.component('my-component-name', {
  // ... 选项 ...
})

3  局部注册
可以通过一个普通的 JavaScript 对象来定义组件
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然后在 components 选项中定义你想要使用的组件
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

4 模块系统中局部注册
推荐创建一个 components 目录，并将每个组件放置在其各自的文件中
然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}
现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了

5  基础组件的自动化全局注册

6

非 Prop 的特性  [未走通]

7
自定义事件 
    事件名称 区分大小写，要完全匹配
    
    我们知道父组件是使用props传递数据给子组件，如果子组件要把数据传递回去，怎么办？ 
    那就是要自定义事件！使用v-on绑定自定义事件 每个Vue实例都实现了事件接口（Events interface）, 
    即 使用$on(eventName) 监听事件 $emit(eventName) 触发事件
    
8 slot
        1.1 单个插槽（单个插槽，别名默认插槽、匿名插槽，不用设置name属性）

        1.2 具名slot（插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置）

        1.3 作用域slot
        https://www.cnblogs.com/cisum/p/9618346.html    
9
  件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。
  
          <!-- 失活的组件将会被缓存！-->
        <keep-alive>
          <component v-bind:is="currentTabComponent"></component>
        </keep-alive>
        
10
访问根实例
在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问    
this.$root.baz()

11  
访问父级组件实例
$parent    

12 
访问子组件实例或子元素
        ref 特性为这个子组件赋予一个 ID 引用
        <base-input ref="usernameInput"></base-input>
        
        this.$refs.usernameInput
        
13  依赖注入  
        provide 选项允许我们指定我们想要提供给后代组件的数据/方法
        provide: function () {
          return {
            getMap: this.getMap
          }
        }
        然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性
        inject: ['getMap']
                
        实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，除了：

        祖先组件不需要知道哪些后代组件使用它提供的属性
        后代组件不需要知道被注入的属性来自哪里        

14 序列化侦听
        
        现在，你已经知道了 $emit 的用法，它可以被 v-on 侦听，但是 Vue 实例同时在其事件接口中提供了其它的方法。我们可以：

        通过 $on(eventName, eventHandler) 侦听一个事件
        通过 $once(eventName, eventHandler) 一次性侦听一个事件
        通过 $off(eventName, eventHandler) 停止侦听一个事件
        
        例 ：
            mounted: function () {
              this.attachDatepicker('startDateInput')
              this.attachDatepicker('endDateInput')
            },
            methods: {
              attachDatepicker: function (refName) {
                var picker = new Pikaday({
                  field: this.$refs[refName],
                  format: 'YYYY-MM-DD'
                })

                this.$once('hook:beforeDestroy', function () {
                  picker.destroy()
                })
              }
            }
        
15 组件之间的循环引用 

        <tree-folder> 组件，模板是这样的：

        <p>
          <span>{{ folder.name }}</span>
          <tree-folder-contents :children="folder.children"/>
        </p>        

        还有一个 <tree-folder-contents> 组件，模板是这样的：

        <ul>
          <li v-for="child in children">
            <tree-folder v-if="child.children" :folder="child"/>
            <span v-else>{{ child.name }}</span>
          </li>
        </ul>
        
        组件引入：
        beforeCreate: function () {
          this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
        }
        或者
        components: {
          TreeFolderContents: () => import('./tree-folder-contents.vue')
        }
16
内联模板  类似于<template>标签
当 inline-template 这个特殊的特性出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容
<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

17 X-Templates

另一个定义模板的方式是在一个 <script> 元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去    

            <script type="text/x-template" id="hello-world-template">
              <p>Hello hello hello</p>
            </script>

            Vue.component('hello-world', {
              template: '#hello-world-template'
            })
18 通过 v-once 创建低开销的静态组件
     
        Vue.component('terms-of-service', {
      template: `
        <div v-once>
          <h1>Terms of Service</h1>
          ... a lot of static content ...
        </div>
      `
    })
            
19 进入离开列表过渡
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js     

可以在属性中声明 JavaScript 钩子

        <transition
          v-on:before-enter="beforeEnter"
          v-on:enter="enter"
          v-on:after-enter="afterEnter"
          v-on:enter-cancelled="enterCancelled"

          v-on:before-leave="beforeLeave"
          v-on:leave="leave"
          v-on:after-leave="afterLeave"
          v-on:leave-cancelled="leaveCancelled"
        >
          <!-- ... -->
        </transition>
        
20 混入        
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
21  this.$options 可以拿到组件对象 

22 自定义指令    [*****]
https://cn.vuejs.org/v2/guide/custom-directive.html
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })
    
    
    注册局部指令，组件中也接受一个 directives 的选项：

    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }
    <input v-focus />
    
    指令钩子函数  用directive命令生成  
    如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

23 render 函数可以做JavaScript级别的页面渲染

24  渲染函数和    JSX 

25  使用插件    
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成 

    而在例如 CommonJS 的模块环境中，你应该始终显式地调用 Vue.use()
    // 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
    var Vue = require('vue')
    var VueRouter = require('vue-router')

    // 不要忘了调用此方法
    Vue.use(VueRouter)
26  开发插件     

27 过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化

双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示,例：
        <!-- 在双花括号中 -->
        {{ message | capitalize }}
        {{ message | filterA | filterB }}
        {{ message | filterA('arg1', arg2) }}

        <!-- 在 `v-bind` 中 -->
        <div v-bind:id="rawId | formatId"></div>
        
  或者
  你可以在一个组件的选项中定义本地的过滤器：

    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  或者在创建 Vue 实例之前全局定义过滤器：

    Vue.filter('capitalize', function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })

    new Vue({
      // ...
    })  
            
28        单文件组件
文件扩展名为 .vue 的 single-file components(单文件组件) 
为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

29 TypeScript  支持 

30 状态管理  vuex   达成子组件之间的通讯

如何引入Vuex?
下载vuex: npm install vuex --save
在main.js添加:  
             import Vuex from 'vuex'
            Vue.use( Vuex );

            const store = new Vuex.Store({
                //待添加
            })
            
            new Vue({
                el: '#app',
                store,
                render: h => h(App)
            })

state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。
可以把getters看成是store的计算属性
mutations： 那如何把数据存储到state中呢？
在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation,  
例如：this.$store.commit('change',10)  ，触发mutations中方法change 做改变。

　actions和mutations的区别
1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下