vue基础知识

标签：node vue name 监听 oldValue 基础知识 newValue

　　我们呢，在第一篇笔记中也提到过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: {}, // 模块化 });

 

　　　　　　　　

　　　　

 

 

 

 

标签：node,vue,name,监听,oldValue,基础知识,newValue
From： https://www.cnblogs.com/vvuessss/p/16973415.html