测试平台开发之前端实战练习

PPT

https://pdf.ceshiren.com/lg7/平台开发前端

源码链接

GitHub - ceshiren/HogwartsLG7: 霍格沃兹测试学院拉勾名企直推营第七期 https://ceshiren.com

课程内容

Vue最原始示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引用vue的环境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{mssage}}</p>
    </div>
</body>
<script>
    // 定义了一个常量,初始化了一个vue实例
    const v = new Vue({
        // 挂载,指定vue的作用范围
        el: "#app",
        // 设置数据
        data: {
            mssage: "你好"
        }
    });
</script>
</html>

router的使用

axios使用

  • http.js
  • api.js
  • xxxx.js (具体某个接口)

main.js的配置

import api from './api/api'
Vue.config.productionTip = false
// 将api挂载到vue原型上面
Vue.prototype.$api = api

组件使用

父子组件数据传递

  1. 定义子组件
  2. 在父组件调用子组件
  3. 在子组件定义”形参“,通过props
  4. 在父组件调用子组件的时候传参

可能的报错信息

vuetify组件在console报错"Vuetify Warning: Unable to locate target [data-app]" - #2,来自 _AD

作业

  • 完成用例的修改前端页面

课后调查表单