Vue.js(2)

Vue的小知识点杂记

1.v-bind 动态绑定dom元素的属性

2.v-on（@）绑定事件监听器

3.v-model 数据双向绑定

4.计算属性 Computed

对于任何复杂逻辑，你都应当使用计算属性。简而言之,Computed计算属性就是一个getter器，把原始数据进行封装一遍。例如文章过滤

//通过计算属性过滤数据
            computed: {
                listSearch: function () {
                    //为什么要存这个this呢，因为filter过滤器会改变this的指向
                    let that = this;
                    return this.list.filter(function (item) {
                        //简单的 判断文章name是否包含 input中的值，因为双向绑定，所以也就是 task.name
                        return item.name.indexOf(that.$data.task.name) >= 0;
                    });
                }
            }

 <li v-for='item in listSearch' class="post-list-item">
      <span class="post-list-date">({{item.date}})</span>
  </li>

5.在Vue的生命周期中主要记一下Created和mounted，created创建完成，el还没有挂载，dom还没有生成，数据data已经初始化。mounted挂载完成，页面渲染完毕，el挂载，数据data初始化。

6..Vuex就是一个全局状态管理器，可以理解为一个第三方的容器，我们把数据存进去，需要的时候去取出来使用。

Vuex一共有五种属性，State，Getter，Mutation，Acton，Module

State可以理解为数据源存放地。

Getter可以对State进行计算属性

Moutation和Action类似，不同在于 Action提交的是mutation，而不是直接变更状态。action可以包含任意异步操作

举个例子，使用Vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  // 初始化的数据
  state: {
    formDatas: null//定义一个变量 formDatas
  },
  // 改变state里面的值得方法
  mutations: {
    getFormData(state, data) {
      state.formDatas = data;
    }
  }
});
// 输出模块
export default store;

// 读取store里面的值，这里是重点
this.$store.state.formDatas;

mounted() {
    // 将数据提交到 store
    this.$store.commit('getFormData', this.form)
  }

以上通过提交mutation直接更改状态。偷懒的话可能直接去改state里面的值。尽量的话写的规范一些通过提交完成修改值。