我們呢，在第一篇筆記中也提到過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: {}, // 模組化 });