测试开发架构师

路由：Vue-Router-1一、动态路由1.1、动态路由方式一：路径动态路由示例：如下图在mine后面加:name/:sex来传递动态路由，?后面的不影响路径导向获取路径上面的动态参数：可以通过路由或路由器来获取，下面我们来通过示例来打印下路由通过this.route，路由器通过this.$router，我们一般使用路由来获取数据通过路由对象获取的路径参数1.2、动态路由方式二：属性通过props拿到动态参数把props改成true，就可以通过路径或者pro

路由：Vue-Router一、概念Vue Router是Vue.js官方的路由管理器，他和Vue.js的核心深度集成，让构建单页面应用变得更加轻松二、示例2.1、基本使用直接在示例中来了解路由的使用吧创建一个新的工程vue create xx，会有一个Router选项，如果选择了，就会自动化方式集成到项目中了，为了学习，我们不选择，手动集成进来进入工程目录，安装路由：npm i vue-router --save启动工程：vue run serve配置路由：

todolist项目改造数据持久化，我们网络还没有学，这里使用本地持久化持久化，就是对数据的保持，数据都在App.vue里面，我们统一在这里，一般是封装一些工具类一、本地持久化这里使用深度监视来进行本地持久化的处理一般工具类都放在一个文件中，如下图，这个工具类需要对数据进行读和存，定义好之后，在App.vue里面引入就可以使用了思考存的工具类存的动作是在所有的todos改变时都要触发，那就只要监视todos值值得改变就可以了而且这里必须要深度监视：这里监视的内容是数组，里面又

经典案例-todoList一、案例介绍todolist主要是实现添加日程，设置日程为完成，清除完成的日志等等本案例是一个非常经典的案例，会把之前学得的很多知识都可以深度的运用起来这里使用组件化的思想，如下图，框框 框起来的作为一个组件，划分组件最合适就好，并不是越多越好二、案例实现2.1、划分组件按上面红框，我们可以划分为几块组件：最上面的绿框我们定义为Header，中间的我们定义为List，下面的是Footer，中间List里面的一条记录我们定义为Item：2.2、

组件间传参-触发事件一、使用注意此方式只用于子组件向父组件发送消息（数据） 隔代组件或兄弟组件间通信不适合二、案例实现一个删除父组件中的标签：在父组件中添加子组件如下图：先在子组件中绑定一个事件，然后通过this.$emit在子组件点击了按钮是告诉父组件，然后后在父组件中通过@btnClick绑定一个事件，在事件中做事情，如下图下图中子组件传递参数是在this.$emit中传递的，如下面传递了一个对象点击按钮后，把p标签删除了，传递到父组件的数据也打印了：..

VUE组件中通信组件之间的通信有很多种通信方式，总的来说，主要掌握如下几种父子组件如何通信 亲兄弟组件如何通信，还有堂兄组件如何通信通信基本原则不要在子组件中直接修改父组件的状态数据 数据和处理数据的函数应该在同一模块内组件通信方式有很多种，这里介绍4中props：比较常用，就是比较麻烦，有局限性 自定义事件：也可以进行组件之间通信，有局限性，与props互补 消息订阅与发布：通知与订阅 vuex：中大型的项目中，状态、数据、信息同步前面三种就不足以解决问题，就出现了vuex，

vue其他常用指令一一、其他常用指令二、示例2.1、新建一个vue组件OtherInstruct，然后添加到vue中2.2、v-text从下面看，两种完全一样 区别：可以看出，v-text在p标签当中不能在加内容了，{{}}是拼接式的，v-text是覆盖式的。 2.3、v-html示例：前面{{}}和v-text只能是字符串，但是v-html就可以解析标签 可以看出是动态的注入元素：一般不建议使用v-html，有一点安全风险 2.4、v-pre作用：跳过这

列表渲染：数组、对象、过滤、排序遍历一、数组遍历1.1、实例使用v-for进行遍历，下面是persons的列表进行遍历，展示在列表中——这里是简单的展示1.2、绑定key为什么要绑定KEY呢？key是给每一个虚拟的节点一个唯一的id，更精准，更快的拿到oldvnode中对应的vnode节点，方便进行更新和删除等操作，有一个坏处就无法被复用 使用注意 有的人可能会说直接使用上面的index，但是是不能直接这样使用的，官网使用的列表里面的元素的编号作为key的： 不能使用in

条件渲染一、两种方式v-if/v-else/v-else-if； v-show 两种区别 d 二、示例

计算属性和侦听器一、回顾，前面我们已经学习了最常用的三种绑定数据的方式：双大括号表达式：{{}}——往标签中间注入数据 强制数据绑定：v-bind简写:——往标签里面的属性注入数据 绑定事件监听：v-on 简写 @——给标签添加监听事件二、计算属性和侦听器计算属性（computed）——一个属性需要计算得来，或者进行要计算作用 减少视图模板中的计算逻辑 进行数据缓存（多处使用一个计算属性，不要用多次计算，大数据量多次计算时，减少计算资源） 依赖固定的数据类型（相应式数据：计算公

class与style1.1、概念 在模板界面中，某些元素的样式是变化的，class/style用于动态绑定类和样式 class/style绑定技术就是专门用来处理动态样式效果的 样式类也是对对象和数组 style： 格式 :style="{backgroundColor:bgColor,fontSize:fSize}"，其中bgCorlor/fSize都是data属性 黄色框里面的样式就是通过参数传

Vue基础知识-模板语法一、双大括号{{}}向页面输出数据 内部㐀是变量、对象调用、表达式 一定要有具体的结果如下图，这里是固定写法，使用钩子函数data，return出去，然后在上面用{{}}进行引用，进行渲染，见下面示例：直接使用，也可以进行表达式<template> <div><!-- <h1>我是一个组件</h1>--> <h3>双括号表达式</h3> <div&

VUE基础知识一一、组件的定义与使用组件的组成可以分为三块模板页面 JS模块对象 样式 二、基本使用也是分三步：引入组件 映射成标签 使用组件标签下图中新建一个组件：然后进入到App.vue里面使用这个组件...

VUE项目工程目录介绍一、目录node_modules：相当于管家，管理第三方依赖，运行时需要，在上线和项目给到别人时，可以删除掉 public里面，favicon.ico是图标，index.html是入口 src：开发的工程目录都在src下面 main.js是我们整个工程的入口 App.vue是所有组件的汇集点 components组件文件夹，可以把很多组件放到里面，然后在App.vue里面汇总 assets：放静态资源，图片，css，js

安装vue-cli一、vue-cli是什么vue-cli是vue官方提供的脚手架工具，默认搭建好一个项目的基础架子，我们在其基础上进行相应的修改即可 下载模板地址：https//github.com/vuejs/vue-cli 或者全局安装vue-cli：npm install -g @vue/cli（建议全局安装，安装好后，在任何一个文件夹下面初始化项目都可以使用这个脚手架） 查看脚本是否安装成功...

一、查看全局模块路径使用npm config list查看npm的默认包安装路径二、修改全局路径用下面的命令修改npm包默认路径配置完成全局模块安装路径后，需要设置下环境变量，才可以使用全局模块安装路径在path新增前面添加的模块全局路径，双击下面的path一路确定就成功了...

零基础新手入门NPM包管理一、NPM介绍概述

安装VUE插件DevTool一、在chrome商店直接安装如果可以访问chrome商店，可以在商店搜索插件进行直接安装，但是，国内这个方法经常会访问不了chrome商店，请参考下面手动按照二、手动安装找到vue-devtools的github项目，并将其clone到本地：git clone https://github.com/vuejs/vue-devtools.git 安装项目所需要的npm包：npm install 编译项目文件：npm run build 添加至chrome浏览

一、vue零基础开篇我们今天就开始进入0基础的vue学习二、基本概念vue.js是目前国内最火的前端框架，国外的还是React最流程，vue语法也是可以用于进行手机app的开发的，需要借助于Weex vue.js是前端的主流框架之一，和Angular.js、React.js一起，并称为前端三大主流框架 vue.js是一套构建用户界面的框架，只关注视图层、他不仅易于上手，还便于与第三方库或已有项目整 英文网站：c网站：https://vuejs.org；中文网站：https://cn.vue

本人是一名从事测试10几年的老司机，现是一枚测开。接下来将给大家分享有关测开的技术栈。并且提供学习过程中的技术支持，有不懂的测开技术问题都可以向我提问，同时也提供免费的简历修改和润色。本课程大纲暂定如下，后续会根据用户的建议调整优先级：介绍互联网测试流程和测试技术理论Shell课程 python课程 接口自动化测试 web自动化测试 App自动化测试 自动遍历 兼容性测试 专项测试 性能测试 安全测试 Docker实战 Devops与持续交付 质量审计和监控平台 测