vue基础学习笔记

指令（当表达式的值改变后相应的dom元素也会改变）：

- v-if （v-if/v-else/v-else-if）
- v-show 简单的切换css的display属性，始终在dom元素上
- v-for （可以遍历json及数组）
- v-on <=> @ :绑定事件（click/change）
- v-modal 双向绑定
- v-html 渲染html页面
- v-bind <=> : &nbsp; 也可以绑定html标签的属性（id/disabled）

props传值
父子组件间的传值，在父组件中定义props,在子组件中v-bind绑定props名字即可：

Vue.component('todo-item', {
  // todo-item 组件现在接受一个 "prop"，
  // 类似于一个自定义属性。
  // 此 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

<todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
</todo-item>

计算属性
计算的属性依赖于绑定的data的更新：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

这段代码的计算属性reverseMessage依赖于message的变化。这种计算属性等同于调用methods里的reverseMessage()函数，但是==计算属性依赖于缓存==，不必反复执行函数。（如果希望有缓存，用methods代替）

v-bind:class 可以动态绑定class属性样式。class后可以跟数组及json格式。

1 2	<div v-bind:class="{ active: isActive }"></div> <div v-bind:class="[activeClass, errorClass]"></div>

事件修饰符（可以直接跟在事件后,可以串联）:

-  .prevent ---提交事件不再重载页面
-  .stop ---阻止单击事件冒泡
-  .once ---点击事件将只会触发一次

vue学习笔记-vuex+axios

首先安装环境

1	npm install --save vuex vue-axios axios

vuex-state：

-  mapState:当一个组件需要获取多个状态时候,使用 mapState 辅助函数帮助我们生成计算属性
-  ...mapState:对象展开运算符，将此对象展开，以便可以将对象整个全部传给computed

vuex-getter:
有时需要在store中的state中派生出来一些其他的状态（多个组件需要用到的属性），比如筛选出列表中已完成的

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Getters 会暴露为 store.getters 对象

1	store.getters.doneTodos

mapGetters：将store中的getter映射到局部计算属性
…mapGetters:展开运算符

Mutations：
更改store中的状态，它会接受 state 作为第一个参数
（必须是同步函数）

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

调用方法：store.commit(‘increment’)，store.commit 传入额外的参数，即载荷payload:

1
2
3

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

或者对象风格的提交方式：

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

mutation.js文件：使用常量替代 Mutation 事件类型（多人协作的大型项目中）

// mutation-types.js
1.export const SOME_MUTATION = 'SOME_MUTATION'
2.import { SOME_MUTATION } from './mutation-types'
3.mutations: {
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }

action:提交的是 mutation，而不是直接变更状态;
Action 可以包含任意异步操作，功能与mutation类似。

actions: {
    increment (context) {
      context.commit('increment')
    }
  }

等价于

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

通过dispatch分发：

1	store.dispatch('increment')

…mapActions:辅助函数。
Modules：允许把store模块化

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a // -> moduleA 的状态