提交 cd3252f7 编写于 作者: W wizardforcel

2020-06-25 12:57:05

上级 8528d91a
......@@ -14,11 +14,11 @@
您一定在想我是怎么想到这个好主意的。 正如小兵曾经说过的,我当然会自言自语! 有时我需要专家的建议。 (好吧,明白了,别那样看着我!)继续…
## PPT的简要说明:
## PPT 的简要说明:
该视频首先向您展示演示的整体情况。 我们的大脑更喜欢视觉而不是文字。 因此,始终要畅所欲言,并在幻灯片上显示相关图像,而不是数百个单词,这始终是一个好习惯。
* *幻灯片 1*: 'WOW'。 用**爆炸**打开PPT! 首先要引起您对样式的“迷恋”。 可能是*现实生活中的事件,假想的场景,发人深省的报价或问题*
* *幻灯片 1*: 'WOW'。 用**爆炸**打开 PPT! 首先要引起您对样式的“迷恋”。 可能是*现实生活中的事件,假想的场景,发人深省的报价或问题*
* *幻灯片 2*: 面临的挑战。 简单介绍一下我们在没有自动化的情况下面临的挑战/问题。 允许客户**考虑**。 这也应该作为介绍的介绍。 例如,显示简单场景的图形。 对于每个发行版,测试用例数量都会增加(回归套件+发行用例),从而增加了总体开发成本。 这最终减少了产品的上市时间,这可能会对总收入/销售额造成重大打击。
......@@ -47,7 +47,7 @@
所有这些看起来都不酷吗? 如果是,那您还等什么呢? 成为哈利·波特! 添加您的魔力和创造力,进行自定义,使其更具表现力和令人印象深刻!
像我创建的PPT一样,想要复制它并根据您的要求进行编辑吗? 这是我的 [**prezi 链接**](https://prezi.com/t23nditffrdy/?utm_campaign=share&utm_medium=copy&rc=ex0share)。 我将其设置为“*公开且可重复使用*”。 复制副本之前,请先点击“赞”按钮,希望您喜欢这个免费赠品。🙂
像我创建的 PPT 一样,想要复制它并根据您的要求进行编辑吗? 这是我的 [**prezi 链接**](https://prezi.com/t23nditffrdy/?utm_campaign=share&utm_medium=copy&rc=ex0share)。 我将其设置为“*公开且可重复使用*”。 复制副本之前,请先点击“赞”按钮,希望您喜欢这个免费赠品。🙂
在评论部分让我知道您的想法和经验。 即将在我们即将推出的,期待已久的 WebDriver 系列中与您见面!
......@@ -56,7 +56,7 @@
单击“添加外部 JAR ...”按钮。 “JAR 选择”窗口将打开。 浏览至 seleniumhq.org 站点(Selenium 客户端和 WebDriver 语言绑定)中的文件的下载和提取位置。
确保选择所有类型为“可执行 Jar 文件”的文件。 目前,我在“`selenium-java-3.0.0-beta2`”文件夹中有一个文件,在`selenium-java-3.0.0-beta2\lib`文件夹中有16个文件。
确保选择所有类型为“可执行 Jar 文件”的文件。 目前,我在“`selenium-java-3.0.0-beta2`”文件夹中有一个文件,在`selenium-java-3.0.0-beta2\lib`文件夹中有 16 个文件。
点击“打开”,将它们添加到“用户库”窗口下创建的文件夹中。 点击“确定”,现在您将在“添加库”窗口中看到带有复选框的用户库。 确保选中此复选框,然后单击“完成”。 创建的用户库将在项目属性窗口的“库”选项卡中提供所有添加的外部 JAR。
......
......@@ -12,7 +12,7 @@
所有这些使自动化测试人员的工作更具挑战性! 绝对 XPath 可能会有所帮助,但是如果 DOM 中包含新元素或现有元素稍微移动了一点,那么脚本可能会失败,因为找不到该元素。 相对的 XPath 可能可以解决,但是即使那样,由于脚本变得复杂,整个过程也变得很困难。
处理此类情况的最简单便捷的方法是在HTML元素上引入`data-*`属性(自定义数据属性)。 这里唯一的问题是,您将需要成为开发人员的好书! 他/她是根据您的要求将这些属性添加到代码中的人。😉
处理此类情况的最简单便捷的方法是在 HTML 元素上引入`data-*`属性(自定义数据属性)。 这里唯一的问题是,您将需要成为开发人员的好书! 他/她是根据您的要求将这些属性添加到代码中的人。😉
现在让我对这些自定义数据属性进行学习,
......
# 1.使用 Vue.js 的 Hello World
# 1 使用 Vue.js 的 Hello World
> 原文: [https://javabeginnerstutorial.com/js/vue-js/1-hello-world-with-vue-js/](https://javabeginnerstutorial.com/js/vue-js/1-hello-world-with-vue-js/)
......@@ -14,7 +14,7 @@
### 选项 1:
```java
```js
<!-- development version -->
<script src="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/vue.js"></script>
<!-- production version -->
......@@ -25,7 +25,7 @@
Vue 也可用于 unpkg,
```java
```js
<script src="https://unpkg.com/[[email protected]](/cdn-cgi/l/email-protection)/dist/vue.js"></script>
```
......@@ -33,7 +33,7 @@ Vue 也可用于 unpkg,
但是,如果您不想提及该版本并使用最新版本,请继续,
```java
```js
<script src="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- or -->
......@@ -52,7 +52,7 @@ Vue 也可用于 unpkg,
使用以下代码创建一个 HTML 文件“`index.html`”,
```java
```js
<!DOCTYPE html>
<html>
<head>
......@@ -82,7 +82,7 @@ Chrome 浏览器中的当前输出如下,
我们已经使用`<script>`标签将 Vue.js 导入了我们的项目,但这并不能解决问题。 这相当于在我们的工作台上有一台笔记本电脑。 要打开它并完成一些工作,我们必须按下电源按钮。 同样,要在我们的项目中使用 Vue,我们必须使用`new`关键字创建 Vue 对象的实例。 这个实例是 Vue 的电源按钮!
```javascript
```jsscript
new Vue();
```
......@@ -92,7 +92,7 @@ new Vue();
**例如**:“`el`”,“`data`”,“`method`”等。
```javascript
```jsscript
new Vue({ options/config object });
```
......@@ -102,7 +102,7 @@ new Vue({ options/config object });
为了在 Vue 实例和 DOM 的一部分之间建立这种连接,以便可以根据我们的需要对其进行控制,我们有一个名为“`el`”的保留属性,该属性转换为*元素*。 此属性将字符串作为值指定为 CSS 选择器,即`id`的“`#`”和“`.`”对于`class`
```javascript
```jsscript
new Vue({ el: "#app" });
```
......@@ -112,7 +112,7 @@ new Vue({ el: "#app" });
为了存储我们要在此 Vue 实例及其链接的 DOM 中使用的所有数据/信息,我们还有一个保留的属性,称为“`data`”。 与“`el`”不同,“`data`”将对象作为其值。 由于我们要向 DOM 显示消息“`Hello World`”,因此让我们在“数据”对象中将其指定为键值对。
```javascript
```jsscript
new Vue({ el: "#app", data: { message: "Hello World" } });
```
......
# 2.模板语法和反应式的初探
# 2 模板语法和反应式的初探
> 原文: [https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/](https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/)
......@@ -8,7 +8,7 @@
来自“`index.html`”的摘录,
```java
```js
<div id="app">
<h1>{{ message }}</h1>
</div>
......@@ -18,7 +18,7 @@
以下是“`index.js`”文件中的代码,
```java
```js
var app = new Vue({
el: "#app",
data: {
......@@ -71,7 +71,7 @@ var app = new Vue({
另外,让我们将`index.js`文件中`message`属性的值更改为“`Vue`”,而不是“`Hello World !!!`”。 只是为了使这些句子更有意义。
```javascript
```jsscript
var app = new Vue({
el: "#app",
data: {
......
# 3\. Vue 指令简介
# 3 Vue 指令简介
> 原文: [https://javabeginnerstutorial.com/vue-js/3-vue-directives/](https://javabeginnerstutorial.com/vue-js/3-vue-directives/)
......@@ -30,7 +30,7 @@ Vue 带有一些内置指令。 请注意,我们可以编写自己的自定义
### `Index.html`
```java
```js
<html>
<head>
<title>Hello Vue!</title>
......@@ -50,7 +50,7 @@ Vue 带有一些内置指令。 请注意,我们可以编写自己的自定义
### `Index.js`
```java
```js
var app = new Vue({
el: "#app",
data: {
......
# 4\. Vue Devtools 设置
# 4 Vue Devtools 设置
> 原文: [https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/](https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/)
......
# 5.数据绑定第 1 部分(文本,原始 HTML,JavaScript 表达式)
# 5 数据绑定第 1 部分(文本,原始 HTML,JavaScript 表达式)
> 原文: [https://javabeginnerstutorial.com/vue-js/5-data-binding-p1/](https://javabeginnerstutorial.com/vue-js/5-data-binding-p1/)
......@@ -28,19 +28,19 @@
1. 可以始终在模板语法中访问“`message`”属性的值。 现在,我们可以对其应用任何可用的 JavaScript `String`方法。
```javascript
```jsscript
{{ message.length }}
```
2. js 允许访问模板表达式中的几个全局对象,即`Math``Date`。 小心,不允许访问用户定义的全局变量。
```javascript
```jsscript
{{ Math.PI }} {{ new Date() }}
```
3. 流控制语句(如`if-else``for``while``do-while`等)将不起作用,因此剩下的唯一选择是使用三元表达式。 始终建议将复杂的逻辑放入我们将在以后的文章中详细讨论的方法中。
```javascript
```jsscript
{{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }}
```
......@@ -84,7 +84,7 @@
### `Index.js`
```javascript
```jsscript
var app = new Vue({
el: "#app",
data: {
......
# 6.数据绑定第 2 部分(属性)
# 6 数据绑定第 2 部分(属性)
> 原文: [https://javabeginnerstutorial.com/vue-js/6-data-binding-p2/](https://javabeginnerstutorial.com/vue-js/6-data-binding-p2/)
......@@ -53,7 +53,7 @@
在 Vue 实例的数据对象中,让我们拥有`isInputDisabled`属性,并将其值设置为`true`
```javascript
```jsscript
isInputDisabled: true
```
......@@ -69,7 +69,7 @@ isInputDisabled: true
现在让我们将`isInputDisabled`的值更改为`false`
```javascript
```jsscript
isInputDisabled: false
```
......@@ -110,7 +110,7 @@ isInputDisabled: false
### `Index.js`
```javascript
```jsscript
var app = new Vue({
el: "#app",
data: {
......
# 7.条件渲染第 1 部分(`v-if`,`v-else`,`v-else-if`)
# 7 条件渲染第 1 部分(`v-if`,`v-else`,`v-else-if`)
> 原文: [https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/](https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/)
......@@ -22,7 +22,7 @@ Vue **指令**再来一次! 在这方面,我们有`v-if`,`v-else`和`v-els
让我们向 Vue 实例的数据对象添加`display`属性,并为其赋予`false`值。
```javascript
```jsscript
data: { message: "Hi", display: false }
```
......@@ -67,7 +67,7 @@ data: { message: "Hi", display: false }
让我们向数据对象添加`val`属性,并为其提供数值。
```javascript
```jsscript
data: { message: "Hi", val: 5 }
```
......
# 8.条件渲染第 2 部分(`v-if`和`v-show`)
# 8 条件渲染第 2 部分(`v-if`和`v-show`)
> 原文: [https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/](https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/)
......@@ -14,7 +14,7 @@
首先,将`display`属性添加到 Vue 实例的数据对象,并为其赋予`true`值。
```java
```js
data: {
display: true
}
......@@ -22,7 +22,7 @@ data: {
其次,对`index.html`文件进行以下更改,
```java
```js
<template v-if="display">
<h1>Welcome</h1>
<p>Hi there!</p>
......@@ -62,7 +62,7 @@ data: {
#### `Index.js`
```javascript
```jsscript
var app = new Vue({
el: "#app",
data: {
......
# 9.渲染列表第 1 部分(遍历数组)
# 9 渲染列表第 1 部分(遍历数组)
> 原文: [https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/](https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/)
......@@ -8,7 +8,7 @@
我们面临的最常见和最简单的方案是遍历数组的各项并将它们呈现为列表。 以下是四种不同语言的问候语,我们希望将其显示为网页的无序列表。
```java
```js
data: {
greetings: ["hi", "bonjour", "hola", "ciao"]
}
......@@ -16,7 +16,7 @@ data: {
在我们的`index.html`文件中,让我们将`v-for`指令添加到`<li>`元素中,以动态地呈现`greetings`数组的内容,如下所示:
```java
```js
<li v-for="greeting in greetings">{{ greeting }}</li>
......@@ -29,7 +29,7 @@ data: {
* 首先, `greeting` – 建议在我们的情况下使用单数名词,`greeting`,作为数组元素的**别名**反复进行。 这可以是您选择的任何名称,然后可以在我们的代码中使用该名称来寻址每个数组项。
* 其次,作为语法一部分的 – **定界符**`in`。 如果您具有 JavaScript 背景,那么所有这些看起来都应该很熟悉,因为在这里我们将`for in``for of`用于迭代目的。 即使使用 Vue,我们也可以使用`of`作为分隔符而不是`in`
```java
```js
<li v-for="greeting of greetings">{{ greeting }}</li>
```
......@@ -63,7 +63,7 @@ data: {
让我们转到控制台,使用`push`方法向`greetings`数组添加一个问候,然后查看视图是否进行了动态更新(*神奇地*!)。
```javascript
```jsscript
$vm0.greetings.push("namaste")
```
......@@ -118,7 +118,7 @@ $vm0.greetings.push("namaste")
### `Index.js`
```javascript
```jsscript
var app = new Vue({
el: "#app",
data: {
......
# 10.渲染列表第 2 部分(遍历对象)
# 10 渲染列表第 2 部分(遍历对象)
> 原文: [https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/](https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/)
......@@ -8,7 +8,7 @@
是时候向我们的 Vue 实例的`data`对象添加一个简单的对象了。
```java
```js
var app = new Vue({
el: "#app",
data: {
......@@ -28,7 +28,7 @@ var app = new Vue({
访问对象的值非常简单。
```java
```js
<div v-for="value in letters"> {{ value }} </div>
```
......@@ -76,7 +76,7 @@ var app = new Vue({
假设我们的数据对象中有两个简单对象的数组。
```javascript
```jsscript
movies: [
{ character: "Iron man", name: "Avengers" },
{ character: "groot", name: "Guardians of the Galaxy" }
......@@ -217,7 +217,7 @@ movies: [
**`index.js`**
```java
```js
var app = new Vue({
el: "#app",
data: {
......
# 11.监听 DOM 事件和事件修饰符
# 11 监听 DOM 事件和事件修饰符
> 原文: [https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/](https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/)
......@@ -6,7 +6,7 @@
#### `Index.html`
```java
```js
<!DOCTYPE html>
<html>
<head>
......@@ -28,7 +28,7 @@
#### `Index.js`
```java
```js
var app = new Vue({
el: "#app",
data: {
......@@ -50,7 +50,7 @@ var app = new Vue({
因此,我们现在的任务是监听按钮“Say Hello”上发生点击事件时,将消息文本从“`Hi`”更改为“`Hello`”。 一件事很清楚。 我们必须将`v-on`指令添加到将要监听`click`事件的`button`元素中。
```java
```js
<button v-on:click="message='Hello'">Say Hello</button>
```
......@@ -82,7 +82,7 @@ var app = new Vue({
#### `Index.js`
```javascript
```jsscript
var app = new Vue({
el: "#app",
data: {
......@@ -118,7 +118,7 @@ var app = new Vue({
#### `Index.js`(代码段)
```javascript
```jsscript
methods: {
addOne: function() {
this.counter += 1;
......@@ -223,7 +223,7 @@ v-on:click.self.prevent
index.js
```javascript
```jsscript
var app = new Vue({
el: "#app",
data: {
......
# 12.监听键盘和鼠标事件
# 12 监听键盘和鼠标事件
> 原文: [https://javabeginnerstutorial.com/vue-js/12-listening-to-keyboard-and-mouse-events/](https://javabeginnerstutorial.com/vue-js/12-listening-to-keyboard-and-mouse-events/)
......@@ -8,7 +8,7 @@
**`Index.html`**
```java
```js
<!DOCTYPE html>
<html>
<head>
......@@ -29,7 +29,7 @@
**`Index.js`**
```java
```js
new Vue({
el: "#app",
data: {
......@@ -49,7 +49,7 @@ new Vue({
**`Index.html`(代码段)**
```java
```js
<!-- Using key modifiers along with keyboard events -->
<button v-on:keyup.13="greet">greet</button>
```
......@@ -78,13 +78,13 @@ new Vue({
将以下行添加到“`index.js`”文件中以启用“`v-on:keyup.a`”,
```java
```js
Vue.config.keyCodes.a = 65;
```
**`Index.html`(代码段)**
```java
```js
<button v-on:keyup.a="greet">greet</button>
```
......@@ -100,7 +100,7 @@ Vue.config.keyCodes.a = 65;
**`Index.js`**
```java
```js
new Vue({
el: "#app",
data: {
......@@ -118,7 +118,7 @@ new Vue({
**`Index.html`(代码段)**
```java
```js
<button v-on:mouseover="showRole">Hover over me!</button>
{{ role }}
```
......@@ -146,7 +146,7 @@ new Vue({
**`Index.js`**
```javascript
```jsscript
new Vue({
el: "#app",
data: {
......@@ -193,7 +193,7 @@ new Vue({
**`Index.js`(代码段)**
```javascript
```jsscript
showRole(customRole, event) {
// 'this' keyword refers to the current Vue instance
this.role = customRole;
......@@ -234,7 +234,7 @@ showRole(customRole, event) {
**`Index.js`**
```javascript
```jsscript
new Vue({
el: "#app",
data: {
......
# 13.让我们使用简写
# 13 让我们使用简写
> 原文: [https://javabeginnerstutorial.com/vue-js/13-shorthands-for-v-bind-and-v-on/](https://javabeginnerstutorial.com/vue-js/13-shorthands-for-v-bind-and-v-on/)
......@@ -10,7 +10,7 @@
`Index.html`
```java
```js
<!DOCTYPE html>
<html>
<head>
......@@ -30,7 +30,7 @@
`Index.js`
```java
```js
new Vue({
el: "#app",
data: {
......@@ -47,7 +47,7 @@ new Vue({
*`Index.html`(代码段)*
```java
```js
<a v-bind:href="url" target="_blank">Google</a>
```
......@@ -55,7 +55,7 @@ new Vue({
*`Index.js`(代码段)*
```java
```js
data: {
url: "https://www.google.com"
}
......@@ -63,7 +63,7 @@ data: {
这段代码工作得很好。 单击链接“`Google`”,将打开一个新标签,并导航到 Google 页面。 但是我们想看起来很酷。 不是吗?因此,编写`v-bind`指令的简短方法是一次性删除`v-bind`一词,而仅使用**冒号**
```java
```js
<! Cool way of writing v-bind -->
<a :href="url" target="_blank">Google</a>
```
......@@ -88,7 +88,7 @@ data: {
*`Index.js`(代码段)*
```javascript
```jsscript
data: {
message: "Hi",
url: "https://www.google.com"
......@@ -137,7 +137,7 @@ methods: {
`Index.js`
```javascript
```jsscript
new Vue({
el: "#app",
data: {
......
# 14.使用`v-model`进行双向数据绑定
# 14 使用`v-model`进行双向数据绑定
> 原文: [https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/](https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/)
......@@ -32,13 +32,13 @@
通过将`v-model`指令添加到`<input>`标记并将“`message`”属性绑定到它,可以完成所有这三个步骤,
```java
```js
<input type="text" v-model="data_property_to_bind"></input>
```
**`Index.html`**
```java
```js
<!DOCTYPE html>
<html>
<head>
......@@ -64,7 +64,7 @@
**`Index.js`**
```java
```js
new Vue({
el: "#app",
data: {
......
# 15.表单输入绑定
# 15 表单输入绑定
> 原文: [https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/](https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/)
......@@ -19,7 +19,7 @@
index.html
```java
```js
<!DOCTYPE html>
<html>
<head>
......@@ -39,7 +39,7 @@ index.html
index.js
```java
```js
new Vue({
el: "#app",
data: {
......@@ -53,7 +53,7 @@ new Vue({
`index.html`(代码段)
```java
```js
<div>
<h4>Single checkbox with a boolean value</h4>
<!-- form input bindings: single checkbox -->
......@@ -64,7 +64,7 @@ new Vue({
`index.js`
```java
```js
new Vue({
el: "#app",
data: {
......@@ -101,7 +101,7 @@ new Vue({
`index.js`(代码段)
```javascript
```jsscript