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
件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个
10
访问根实例
在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问
this.$root.baz()
11
访问父级组件实例
$parent
12
访问子组件实例或子元素
ref 特性为这个子组件赋予一个 ID 引用
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 组件之间的循环引用
{{ folder.name }}
还有一个
{{ child.name }}
组件引入：
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
或者
components: {
TreeFolderContents: () => import('./tree-folder-contents.vue')
}
16
内联模板 类似于标签
当 inline-template 这个特殊的特性出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容
These are compiled as the component's own template.
Not parent's transclusion content.
17 X-Templates
另一个定义模板的方式是在一个
Vue.component('hello-world', {
template: '#hello-world-template'
})
18 通过 v-once 创建低开销的静态组件
Vue.component('terms-of-service', {
template: `
Terms of Service
... a lot of static content ...
`
})
19 进入离开列表过渡
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
可以在属性中声明 JavaScript 钩子
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"
>
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()
}
}
}
指令钩子函数 用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) }}
或者
你可以在一个组件的选项中定义本地的过滤器：
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不在话下