vue 入门重点

vue 参数：

1. data
2. props 依赖父子通信
3. methods 方法
4. computed 计算，与methods 的区别，computed带有缓存功能
5. watch 监控data中的数据
6. directives 自定义指令

特殊变量

$set vm.$set 实例方法，它只是全局 Vue.set 的别名。

$event 在内联语句处理器中访问原始的 DOM 事件

事件修饰符

1. .stop
2. .prevent
3. .capture
4. .self
5. .once
   使用修饰符时，顺序很重要；相应的代码会以相同的顺序产生。因此，用@click.prevent.self 会阻止所有的点击，而@check.self.prevent只会阻止对元素自身的点击。

按键修饰符

keyup.enter 回车事件

定义全局自定义按键修饰别名
Vue.config.keyCodes.f1 = 112

组件组合

DOM 模版解析注意事项

把Vue实例挂载到一个已有内容的元素上，会受到 html 本身的一些限制，因为vue只有在浏览器解析、规范化模版之后才能获取其内容。尤其要注意 <ul> <ol> <table> <select> 这样的元素只能出现在某些特定元素的内部。
解决方法： 使用特殊的 is 特性。

字符串模版

1. <script type="text/x-template"></script>
2. JavaScript 内联模版字符串
3. .vue 组件

父子组件： 组件A在它的模版中使用了组件B，它们之间必然需要相互通信。父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事件告知父组件。
父子组件的关系可以总结为 prop向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

camelCase vs. kebab-case
HTML 特性是不区分大小写，所以当使用的不是字符串模版时，camelCase(驼峰式命名)的prop需要转换为相对应的 kebab-case(短横线分隔式命名)

动态Prop
使用 v-bind 来动态地将prop绑定到父组件的数据。每当父组件的数据变化时，该变化也会传给子组件：

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

--- 缩写方式
<child :my-message="parentMsg"></child>

Prop 验证
要指定验证规则，需要用对象的形式来定义 prop ，而不能用字符串数组。

自定义事件

使用v-on绑定自定义事件

1. 使用$on(eventName) 监听事件
2. 使用$emit(eventName) 触发事件
   父组件可以在使用子组件的地方直接使用v-on 来监听子组件触发的事件。

事件修饰符

1. 给组件绑定原生事件
   使用v-on的修饰符.native。

   <my-component v-on:click.native="doTheThing"></my-component>

2. .sync 修饰符
   .sync 对一个prop进行双向绑定。

指令中钩子函数

1. bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
2. inserted 被绑定元素插入父节点调用（仅保证父节点存在，但不一定已被插入文档）
3. update 所有组件的VNode更新时调用，但是可能发生其子VNode更新之前。指令的值可能发生了改变，也可能没有。
4. componentUpdated 指令所在组件的VNode及其子VNode全部更新后调用
5. unbind 只调用一次，指令与元素解绑时调用

vm对象

vm 是 vue 的一个实例。
vm获取其他属性：

el = vm.$el
data = vm.$data

状态管理（VUEX）

store中state的改变都放置在store自身的action中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。

主要参数

1. state 定义变量
2. getter 提供一些方法获取变量值
3. mutation 修改store 中的状态，并通过commit(‘method’)触发对象风格的提交方式 store.commit({type:”method”,amount:10}) 同步事务
4. action 处理异步操作，修改store中的状态，并通过commit(‘method’)
5. module
6. plugins

Getter

对vuex中 state 数据封装一些公共方法方便使用。

getters:{
    doneTodos:function(state,getter){
        
    }
}

Getter 也可以接受其他 getter 作为第二个参数
使用方法

store.getters.methodName

Mutation

更改vuex的store中的状态的唯一方法是提交 mutation 。 vuex 中的mutation非常类似于事件。每个 mutation 都有一个字符类型的事件类型（type）和一个回调函数（handler）。
回调函数就是我们实际进行状态更改的地方，并且它会接受一个 state 作为第一个参数。
向 store.commit 传入的额外的参数，即 mutation 的载荷（payload）

对象风格的提交方式

store.commit({
    type: 'increment',
    amount: 10
})

mutation 必须是同步函数

Action

1. Action 提交的是 mutation，而不是直接变更状态。
2. Action 可以包含任意异步操作。
   Action 通过 store.dispatch 方法触发：

   store.dispatch('increment')

组合Action

action 返回的 promises 是异步对象，使用 then 等待异步函数执行完成，并进行下一步操作。

Module

将 store 分割成模块（module）,每个模块拥有自己的 state mutation action getter 甚至是嵌套子模块–从上至下进行同样方式的分割。

对于模块中的局部方法，根节点状态会作为第三个参数暴露出来。

vuex 辅助函数

mapGetters

import {mapGetters} form ‘vuex’

getters 辅助函数 mapGetters
mapGetters辅助函数仅仅将store中的getters映射到局部 computed 属性。

mutation 辅助函数 mapMutations

mapMutations 辅助函数将组件中的methods映射为 store.commit 调用

export default {
    methods: {
        ...mapMutations([
            'increment',
            'incrementBy'
        ]),
        ...mapMutations({
            add:'increment' //将 this.add() 映射到 this.$store.commit('increment')
        })
    }
}

action 辅助函数 mapActions

网站

• ECMAScript 6 入门
• vue
• vuex
• vue-router
• axios
• axios 中文文档 翻译