Vue純零基礎教學次日--到走入Vue項目實際開發的心裏深處

時間 2019-12-08

標籤 vue 零基礎教學次日走入項目實際開發心裏深處简体版

原文原文鏈接

前情提要：好了咱們不廢話直接開幹繼續講解，最近一直要學習學習，因此不能貪玩了，因此天天更新學習學習。英語加上別的html

今天是咱們Vue的次日，咱們繼續講解語法

今天講 vue 語法和 vue 網絡請求和填坑

vue的網絡請求 ：接口文檔 數據 服務器 
我會告訴你們：接口快速建立，接口規則  和 postman 接口測試工具
快速生成接口 JSON-server 託管成 web 服務器 是根據 RESTful 接口規則來的
複製代碼

表格案例坑時間問題 * 過濾器 *

表格案例：日期格式處理，日期沒有通過格式處理直接渲染到視圖中，日期處理後渲染到視圖中- vue 提供了功能過濾器vue

vue容許咱們自定義過濾器，常見的文本格式，過濾器使用在雙花括號和 v-bind 的使用過濾器添加在js 表達式的尾部，（由管道符號指示）node

過濾器兩類一個是局部一個是全局過濾器是在vue 實例以前定義他是寫在 new vue 以前ios

局部過濾器

全局過濾器

過濾器是用來處理表格的文本格式昨天的表格代碼增長了 filter 與 moment 與moment 的使用es6

moment 的使用

使用過濾器後的時間對象

使用注意：注意日期裏面data 要使用 new Date() 而後在return的時候moment（v）要傳參

ref 操做Dom 當vue 中沒有咱們須要的指令

我上面寫的兩種方法都是實如今mounted中的 this.refs 在標籤中的是refweb

計算屬性

computed: {
      // 前面是Key  後面的  值
      //   計算屬性跟data 的方法是同樣的，可是要有返回值
      //   計算屬性依賴於data 的數據
      //   本質 計算屬性其實就是一個屬性用法和data中的屬性同樣，但計算屬性的是一個方法
      reverMes: function() {
        return this.message
          .split("")
          .reverse()
          .join("");
      }
    }
複製代碼

計算屬性要寫在 computed 裏面是帶有 return 返回值的函數這裏在計算屬性中使用的com(){} 的是es6的方法npm

之後要記住在使用複雜的data的狀況下能夠考慮計算屬性

計算屬性和方法的區別
  一、使用方法是經過() 計算屬性和data中的屬性用法同樣
    二、重要區別：方法每調用一次就執行一次，
   二、計算屬性若是計算屬性沒有依賴data中的屬性，當第一次使用計算屬性的時，會把return
  的結果放在緩存中在使用這個計算屬性時，會去緩存中找到這個結果
複製代碼

接口服務器搭建使用JSON-Server

讓咱們來搭建一個json-server 來接收數據能夠快速把一個json 文件託管成一個web 服務器提供接口特色基於 Express 支持Cors 和jsonp 跨域請求支持 GET POST 等方法json

使用：一、安裝 JSON-Serveraxios

二、npm i -g json-server 這裏使用的-g是全局安裝跨域

三、啓動接口服務器在文件夾下載使用 json-server --watch db.json 啓動四、沒時間上傳gethub 上面因此須要須要json 文件的本身百度找個或者留言找我要哈

截圖第一步vscode 裏面全局安裝

第二步走在存放當前文件夾裏面建立一個名爲server的文件夾存放json 文件

第三步咱們賦值連接 localhost 讓在瀏覽器裏面打開看到一個笑臉存放的json 文件

接口介紹
    查 GET 
    增 POSt
    刪 DELETE
    改 PUT
複製代碼

讓咱們使用 Axios 進行使用數據

如何在vue 的項目中發送網絡請求 axios 
 在2.0之後使用通用的 axios 是一個庫 不支持 JSONP 請求，若是遇到JSONP 請求，可使用插件 jsonp 實現
 
 使用方法：
一、npm install axios  記得安裝 我已經安裝過了 
二、cdn 引入 大家本身去 官網找
複製代碼

這裏記住由於咱們是本身建立的 html 文件夾裏面須要引入 axios，經過npm 下載的在咱們 node文件夾下

<script src="./node_modules/axios/dist/axios.js"></script>
複製代碼

讓咱們使用 get 獲取到一個數據

get 請求
      axios
        .get("http://localhost:3000/brands")
        .then(result => {
          console.log(result);
        })
        .catch(err => {});
複製代碼

讓咱們使用 post 添加到一個數據

post 請求 上傳成功返回狀態碼 201 而後須要給上傳的d
      axios
        .post("http://localhost:3000/brands", {
          name: "xxxx",
          data: new Date()
        })
        .then(result => {
          if (result.status === 201) {
            console.log(result);
          }
        })
        .catch(err => {});
複製代碼

讓咱們使用 delete 添加到一個數據

刪除
      axios
        .delete("http://localhost:3000/brands/24")
        .then(result => {
          if (result === 200) {
            console.log(result + "刪除成功");
          }
        })
        .catch(err => {});
複製代碼

使用計算屬性進行搜索

全局使用自定義指令是光標 focus

// 全局自定義指令
      // 一、在new Vue定義自定義指令
      // 二、在自定義指令方法操做DOM 獲取焦點
      //   三、使用自定義指令

      //   directive('自定義指令的名字',{inserted:function(v){操做DOM的代碼}})

      //   這裏進行解釋 Vue的實例全局，進行 directive指令 而後在 inserted 插入 函數方法
      //   注意directive 全局的都不帶 s
複製代碼

表格案例動態獲取數據

// 在頁面加載完後 獲取數據
        // mounted很像咱們以前瞭解到的 window.onLoad
        mounted() {
          // 加載數據的方法
          axios
            .get("http://localhost:3000/brands")
            .then(result => {
              this.items = result.data;
            })
            .catch(err => {});
        },
        methods: {
          del(index) {
            this.items.splice(index, 1);
          }
        }

        // 使用axios 請求數據
        // 網絡請求是方法 寫在 mounted 我以前是否是寫過 全部的插件 都要放在mounted 聲明鉤子裏面
        //  這時候記得須要在 script 頭部引入 axios
複製代碼

表格數據添加與經過 axios 進行渲染添加刪除

// 這裏面是 加載 數據 從 localhost 裏面 獲取到 進行在頁面渲染的要在 mounted 裏面完成
        mounted() {
          axios
            // 使用 axios 使用get 方法獲取數據
            .get("http://localhost:3000/brands")
            // 這裏使用 .then 而後 獲取 result 結果 把
            .then(result => {
              //  把 獲取結果的數據 賦值給 this.items  這個 項目
              this.items = result.data;
            })
            // 而後 catch 抓住問題
            .catch(err => {});
        },

     methods: {
      del(index) {
        this.items.splice(index, 1);
      },

      addItem() {
        // this.item.unshift({
        //   name: this.name,
        //   date: new Date()
        // });
        // 添加上傳對象 咱們要告訴他裏面上傳的是什麼 對象
        axios
          .post("http://localhost:3000/brands", {
            name: this.name,
            date: new Date()
          })
          .then(result => {
            console.log(result);
            // 添加成功刷新視圖
            this.loadate();
          })
          .catch(err => {});
        this.name = "";
      }
    }

<!--刪除案例 裏面傳的 idNum 是上面的 index 值-->
 del(idNum) {
        axios
          .delete("http://localhost:3000/brands/" + idNum)
          .then(result => {
            //   刪除成功加載頁面
            this.loadate();
          })
          .catch(err => {});
    }
複製代碼

npm 的使用

npm 
    npm 和 cnpm  能夠改  npm config set regsier 淘寶鏡像
    npm -v 查看當前 npm版本
    升級npm  安裝 npm i -g npm 
    npm 會把錯誤放在緩存 -> 清除緩存
        npm cache clean --force
    全局包:npm i -g  axios 這裏 記住 -g是全局 安裝
    npm root 能夠找到安裝的 全局包所在位子 
    npm i axios @版本號
複製代碼