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 给子组件下发数据,子组件通过事件给父组件发送消息。
image

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

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

1
2
3
4
5
6
7
8
<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

    1
    <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获取其他属性:

1
2
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 数据封装一些公共方法方便使用。

1
2
3
4
5
getters:{
doneTodos:function(state,getter){

}
}

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

1
store.getters.methodName

Mutation

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

对象风格的提交方式
1
2
3
4
store.commit({
type: 'increment',
amount: 10
})
mutation 必须是同步函数

Action

  1. Action 提交的是 mutation,而不是直接变更状态。
  2. Action 可以包含任意异步操作。
    Action 通过 store.dispatch 方法触发:
    1
    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 调用

1
2
3
4
5
6
7
8
9
10
11
export default {
methods: {
...mapMutations([
'increment',
'incrementBy'
]),
...mapMutations({
add:'increment' //将 this.add() 映射到 this.$store.commit('increment')
})
}
}

action 辅助函数 mapActions

网站