geminate

Vue 学习笔记

2018/04/25

一. 组件基本结构

<template>
  <div>

  </div>
</template>

<script>
  import Login from '@/components/login/Login';

  export default {
    name: 'Test',  // 组件名称
    props: ['val'], // 组建对外提供的属性
    components: { // 组建内部引入的组件
      Login
    },
    data() { // 组件状态
      return {
        firstName: 'liu',
        lastName: 'huihao',
        age: 24
      }
    },
    computed: { // 计算属性
      name() {
        return this.firstName + this.lastName
      }
    },
    watch: { // 侦听器
      age(newVal, oldVal) {
        console.log(newVal + '/' + oldVal);
      }
    },
    methods: { // 组件方法
      clickEvent() {
        alert();
      }
    }
  }
</script>

<style lang="less">

</style>

二. 常用指令

v-model

实现表单数据的双向绑定。

<template>
  <div>
    <input v-model="inputText" type="text"/>
  </div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        inputText: ''
      }
    }
  }
</script>

绑定后，输入框内的值和inputText变量中的任意一个发生改变，另一个都会随之改变。

v-text、v-html、 {{}}

均用来实现数据的单向绑定。

<template>
  <div>
    <span></span>
    <span v-html="inputText"></span>
    <span v-text="inputText"></span>
  </div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        inputText: 'inputText<span>span</span>'
      }
    }
  }
</script>

区别在于， {{}} 和v-text会将html标签转为普通文本。

v-on

可简写为@，用于绑定事件。

<template>
  <div>
    <div @click="clickEvent">Click me</div>
  </div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {}
    },
    methods: {
      clickEvent(e) {
        console.log(e);
      }
    }
  }
</script>

注意：

  1. v-on 绑定事件时既可以不传入参数，如：@click=”clickEvent”，也可以传入参数，如：@click=”clickEvent(‘message’)”。不传参数时methods中可获取自动传入的event参数，传入自定义参数时如需event参数可通过特殊变量$event将其传入方法。

  2. 绑定时可以用相关修饰符，如@click.prevent=“clickEvent” 可阻止默认事件，.stop可阻止事件传播等。

  3. v-bind 可简写为：，用于绑定属性。

<template>
  <div>
    <div :class="{active: isActive}">Some message</div>
    <div :class="messageClass">Some message</div>
    <div :class="jsonClass">Some message</div>
    <div :class="[messageClass]">Some message</div>
  </div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        isActive: true,
        messageClass: 'active',
        jsonClass: {
          active: true
        }
      }
    }
  }
</script>

v-show

用来显示或隐藏元素，通过display实现。

v-for、v-if

列表渲染 和 条件渲染。

    <ul id="example-2">
      <li v-for="(item, index) in items">
         - 
      </li>
    </ul>

三. Vuex

store基本结构

const user = {
  state: {
    firstName: '',
    lastName: '',
    age: ''
  },
  // 类似与computed,返回经过计算的state
  getters: {
    name(state) {
      return state.firstName + state.lastName;
    }
  },
  // 修改state
  mutations: {
    SET_FIRSTNAME(state, {firstName}) {
      state.firstName = firstName;
    }
  },
  // 处理异步操作，异步完成后发出mutations修改state
  actions: {
    getFirstName({commit, state, getter}) {
      commit('SET_FIRSTNAME', {firstName: 'liu'});
      setTimeout(() => {
        commit('SET_FIRSTNAME', {firstName: 'wang'});
      }, 3000);
    }
  }
};

在组件中获取

获取vuex中的state：

通过在computed中添加mapState实现vuex中的state到组件计算属性的映射。映射时需要添加命名空间。

或使用 this.$store.state.xxxx

import {mapState} from 'vuex';

computed: {
 ...mapState({
    ageVuex: state => state.user.age
  }),
},

通过在computed中添加mapState实现vuex中的getter到组件计算属性的映射。默认getter无命名空间，给模块添加namespaced: true 可以使 getter具有命名空间。

或使用 this.$store.getters.xxxx

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
   ...mapGetters({
     nameVuex: 'name'
   }),
  }
}

通过在methods中添加mapMutations实现vuex中的mapMutations到组件方法的映射。默认Mutations无命名空间，给模块添加namespaced: true 可以使 Mutations具有命名空间。

或使用 this.$store.commit(‘xxx’)

import {mapMutations} from 'vuex';
methods: {
  ...mapMutations({
    clickEvent: 'SET_FIRSTNAME'
  })
}
}

注意，如果调用的Mutations包含参数，那么可以在调用methods的时候传入@click=”clickEvent({firstName:’liu’})”

通过在methods中添加mapActions实现vuex中的mapActions到组件方法的映射。默认Actions无命名空间，给模块添加namespaced: true 可以使 Actions具有命名空间。

或使用 this.$store.dispatch(‘xxx’)

import {mapActions} from 'vuex';

 methods: { // 组件方法
  ...mapActions({
    clickEvent: 'getFirstName'
  }),
}

注意，如果调用的Actions包含参数，那么可以在调用methods的时候传入@click=”clickEvent({firstName:’liu’})”

文章导航