Vue.js学习

Vue.js

watch-immediate

如果组件的数据需要在 mount 中初始化，而且还需要使用 watch 监听，这时候可以直接使用 watch 的 immediate 属性，这会让你在组件的初始化的时候就执行一次。

父子组件的值的传输

这是父组件的代码

<template>
  <div class="hello">
    <input type="text" v-model="me" /> <say :me="me" v-on:we="www"></say>
    <!-- :me是给子组件传值，v-on是取子组件的值，使用的是监听子组件的事件,v-on不能使用缩写@，这里的v-on其实是vm.$on,这是实例方法，而template中的v-on是一个指令,注意这里的www不能和后面的wwww重名，而me可以和v-model的me重名，因为v-model的me是父组件的，而传给子组件的me是子组件的，而www都是父组件的 -->
    <div></div>
  </div>
</template>

import say from "@/components/say"; //引入子组件

export default {
  name: "hello",
  data() {
    return {
      me: "",
      wwww: ""
    };
  },
  components: { say }, //注册子组件
  methods: {
    //从子组件拿值，别忘了(val)，这是子组件的值
    www: function(val) {
      this.wwww = val;
    }
  }
};

这是子组件的代码

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

export default {
  props: ["me"], //从父组件拿值
  data() {
    return {
      we: ""
    };
  },
  watch: {
    //监听input的值的变化，一有变化就将值传给父组件，传值中别忘了this.we，这是将值连同事件一起传给父组件
    we: function(val, oldval) {
      this.$emit("we", this.we);
    }
  }
};

emit 是在子组件中定义的，父组件使用 v-on 来监听子组件 emit 的事件。

v 如果需要动态的传递数据，最好不要用 refs，因为它并不是响应的，引用官方文档的话：$refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

data

基本上在 template 中出现的所有 v-show,v-if,v-model,v-bind,v-on 等指令中的变量都需要在 data 中定义，建议一类一类定义，不要直接定义在 return 这个大类中，推荐一个 vue 插件：Vue.js devtools。这个插件可以实时的查看 vue 项目中所有的值，组件。

data 需要是函数但是对象的原因是：如果是对象的话，单个组件创建多次后，其 data 内部的属性会互相影响，因为是按引用传值的。通过函数返回数据对象，保证了每个组件实例都有一个唯一的数据副本，避免了组件间数据互相影响。

vue-route

使用 vue 的时候页面的 url 的相关信息可以通过$route 来获取，具体的请点这里

最近写的一些项目发现打包后跳转页面出现问题，直接跳转到了磁盘目录，比如如果项目放在 c 盘，就会直接跳转到了 c 盘，查看了一下跳转目录的写法，发现当时写的是/#/tasks/name 这类的，结果跳转的时候就会少了 index.html，但是在原来的项目中是不会出现这样的情况的。

vuex

最近稍微用了一下 vuex，刚开始自己用的也是很迷糊，在这里将一些疑惑记录下来。

但是不得不说，vuex 可以减少很多数据交互的步骤，特别是同胞组件的数据交互。

在定义 store 完，千万不要忘记在根组件中输出。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add: state => state.count++,
    del: function(state) {
      state.count = state.count - 1;
    }
  },
  actions: {
    add({ commit }) {
      commit("add");
      commit("del");
    }
  }
});

export default {
  store, // 千万不要忘了输出，不然子组件中没有store
  name: "hello"
};

最好用 action 来进行操作，将操作变化的数据传给指定的 mutations，然后让 mutations 来改变数据。因为 mutations 必须同步执行，而 action 不受约束，我们可以在 action 内部执行异步操作。

因为之前箭头函数用的不多，今天学习了一下，我感觉箭头函数适用于那些直接 return 的函数，对于这种需要对值进行操作的还是用普通的函数好用，因为我用state => state.count - 1的时候值并不会减 1。而且要注意箭头函数的 this 的指向。

当你使用模块的时候，要注意每个模块的 actions 和 mutitaions 都是在全局变量里的，state 是分模块的。所以如果要在子组件使用 actions 的时候，最好在模块定义 actions 的时候规划好命名，不要命名冲突，可以使用前缀后者后缀。当你要获取 vuex 中模块的 state 的时候，要在this.$store.state.模块名称.key，比如模块名称是 a，你要获取 a 中的 count，那么你就要写this.$store.state.a.count。

当使用 vuex 应用在表单中的时候，如果应用在 v-model 上时，要注意的一点是，因为要使用 computed 属性，所以不要在 data 中定义计算属性的变量。
如：

<input type="text" v-model="ww" />

data () {
  return {
    ww: ''    //注意这里不能写ww：''，不能再data里面注册
  }
},
computed: {
  ww () {
    return xxxxx    //因为计算属性中已经定义了ww，所以不能在data里面定义，不然就会冲突，data里面的ww会覆盖computed里面的ww，不管ww怎么变，页面只显示data里面ww的值
  }
}

Vue-cli3

如果要使用 public，那么需要使用绝对地址来引用资源，如/image/xx.png，注意这里的’/’其实就代表了’/public’，不是仅仅代表’/’, 不需要你手动添加’public’。

别的小问题

怎么再 router-link 上绑定 click 事件

@click.native=""在 click 后面加上.native就好

vue-router

在 nginx 配置的时候，如果域名路径更改，在 vue-router 中也需要更改。