03

• 補充一些指令
  • v-bind:class="數據" 對象 數組
  • v-bind:style="數據" 對象 數組[{},{}]
  • v-cloak 解決插值表達式閃爍的問題
  • v-once 只是一次渲染
• 過濾器
  • 做用：轉換文本格式
  • 全局過濾器 在vue實例化以前定義
  • Vue.filter('formatTime',(v)=>{//處理文本 return '結果' })
  • {{time|formatTime}}
  • 局部過濾器 在選項中使用
  • filters:{formatTime(v){//處理文本 return '結果'}}
  • {{time|formatTime}}
  • 注意：支持傳參 支持串聯使用
• 自定義指令
  • 在vue中操做dom方案：使用ref屬性，操做dom vm.$refs.ref的屬性值
  • 對於操做dom的業務封裝成指令
  • 全局自定義指令：Vue.directive('focus',{inserted(){//渲染後操做dom}})
  • 局部自定義指令：directives:{focus:{inserted(){//渲染後操做dom}}}
  • 使用：v-focus 屬性
• 計算屬性
  • 對於一些依賴於data數據的數據建議定義成計算屬性
  • 計算屬性：當前data屬性改變時計算屬性改變，會有數據緩存，當視圖更新時不會從新計算
  • 定義計算屬性：選項定義
  • computed:{newList(){ //依賴data屬性獲得新數據 返回數據 return 數據}}
• 案例
  • 列表展現
  • 添加
  • 刪除
  • 搜索
  • 沒有出數據處理
  • 自動獲取焦點

03-在vue中的髮網絡請求

• 準備接口服務器，不建議使用express搭建服務器，使用json-server工具提升接口服務。
• 發送ajax請求：
  • 使用原生XHR對象發請求 過於繁瑣
  • 使用jquery的ajax函數去發送請求 過於冗餘
  • vue-resource 是一個vue插件 中止維護 可是做者不推薦使用了。
  • 使用 在NODEJS中和在瀏覽器中均可以使用的網絡請求插件 axios

04-json-server基本使用

• 使用一個基於NODE的命令行工具 nodemon npm

• 安裝：npm i -g json-server 在任何目錄任何終端 powershell cmd

• 使用步驟：

  • 新建一個空目錄
  • 在目錄中 建立一個json文件 db.json
  • 在json文件中定義一個空對象
  • 在對象中對應鍵值對 brands:[]
  • 初始化數據 一個品牌對象

  • {
        "id": 1,
        "brandName": "奧迪",
        "createTime": "2020-10-10 10:10:10"
    }
    複製代碼

  • 啓動服務器在db.json目錄 json-server --watch db.json 其餘 -p 4000
  • 接口服務器特色：
    • 接口規則遵循 restful 規則
    • 支持cors(跨域解決方案) 支持jsonp(只能發get請求)

  cors:一個跨域解決方案，原理：在響應頭中加入 'Access-Control-Allow-Origin','*'

  服務端代碼： const express = require('express') const app = express() app.listen(4000, () => console.log('server ok')) // 接口 響應 ok 字符 // 使用一箇中間件 cors 包 npm i cors app.get('/', (req, res) => { //開啓跨域資源訪問的權限 res.setHeader('Access-Control-Allow-Origin','*') res.send('ok') })