学习vue2.0
Posted 欢乐之家
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习vue2.0相关的知识，希望对你有一定的参考价值。
学习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、编译作用域：
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：
除非子组件模板包含至少一个 <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、全局指令：
也可以注册局部指令，组件中接受一个 directives 的选项：
以上是关于学习vue2.0的主要内容，如果未能解决你的问题，请参考以下文章