vue基础知识

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

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

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

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

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

　　　　vue中的一般有

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

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

　　　　　　　　watch---监听数据

watch监听：

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

　　　　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: {}, // 模块化

});