学习vue2.0总结:
一、基础
1、局部组件与全局组件:
全局组件:Vue.compotent(组件名,options),参考网址:http://www.cnblogs.com/yesyes/p/6658611.html
局部组件:export default {compotents: {组件名[:组件实例]}}
2、一个组件被某一组件引用多次???
3、props:
props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解
props 会在组件实例创建之前进行校验,所以在 default
或 validator
函数里,诸如 data
、computed
或 methods
等实例属性还无法使用。
非prop属性的概念与‘替换/覆盖的概念’
4、自定义事件:$emit(事件,参数)与$on(事件,回调)
不能用 $on
侦听子组件抛出的事件,而必须在模板里直接用 v-on
绑定
5、事件修饰符:
(1)、绑定原生事件:.native
(2)、双向数据绑定:.sync。在vue1.0中是双向数据绑定,而在vue2.0中他是一个语法糖,如下:
<comp :foo.sync="bar"></comp> ==渲染为==> <comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo
的值时,它需要显式地触发一个更新事件:this.$emit(‘update:foo‘, newValue)
6、自定义表单组件是v-model的用法:理解v-model语法糖
7、非父子组件之间的通信:有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线
8、编译作用域:
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法:
<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>
9、slot内容分发
除非子组件模板包含至少一个 <slot>
插口,否则父组件的内容将会被丢弃。
当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。
最初在 <slot>
标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
<slot>
元素可以用一个特殊的属性 name
来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot
特性的元素。
仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot,这些找不到匹配的内容片段将被抛弃。
(1)作用域插槽?????
10、动态组件与keep-alive
11、在v-for中使用ref?????
12、内联模板:
如果子组件有 inline-template
特性,组件将把它的内容当作它的模板,而不是把它当作分发内容。这让模板更灵活。
二、响应更新
1、Object.assign()
或 _.extend
2、虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback)
。这样回调函数在 DOM 更新完成后就会调用。
this.nextTick(function () {}),这类似于一个生命周期钩子,当更新dom后才调用
三、自定义指令:
1、全局指令:
// 注册一个全局自定义指令 v-focus
Vue.directive(‘focus‘, {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
2、局部指令:
也可以注册局部指令,组件中接受一个 directives
的选项:
directives: {
focus: {
// 指令的定义---
}
}
四、混合对象:
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
五、插件:
插件的定义与使用:
1、定义:定义时核心是插件的对象的install方法,第一个参数是Vue,可以定义一些
2、使用:Vue.use(插件)
六、api
1、name: 当在有 vue-devtools, 未命名组件将显示成 <AnonymousComponent>
, 这很没有语义。通过提供 name
选项,可以获得更有语义信息的组件树。