vue基础知识

　　我们呢，在第一篇笔记中也提到过vue的一个基础，今天的呢也就接着来 

　　首先就是vue，我们需要知道他是怎么个运行，就是有以下这小三点 ：

1. Node.js是我们的运行环境
2. Vue cli  创建vue项目的脚手架
3. Git代码版本管理工具

　　　　当然，node 版本管理工具 n是mac 的node版本管理工具，  而nvm是 windows版本系列的

 

 

　　那么，为什么我们需要使用node包管理工具？精简来说，就是在公司里面去工作，会有很多的新老项目，老项目的话就可能会用到低版本的node.js这个时候node版本管理工具去切换node版本，需要使用node管理工具的时候，我们就下载一个nvm就可以。

　　至此，我们继续往下进行：

　　　　vue中的一般有

　　　　　　　　data---存放数据的地方，computed----计算属性，

　　　　　　　　methods---定义方法，components---引入组件，

　　　　　　　　watch---监听数据

 

watch监听：

　　　　　　watch监听到对象的变化，但是在对对象或数组做变更操作时，删除或添加属性，监听函数中的新值和旧值都指向了同一个对象或数组，并且Vue不会保留变更之前的副本。这种情况下我们怎么拿到旧值呢？还是有办法的，我们可以再设置一个计算属性，保存betNew为副本，然后监听这个副本的变化

<script>

export default {

  data() {

    return {

      // 为了测试监听一个对象

      dataObj: {

        num3: 20,

        name: "潇潇11111"

      }

    };

  },

  // 监听数量的变化

　// 监听一个基本数据类型，和立即监听，立即监听的时候，旧值是undefined，新值就是当前值计算属性，实时计算依赖值的计算结果，不能和data(){return{}}里面有重名的属性名，不然的话，会取值data里面的属性的值。

  watch: {

    // 实时监听

    // num(newValue, oldValue) {

    //   console.log(newValue, oldValue);

    // }

    num: {

      handler(newValue, oldValue) {

        console.log(newValue, oldValue);

      },

      immediate: true

    },

    // 监听该对象 监听对象中的某一个属性1

    // newObjData: {

    //   handler(newValue, oldValue) {

    //     console.log(newValue, oldValue);

    //   },

    //   immediate: true,

    //   deep: true

    // }

    // 监听对象 监听对象中的某一个属性2

    "dataObj.num3": {

      handler(newValue, oldValue) {

        console.log(newValue, oldValue);

      },

      immediate: true,

      deep: true

    }

  },

  name: "HomeView",

  components: {}

};

</script>

 

 

 

 

 

 

 

 

　　　　vue中的事件:vue中，同时绑定两个方法，用分号隔开　　　　

　　

 

　　　　　既然有了页面，我们就需要有一个路由守卫的功能，一共可以有两种方式： 

　　　　　　1.全局路由守卫

　　　　　　　　

 

 

　　　　　　2.独享路由守卫

　　　　　　　　

 

 

vuex状态管理：

　　　在store.js中，可以有以下操作

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({

  state: {  // 定义数据

    fruitList: [

      { id: 1, name: "西瓜" },

      { id: 2, name: "荔枝" },

      { id: 3, name: "葡萄" },

      { id: 4, name: "香蕉" },

      { id: 5, name: "橘子" },

    ],

  },

  getters: {},  // 不经常使用

  mutations: {  // 定义方法   支持同步提交

    // 增加一个方法添加水果

    addFruits(state, val) {

      state.fruitList.push(val);

    },

  },

  actions: {   // 提交方法    支持异步提交

    // addFruitsAction({ commit }, val) {

    //   commit("addFruits", val);

    // },

    // 异步提交

    addFruitsAction({ commit }, val) {

      return new Promise((resolve, reject) => {

        setTimeout(() => {

          resolve(200);

        }, 3000);

      });

    },

  },

  modules: {}, // 模块化

});