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') })