Skip to content

J
jbt-zh

OpenDocCN / jbt-zh
8 个月 前同步成功

通知 0
Star 8
Fork 1
J
jbt-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 3b370fcb 编写于 作者: W wizardforcel
浏览文件
操作

2020-06-24 15:53:32

上级 c5caefa2
展开全部 隐藏空白更改
内联 并排
Showing with 413 addition and 41 deletion
docs/119.md
浏览文件 @ 3b370fcb
......@@ -150,6 +150,6 @@ public class AssertAndVerify {
}
```
所有代码文件都放置在 [GitHub 存储库](https://github.com/JBTAdmin/Selenium/tree/master/WebDriver)中，以方便访问。 您可以为存储库加注星标和分支以方便使用。 请仔细阅读“`README.md`”文件以获取明确说明。
所有代码文件都放置在 [GitHub 仓库](https://github.com/JBTAdmin/Selenium/tree/master/WebDriver)中，以方便访问。 您可以为仓库加注星标和分支以方便使用。 请仔细阅读“`README.md`”文件以获取明确说明。
总结了断言和验证的这一部分。 祝你有美好的一天！
docs/126.md
浏览文件 @ 3b370fcb
......@@ -128,6 +128,6 @@ driver.getTitle());
在“Eclipse IDE 中 -> JUnit 窗格 -> 绿色条”显示测试用例已成功执行。 控制台窗口显示没有任何错误。 它还按预期显示所有打印的消息。
![multiple windows eclipse output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20819%20391'%3E%3C/svg%3E)
![multiple windows eclipse output](img/bbdef2f2920307b3b20ab96a9a969b78.png)
<noscript><img alt="multiple windows eclipse output" class="alignnone size-full wp-image-12533" height="391" src="img/bbdef2f2920307b3b20ab96a9a969b78.png" width="819"/><p>有了这个，我很快就会在另一篇文章中见。 祝你有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/9z-webdriver-window-maximize/" title="9z. WebDriver – Window maximize"> 9z。 WebDriver – 最大化窗口</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
有了这个，我很快就会在另一篇文章中见。 祝你有美好的一天！
docs/127.md
浏览文件 @ 3b370fcb
......@@ -99,4 +99,8 @@ public class WindowMaximize {
在“Eclipse IDE 中 -> JUnit 窗格 -> 绿色条”显示测试用例已成功执行。 控制台窗口显示没有任何错误。 它还按预期显示所有打印的消息。
<noscript><img alt="" class="alignnone size-full wp-image-12549" height="391" src="img/8747d9f868b65e6dad7be604914dd691.png" width="819"/><p>如有任何疑问，请不要在评论部分大喊大叫！</p><p>我很快会在另一篇文章中再见。 祝你有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/9aa-webdriver-executing-javascript-code/" title="9aa. WebDriver – Executing JavaScript code"> 9aa。 WebDriver – 执行 JavaScript 代码</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
![](img/8747d9f868b65e6dad7be604914dd691.png)
如有任何疑问，请不要在评论部分大喊大叫！
我很快会在另一篇文章中再见。 祝你有美好的一天！
docs/128.md
浏览文件 @ 3b370fcb
......@@ -4,6 +4,128 @@
嗨冠军！ 今天就与浏览器进行一些高质量的互动！！ 因此，您能猜出浏览器首选的语言吗？ 是的，你说对了。 确实是 **JavaScript** 。 如果您使用的是 Chrome，则单击“F12”将打开“开发人员工具”，这有助于我们直接从浏览器执行 JavaScript。 某些动作（例如滚动，显示警报等）变得更易于使用 JavaScript 进行管理。
![Executing JavaScript in browser](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20791%20669'%3E%3C/svg%3E)
![Executing JavaScript in browser](img/bc2efaf567c829cdf5dbeb4e67e88112.png)
<noscript><img alt="Executing JavaScript in browser" class="alignnone size-full wp-image-13955" height="669" src="img/bc2efaf567c829cdf5dbeb4e67e88112.png" width="791"/><p>除此之外，在其他情况下，我们可能找不到合适的 Selenium API 来执行特定操作。 但是我们可以通过执行 JavaScript 代码来执行该操作。 Selenium WebDriver 提供了一个界面，可以帮助我们做到这一点！</p><p><strong> JavascriptExecutor </strong>…您听说过，就像那些名人一样。 好吧，现在是我们该去见那颗璀璨的星星的时候了。 JavascriptExecutor 不需要添加任何外部 JAR 文件或插件。 只需导入一个包即可完成工作，“导入<strong> org.openqa.selenium.JavascriptExecutor” </strong>。 它有两种重要的方法可以执行我们的 Selenium 测试中的 JavaScript 代码，以自动化测试中的应用，即</p><li><strong> executeScript </strong>（脚本，参数）</li><li><strong> executeAsyncScript </strong>（脚本，参数）</li><p><img alt="JavascriptExecutor methods" class="alignnone size-full wp-image-13956" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/09/2_JS-Executor-methods-1.jpg" height="130" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20511%20130'%3E%3C/svg%3E" width="511"/></p><noscript><img alt="JavascriptExecutor methods" class="alignnone size-full wp-image-13956" height="130" src="img/a2b574fd1517d1155515eab84c2019a6.png" width="511"/><p>让我们通过几个简单的步骤来理解这一点。</p><h2><strong>步骤 1：</strong></h2><p>导入以下包，<code data-enlighter-language="java">import org.openqa.selenium.JavascriptExecutor;</code></p><p>创建一个 JavascriptExecutor 对象，并通过将其类型转换为 JavascriptExecutor 来分配驱动程序对象。</p><pre><code class="language-java">// Typecast driver to JavascriptExecutor JavascriptExecutor jsExecutor = (JavascriptExecutor)driver;</code></pre><h2><strong>步骤 2：</strong></h2><p>这样创建的 JavascriptExecutor 对象允许我们从 Selenium 测试中执行 JavaScript 代码。</p><pre><code class="language-java">// Scroll down by 100 pixels jsExecutor.executeScript("window.scrollBy(0,100)");</code></pre><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>此“excuteScript”方法采用两个参数。 第一个是 JavaScript 代码，第二个是 Java 脚本代码所需的可选参数列表。</p><h2><strong> 总体图片 </strong></h2><p>让我们看一个测试案例，实现到目前为止所介绍的技术，</p><h3><em>场景</em></h3><ol><li>打开 Firefox 浏览器</li><li>导航到演示站点（<a href="https://chandanachaitanya.github.io/selenium-practice-site/"> https://chandanachaitanya.github.io/selenium-practice-site/ </a>）</li><li>使用和不使用 JavaScript 代码打印页面 URL 进行控制台</li><li>垂直向下滚动页面 100 像素</li><li>刷新页面</li><li>导航到 Google 主页</li><li>使用 JavaScript 代码执行上述三个操作</li><li>验证 Eclipse IDE 控制台输出屏幕和 JUnit 窗格是否成功</li></ol><p>此方案的 JUnit 代码是，</p><pre><code class="language-java">import java.util.concurrent.TimeUnit; import org.junit.After; import org.junit.Before; import org.junit.Test; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; public class JavaScriptExecutorTest { // Declaring variables private WebDriver driver; private String baseUrl; @Before public void setUp() throws Exception { // Selenium version 3 beta releases require system property set up System.setProperty("webdriver.gecko.driver", "E:\\Softwares\\" + "Selenium\\geckodriver-v0.10.0-win64\\geckodriver.exe"); // Create a new instance for the class FirefoxDriver // that implements WebDriver interface driver = new FirefoxDriver();53 // Implicit wait for 5 seconds driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS); // Assign the URL to be invoked to a String variable baseUrl = "https://chandanachaitanya.github.io/selenium-practice-site/"; } @Test public void testPageTitle() throws Exception { // Open baseUrl in Firefox browser window driver.get(baseUrl); Thread.sleep(5000); // Typecast driver to JavascriptExecutor JavascriptExecutor jsExecutor = (JavascriptExecutor)driver; // Execute JavaScript code and assign it to a String String pageURL = (String)jsExecutor.executeScript("return document.URL;"); // Print the URL to the console System.out.println("URL : " + pageURL); // Print the URL without JavaScript to the console System.out.println("URL without JavascriptExecutor: " + driver.getCurrentUrl()); // Scroll down by 100 pixels jsExecutor.executeScript("window.scrollBy(0,100)"); // Refresh the page jsExecutor.executeScript("history.go(0)"); // Navigating to a different page jsExecutor.executeScript("window.location = 'https://www.google.com/';"); } // End of @Test @After public void tearDown() throws Exception { // Close the Firefox browser driver.close(); } }</code></pre><h3><em>执行结果：</em></h3><p>为每行代码提供了注释，使其易于说明。</p><p>在 JUnit 窗格中，绿色条显示测试用例已成功执行。 控制台窗口显示没有任何错误。 它还按预期显示所有打印的消息。</p><p><img alt="Eclipse IDE console output" class="alignnone size-full wp-image-13954" data-lazy-sizes="(max-width: 813px) 100vw, 813px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/09/3_Console-output.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/09/3_Console-output.jpg 813w, https://javabeginnerstutorial.com/wp-content/uploads/2018/09/3_Console-output-300x96.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/09/3_Console-output-768x245.jpg 768w" height="259" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20813%20259'%3E%3C/svg%3E" width="813"/></p><noscript><img alt="Eclipse IDE console output" class="alignnone size-full wp-image-13954" height="259" sizes="(max-width: 813px) 100vw, 813px" src="img/9197339b0edc0ae7320e695f9f25a475.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/09/3_Console-output.jpg 813w, https://javabeginnerstutorial.com/wp-content/uploads/2018/09/3_Console-output-300x96.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/09/3_Console-output-768x245.jpg 768w" width="813"/><p>是时候尝试今天的技能了。 是的，戴上安全帽，以免遇到任何异常！</p><p>所有代码文件都放置在<a href="https://github.com/JBTAdmin/Selenium"> GitHub 存储库</a>中，以方便访问。 您可以为存储库加注星标和分支以方便使用。 请仔细阅读“README.md”文件以获取明确说明。</p><p>祝你有美好的一天！</p><p> </p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/9bb-webdriver-actions-class/" title="9ab. WebDriver – Using Actions Class"> 9ab。 WebDriver – 使用动作类</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
除此之外，在其他情况下，我们可能找不到合适的 Selenium API 来执行特定操作。 但是我们可以通过执行 JavaScript 代码来执行该操作。 Selenium WebDriver 提供了一个界面，可以帮助我们做到这一点！
`JavascriptExecutor`…您听说过，就像那些名人一样。 好吧，现在是我们该去见那颗璀璨的星星的时候了。 `JavascriptExecutor`不需要添加任何外部 JAR 文件或插件。 只需导入一个包即可完成工作，“导入`org.openqa.selenium.JavascriptExecutor`”。 它有两种重要的方法可以执行我们的 Selenium 测试中的 JavaScript 代码，以自动化测试中的应用，即
* **`executeScript(script, args)`**
* **`executeAsyncScript(script, args)`**
![JavascriptExecutor methods](img/a2b574fd1517d1155515eab84c2019a6.png)
让我们通过几个简单的步骤来理解这一点。
## **步骤 1：**
导入以下包，`import org.openqa.selenium.JavascriptExecutor;`
创建一个`JavascriptExecutor`对象，并通过将其类型转换为`JavascriptExecutor`来分配驱动程序对象。
```java
// Typecast driver to JavascriptExecutor
JavascriptExecutor jsExecutor = (JavascriptExecutor)driver;
```
## **步骤 2：**
这样创建的`JavascriptExecutor`对象允许我们从 Selenium 测试中执行 JavaScript 代码。
```java
// Scroll down by 100 pixels
jsExecutor.executeScript("window.scrollBy(0,100)");
```
此“`excuteScript`”方法采用两个参数。 第一个是 JavaScript 代码，第二个是 Java 脚本代码所需的可选参数列表。
## **总体图片**
让我们看一个测试案例，实现到目前为止所介绍的技术，
### *场景*
1. 打开 Firefox 浏览器
2. 导航到演示站点（[https://chandanachaitanya.github.io/selenium-practice-site/](https://chandanachaitanya.github.io/selenium-practice-site/)）
3. 使用和不使用 JavaScript 代码打印页面 URL 进行控制台
4. 垂直向下滚动页面 100 像素
5. 刷新页面
6. 导航到 Google 主页
7. 使用 JavaScript 代码执行上述三个操作
8. 验证 Eclipse IDE 控制台输出屏幕和 JUnit 窗格是否成功
此方案的 JUnit 代码是，
```java
import java.util.concurrent.TimeUnit;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class JavaScriptExecutorTest {
// Declaring variables
private WebDriver driver;
private String baseUrl;
@Before
public void setUp() throws Exception {
// Selenium version 3 beta releases require system property set up
System.setProperty("webdriver.gecko.driver", "E:\\Softwares\\"
+ "Selenium\\geckodriver-v0.10.0-win64\\geckodriver.exe");
// Create a new instance for the class FirefoxDriver
// that implements WebDriver interface
driver = new FirefoxDriver();53
// Implicit wait for 5 seconds
driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
// Assign the URL to be invoked to a String variable
baseUrl = "https://chandanachaitanya.github.io/selenium-practice-site/";
}
@Test
public void testPageTitle() throws Exception {
// Open baseUrl in Firefox browser window
driver.get(baseUrl);
Thread.sleep(5000);
// Typecast driver to JavascriptExecutor
JavascriptExecutor jsExecutor = (JavascriptExecutor)driver;
// Execute JavaScript code and assign it to a String
String pageURL = (String)jsExecutor.executeScript("return document.URL;");
// Print the URL to the console
System.out.println("URL : " + pageURL);
// Print the URL without JavaScript to the console
System.out.println("URL without JavascriptExecutor: " + driver.getCurrentUrl());
// Scroll down by 100 pixels
jsExecutor.executeScript("window.scrollBy(0,100)");
// Refresh the page
jsExecutor.executeScript("history.go(0)");
// Navigating to a different page
jsExecutor.executeScript("window.location = 'https://www.google.com/';");
} // End of @Test
@After
public void tearDown() throws Exception {
// Close the Firefox browser
driver.close();
}
}
```
### *执行结果：*
为每行代码提供了注释，使其易于说明。
在 JUnit 窗格中，绿色条显示测试用例已成功执行。 控制台窗口显示没有任何错误。 它还按预期显示所有打印的消息。
![Eclipse IDE console output](img/9197339b0edc0ae7320e695f9f25a475.png)
是时候尝试今天的技能了。 是的，戴上安全帽，以免遇到任何异常！
所有代码文件都放置在 [GitHub 仓库](https://github.com/JBTAdmin/Selenium)中，以方便访问。 您可以为仓库加注星标和分支以方便使用。 请仔细阅读“`README.md`”文件以获取明确说明。
祝你有美好的一天！
docs/129.md
浏览文件 @ 3b370fcb
......@@ -234,6 +234,20 @@ actions
为每行代码提供了注释，使其其余部分不言自明。 散布演示站点输出的一些视觉效果，
![Actions output 1](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20727%20338'%3E%3C/svg%3E)
![Actions output 1](img/a68025a724b5fa9a039ffea6277c6cec.png)
<noscript><img alt="Actions output 1" class="alignnone size-full wp-image-14169" height="338" sizes="(max-width: 727px) 100vw, 727px" src="img/a68025a724b5fa9a039ffea6277c6cec.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/1_BrowserOutput1-1.jpg 727w, https://javabeginnerstutorial.com/wp-content/uploads/2018/12/1_BrowserOutput1-1-300x139.jpg 300w" width="727"/><p>自行车复选框位于并按预期检查。</p><p><img alt="Actions output 2" class="alignnone size-full wp-image-14170" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/2_BrowserOutput2.jpg" height="405" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20764%20405'%3E%3C/svg%3E" width="764"/></p><noscript><img alt="Actions output 2" class="alignnone size-full wp-image-14170" height="405" src="img/42cf6db6c7594635f8626fa848cb1b00.png" width="764"/><p>双击文本<code>Message</code>，结果将突出显示。 在文本框中，“hi there”用大写字母键入。 从可排序列表中将<code>click()</code>从其默认的第一位置拖动到第三位置。</p><p>在 JUnit 窗格中，绿色条显示测试用例已成功执行。 同样，控制台窗口显示没有错误以及所有打印的消息如预期的那样。</p><p><img alt="Actions eclipse IDE output" class="alignnone size-full wp-image-14171" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/3_EclipseOutput-1.jpg" height="323" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20637%20323'%3E%3C/svg%3E" width="637"/></p><noscript><img alt="Actions eclipse IDE output" class="alignnone size-full wp-image-14171" height="323" src="img/fc8513d158727fc823c0450b50cb21b2.png" width="637"/><p>是时候把忍者带出来了。 尝试使用尽可能多的动作类方法，并从中获得乐趣！</p><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/Selenium"> GitHub 存储库</a>的“WebDriver”文件夹中找到。 您可以为存储库加注星标和分支以方便使用。 请仔细阅读<code>README.md</code>文件以获取明确说明。</p><p>祝你有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/9ac-webdriver-unable-to-locate-an-element-easily-read-on/" title="9ac. WebDriver – Unable to locate an element easily? Read on…"> 9ac。 WebDriver – 无法轻松定位元素？ 继续阅读…</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
自行车复选框位于并按预期检查。
![Actions output 2](img/42cf6db6c7594635f8626fa848cb1b00.png)
双击文本`Message`，结果将突出显示。 在文本框中，“`hi there`”用大写字母键入。 从可排序列表中将`click()`从其默认的第一位置拖动到第三位置。
在 JUnit 窗格中，绿色条显示测试用例已成功执行。 同样，控制台窗口显示没有错误以及所有打印的消息如预期的那样。
![Actions eclipse IDE output](img/fc8513d158727fc823c0450b50cb21b2.png)
是时候把忍者带出来了。 尝试使用尽可能多的动作类方法，并从中获得乐趣！
上面讨论的所有代码都可以在 [GitHub 仓库](https://github.com/JBTAdmin/Selenium)的“WebDriver”文件夹中找到。 您可以为仓库加注星标和分支以方便使用。 请仔细阅读`README.md`文件以获取明确说明。
祝你有美好的一天！
docs/131.md
浏览文件 @ 3b370fcb
......@@ -53,6 +53,73 @@ Apache ANT 具有强大的功能，足以超越“谢谢”的门槛！ 我们
示例`build.xml`文件如下，
![sample build.xml](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20839%20425'%3E%3C/svg%3E)
![sample build.xml](img/28116bee6867f10c68cb8a7b00821a1e.png)
<noscript><img alt="sample build.xml" class="alignnone size-full wp-image-12640" height="425" src="img/28116bee6867f10c68cb8a7b00821a1e.png" width="839"/><p>让我们一次将构建文件提取一个标签。</p><p><strong>项目</strong>：这具有三个属性。</p><ol><li>名称 – 项目名称</li><li>default – 如果未提供任何内容，则应执行的默认目标</li><li>baseDir – 从中计算文件中相对路径的基本目录。 “。” 指执行的当前目录</li></ol><p><strong>目标</strong>：如示例构建文件中所示，一个项目可以具有一个或多个目标。 目标是一组任务。 我们可以选择希望 ANT 执行的目标，并用逗号分隔它们的名称。 如果未指定目标，则将执行默认目标。</p><p>这里要注意的重要属性是“依赖”。 这指定了它所依赖的目标名称。 例如，编译目标将仅在其依赖的初始化目标执行后执行。 因此，depends 属性指定执行目标的顺序。</p><p><strong>任务</strong>：这是一段可以执行的代码。 每个任务可以具有一个或多个属性作为键值对。</p><p>句法：</p><p>&lt; <em>名称</em> <em> attribute1 </em> =” <em> value1 </em>” <em> attribute2 </em> =” <em> value2 </em>”…/ &gt;</p><p><em>名称</em>是任务的名称，<em>属性 N </em>和<em> valueN </em>分别是属性名称和值名称。</p><p>这是现成的<a href="https://ant.apache.org/manual/tasklist.html">内置任务</a>的长长列表。 我们也可以编写自己的任务。 （还记得吗？都是用 Java 编写的）。</p><p>您一定想知道，为什么要深入研究构建文件，而不是立即安装并开始执行操作！ 传递这么多 ANT 知识是有原因的。 随着我们在旅途中的进一步发展，您将对此表示赞赏。 请稍等...</p><p>现在开始营业！</p><p><strong>步骤 1 </strong>：转到“https://ant.apache.org/bindownload.cgi”，然后单击“apache-ant-1.10.2-bin.zip”以在下面下载.zip 文件 “蚂蚁的当前版本”。</p><p><img alt="Download link" class="alignnone size-full wp-image-12641" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/04/1_downloadLink.jpg" height="98" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20572%2098'%3E%3C/svg%3E" width="572"/></p><noscript><img alt="Download link" class="alignnone size-full wp-image-12641" height="98" src="img/14970a7f07b1ccaa7596be317ad9fa33.png" width="572"/><p><strong>步骤 2：</strong>下载.zip 存档后，将所有文件提取到本地计算机上的目录中。</p><p><strong>步骤 3 </strong>：如下设置环境变量 ANT_HOME 和 Path，</p><p>右键点击“计算机”-&gt;属性-&gt;高级系统设置-&gt;“高级”标签-&gt;环境变量-&gt;在系统变量下单击“新建”。</p><p>ANT_HOME 设置为提取 Apache ANT 文件的文件夹的路径。</p><p><img alt="System variable settings" class="alignnone size-full wp-image-12642" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/04/2_SystemVariable.jpg" height="162" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20376%20162'%3E%3C/svg%3E" width="376"/></p><noscript><img alt="System variable settings" class="alignnone size-full wp-image-12642" height="162" src="img/ba0bc910e93456af8ef5bbf18bafd97b.png" width="376"/><p>类似地，编辑 Path 变量以包含% ANT_HOME% \ bin。</p><p><strong>步骤 4 </strong>：通过在“命令提示符”中键入以下命令来验证是否已安装 Apache ANT</p><p><em>蚂蚁版本</em></p><p><img alt="ANT version check in cmd" class="alignnone size-full wp-image-12643" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/04/3_CmdVersionCheck.jpg" height="86" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20354%2086'%3E%3C/svg%3E" width="354"/></p><noscript><img alt="ANT version check in cmd" class="alignnone size-full wp-image-12643" height="86" src="img/418f05483293c425772a4636e1d0364c.png" width="354"/><p><strong>步骤 5：</strong>下一个任务是打开 Eclipse IDE，</p><li>右键单击 Java 项目-&gt;导出</li><li>在“常规”下，选择“蚂蚁构建文件”，然后点击“下一步”</li><li>确保已选择所需的项目</li><li>取消选中“创建目标以使用 Eclipse 编译器编译项目”，以删除对 Eclipse 的任何依赖</li><p><img alt="Generating ANT buildfile" class="alignnone size-full wp-image-12638" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/04/4_Buildfiles-1.jpg" height="407" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20509%20407'%3E%3C/svg%3E" width="509"/></p><noscript><img alt="Generating ANT buildfile" class="alignnone size-full wp-image-12638" height="407" src="img/f6b7286b63d7900c3782225e686a6833.png" width="509"/><p>单击“完成”以查看自动生成的 eclipse 文件。</p><p>就是这样！ 您已经准备好将所有项目作为 ANT 构建运行。 这很简单，不是吗？</p><p><strong> <em>注意：</em> </strong> <em> Eclipse 与 ANT 集成在一起。 为了确保 Eclipse 的“蚂蚁之家”指向最新版本的 ANT，请单击 Windows-&gt;首选项-&gt; Ant-&gt;运行时。 点击“类路径”标签。 展开“蚂蚁房屋入境”并验证路径。 如果指向的是其他版本，请单击“蚂蚁之家”并浏览用于提取 Apache ANT 文件的文件夹的位置。 </em></p><p>在我们的下一篇文章中，让我们做到这一点，并在 ANT 目标的帮助下生成 JUnit 报告。</p><p>安装愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10b-advanced-webdriver-generating-junit-reports/" title="10b. Advanced WebDriver – Generating JUnit Report"> 10b。 高级 WebDriver – 生成 JUnit 报告</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
让我们一次将构建文件提取一个标签。
**项目**：这具有三个属性。
1. `name` – 项目名称
2. `default` – 如果未提供任何内容，则应执行的默认目标
3. `baseDir` – 从中计算文件中相对路径的基本目录。 “`.`” 指执行的当前目录
**目标**：如示例构建文件中所示，一个项目可以具有一个或多个目标。 目标是一组任务。 我们可以选择希望 ANT 执行的目标，并用逗号分隔它们的名称。 如果未指定目标，则将执行默认目标。
这里要注意的重要属性是“依赖”。 这指定了它所依赖的目标名称。 例如，编译目标将仅在其依赖的初始化目标执行后执行。 因此，`depends`属性指定执行目标的顺序。
**任务**：这是一段可以执行的代码。 每个任务可以具有一个或多个属性作为键值对。
句法：
```xml
<name attribute1=”value1” attribute2=”value2” … />
```
`name`是任务的名称，`attributeN`和`valueN`分别是属性名称和值名称。
这是现成的[内置任务](https://ant.apache.org/manual/tasklist.html)的长长列表。 我们也可以编写自己的任务。 （还记得吗？都是用 Java 编写的）。
您一定想知道，为什么要深入研究构建文件，而不是立即安装并开始执行操作！ 传递这么多 ANT 知识是有原因的。 随着我们在旅途中的进一步发展，您将对此表示赞赏。 请稍等...
现在开始营业！
**步骤 1** ：转到“https://ant.apache.org/bindownload.cgi”，然后单击“`apache-ant-1.10.2-bin.zip`”以在下面下载`.zip`文件 “蚂蚁的当前版本”。
![Download link](img/14970a7f07b1ccaa7596be317ad9fa33.png)
**步骤 2：**下载`.zip`存档后，将所有文件提取到本地计算机上的目录中。
**步骤 3** ：如下设置环境变量`ANT_HOME`和`PATH`，
右键点击“计算机 -> 属性 -> 高级系统设置 -> ‘高级’标签 -> 环境变量”，在系统变量下单击“新建”。
`ANT_HOME`设置为提取 Apache ANT 文件的文件夹的路径。
![System variable settings](img/ba0bc910e93456af8ef5bbf18bafd97b.png)
类似地，编辑`Path`变量以包含`%ANT_HOME%\bin`。
**步骤 4** ：通过在“命令提示符”中键入以下命令来验证是否已安装 Apache ANT
`ant version`
![ANT version check in cmd](img/418f05483293c425772a4636e1d0364c.png)
**步骤 5：**下一个任务是打开 Eclipse IDE，
* 右键单击“Java 项目 -> 导出”
* 在“常规”下，选择“蚂蚁构建文件”，然后点击“下一步”
* 确保已选择所需的项目
* 取消选中“创建目标以使用 Eclipse 编译器编译项目”，以删除对 Eclipse 的任何依赖
![Generating ANT buildfile](img/f6b7286b63d7900c3782225e686a6833.png)
单击“完成”以查看自动生成的 eclipse 文件。
就是这样！ 您已经准备好将所有项目作为 ANT 构建运行。 这很简单，不是吗？
**注意**： *Eclipse 与 ANT 集成在一起。 为了确保 Eclipse 的“ANT Home”指向最新版本的 ANT，请单击 “Windows -> 首选项 -> Ant -> 运行时”。 点击“类路径”标签。 展开“ANT Home Import”并验证路径。 如果指向的是其他版本，请单击“ANT Home”并浏览用于提取 Apache ANT 文件的文件夹的位置。*
在我们的下一篇文章中，让我们做到这一点，并在 ANT 目标的帮助下生成 JUnit 报告。
安装愉快！
docs/132.md
浏览文件 @ 3b370fcb
......@@ -4,7 +4,7 @@
嗨冠军！ 报告，报告，无处不在的报告。 从哈利·波特时代开始，我们就一直在处理这些问题！！ （还记得学校的进度报告吗？！）无论如何，报告真的很重要，尤其是在测试中，以便快速了解一切工作原理。
因此，今天，我们将使用 Apache ANT 的 junitreport 任务来生成一个任务。 准备点亮！
因此，今天，我们将使用 Apache ANT 的`junitreport`任务来生成一个任务。 准备点亮！
从我的[上一篇文章](https://javabeginnerstutorial.com/selenium/10a-advanced-webdriver-apache-ant/)中，我们生成了带有“`junit`”作为默认 JUnit 输出目录的构建文件。 用简单的英语来说，这仅意味着将作为 JUnit 报告任务的一部分生成的所有文件都放置在名为“`junit`”的目录下。
......@@ -12,5 +12,122 @@
在项目“Selenium”下，将生成名为“`build.xml`”的 ANT 构建文件。 我已经在“`com.blog.junitTests`”包下创建了两个 JUnit 测试用例，分别是 [RadioBtns_Checkboxes.java](https://javabeginnerstutorial.com/selenium/9t-webdriver-handling-radio-buttons-checkboxes/) 和 [SelectItems.java](https://javabeginnerstutorial.com/selenium/9u-webdriver-select-items-two-ways/) ，如下图所示。 该代码可在相应的帖子中找到。 只需单击文件名即可进行导航。
![Package structure](img/bbbccea0a3928f2e18e1c51e8230d1e6.png)
<noscript><img alt="Package structure" class="alignnone size-full wp-image-13022" height="273" src="img/bbbccea0a3928f2e18e1c51e8230d1e6.png" width="354"/><h4><strong>步骤 2 </strong>：</h4><p>打开“build.xml”，并确保自动生成“junitreport”任务。 以下是我的项目的目标（初始化，清理，构建，RadioBtns_Checkboxes，SelectItems 和 junitreport）。</p><pre><code class="language-xml">&lt;project basedir="." default="build" name="Selenium"&gt; &lt;property environment="env"/&gt; &lt;property name="junit.output.dir" value="junit"/&gt; &lt;property name="debuglevel" value="source,lines,vars"/&gt; &lt;property name="target" value="1.8"/&gt; &lt;property name="source" value="1.8"/&gt; &lt;target name="init"&gt; &lt;mkdir dir="bin"/&gt; &lt;copy includeemptydirs="false" todir="bin"&gt; &lt;fileset dir="src"&gt; &lt;exclude name="**/*.java"/&gt; &lt;/fileset&gt; &lt;/copy&gt; &lt;/target&gt; &lt;target name="clean"&gt; &lt;delete dir="bin"/&gt; &lt;/target&gt; &lt;target name="build" depends="init"&gt; &lt;echo message="${ant.project.name}: ${ant.file}"/&gt; &lt;javac debug="true" debuglevel="${debuglevel}" destdir="bin" includeantruntime="false" source="${source}" target="${target}"&gt; &lt;src path="src"/&gt; &lt;classpath refid="Selenium.classpath"/&gt; &lt;/javac&gt; &lt;/target&gt; &lt;target name="RadioBtns_Checkboxes"&gt; &lt;mkdir dir="${junit.output.dir}"/&gt; &lt;junit fork="yes" printsummary="withOutAndErr"&gt; &lt;formatter type="xml"/&gt; &lt;test name="com.blog.junitTests.RadioBtns_Checkboxes" todir="${junit.output.dir}"/&gt; &lt;classpath refid="Selenium.classpath"/&gt; &lt;/junit&gt; &lt;/target&gt; &lt;target name="SelectItems"&gt; &lt;mkdir dir="${junit.output.dir}"/&gt; &lt;junit fork="yes" printsummary="withOutAndErr"&gt; &lt;formatter type="xml"/&gt; &lt;test name="com.blog.junitTests.SelectItems" todir="${junit.output.dir}"/&gt; &lt;classpath refid="Selenium.classpath"/&gt; &lt;/junit&gt; &lt;/target&gt; &lt;target name="junitreport"&gt; &lt;junitreport todir="${junit.output.dir}"&gt; &lt;fileset dir="${junit.output.dir}"&gt; &lt;include name="TEST-*.xml"/&gt; &lt;/fileset&gt; &lt;report format="frames" todir="${junit.output.dir}"/&gt; &lt;/junitreport&gt; &lt;/target&gt; &lt;/project&gt;</code></pre><h4><strong>步骤 3 </strong>：</h4><p>可以通过以下任意一种方式执行构建，</p><p>1.右键单击构建文件（build.xml）-&gt;运行方式-&gt; Ant Build</p><p><img alt="Report Generation Method 1" class="alignnone size-full wp-image-13025" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/9_RepRunMethod1-1.jpg" height="416" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20775%20416'%3E%3C/svg%3E" width="775"/></p><noscript><img alt="Report Generation Method 1" class="alignnone size-full wp-image-13025" height="416" src="img/1f57bab2e596907cfafba4a0f756ff86.png" width="775"/><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span> 2.右键单击构建文件（build.xml）-&gt;运行方式-&gt;外部工具配置-&gt;运行</p><p>3.蚀工具栏中的快捷方式运行图标</p><p><img alt="Report Generation Method 2" class="alignnone size-full wp-image-13018" data-lazy-sizes="(max-width: 536px) 100vw, 536px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/10_RepRunMethod2.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/10_RepRunMethod2.jpg 536w, https://javabeginnerstutorial.com/wp-content/uploads/2018/05/10_RepRunMethod2-300x113.jpg 300w" height="201" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20536%20201'%3E%3C/svg%3E" width="536"/></p><noscript><img alt="Report Generation Method 2" class="alignnone size-full wp-image-13018" height="201" sizes="(max-width: 536px) 100vw, 536px" src="img/6a5b08798471e00aeee6fc71c824d310.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/10_RepRunMethod2.jpg 536w, https://javabeginnerstutorial.com/wp-content/uploads/2018/05/10_RepRunMethod2-300x113.jpg 300w" width="536"/><p>让我们采用第二种方法，看看如何使用“外部工具配置”选项修改现有配置。</p><p>因此，右键单击构建文件-&gt;运行方式-&gt;外部工具配置：这将打开一个弹出窗口。 选择“主要”标签，并确保选择了正确的构建文件。</p><p><img alt="Main Configuration" class="alignnone size-full wp-image-13023" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/7_RepMainConfig-1.jpg" height="248" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20783%20248'%3E%3C/svg%3E" width="783"/></p><noscript><img alt="Main Configuration" class="alignnone size-full wp-image-13023" height="248" src="img/4fa275eb64b4fb422b00608b496fe7f8.png" width="783"/><p>然后点击“目标”标签。</p><ol><li>将列出构建文件中定义的所有目标名称，并且仅检查默认目标。 点击“运行”，选择要执行的所有目标。</li><li>在“目标执行顺序”框中，将从上一步中选择的所有目标按执行顺序列出。</li><li>如果您想更改订单，请点击“订单...”。 这将打开“订单目标”弹出窗口。</li><li>我们可以通过选择目标并相应地单击“上”或“下”按钮来在此弹出窗口中指定目标执行顺序。 点击“确定”以确认最终的执行顺序。</li><li>完成所有操作后，点击“应用”和“运行”</li></ol><p><img alt="ANT target configuration" class="alignnone size-full wp-image-13024" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/8_RepTargetConfig.jpg" height="591" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20845%20591'%3E%3C/svg%3E" width="845"/></p><noscript><img alt="ANT target configuration" class="alignnone size-full wp-image-13024" height="591" src="img/8af13d9bb45d3942d6d51b53f17f884f.png" width="845"/><h4><strong>步骤 4 </strong>：</h4><p>可以通过查看控制台视图来验证成功执行。 它显示了按配置顺序执行的所有目标以及基于构建文件中提到的日志记录级别的日志。 如图所示，将显示运行构建所花费的总时间以及消息“BUILD SUCCESSFUL”或“BUILD FAILED”。</p><p><img alt="Console Output" class="alignnone size-full wp-image-13019" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/11_RepConsoleOutput.jpg" height="515" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20790%20515'%3E%3C/svg%3E" width="790"/></p><noscript><img alt="Console Output" class="alignnone size-full wp-image-13019" height="515" src="img/0fb58b99d8612d1dccb306cceb89eba4.png" width="790"/><h4><strong>步骤 5 </strong>：</h4><p>在 Eclipse 的“Package Explorer”视图中，右键单击该项目，然后单击“Refresh”或 F5。 已经创建了“junit”文件夹（在生成构建文件时在“JUnit 输出目录”框中指定的名称）。 这是 JUnit 报告（index.html）和 XML 一起提供的地方，用于执行的每个测试用例，显示其成功或失败。</p><p><img alt="Report in JUnit folder" class="alignnone size-full wp-image-13020" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/12_RepJUnitFolder-1.jpg" height="402" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20646%20402'%3E%3C/svg%3E" width="646"/></p><noscript><img alt="Report in JUnit folder" class="alignnone size-full wp-image-13020" height="402" src="img/c5e6944f046312e1960f0c4919875688.png" width="646"/><p>或者，在文件浏览器中导航到项目路径，然后双击“junit”文件夹。</p><h4><strong>步骤 6 </strong>：</h4><p>在浏览器中打开“<strong> index.html </strong>”，并检查生成的默认报告。 这将在左窗格中显示所涉及的包和所有已执行的 Java 文件。</p><p>右窗格显示测试结果的摘要，其中包括测试的总数，失败，错误，跳过，成功率和执行时间。 还显示了包列表，其中包含类似的详细信息。</p><p>要深入查看所有已执行的测试或失败等，请单击显示的数字，如下图所示，</p><p><img alt="Generated report" class="alignnone size-full wp-image-13021" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/13_ReportGenerated.jpg" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20761%20436'%3E%3C/svg%3E" width="761"/></p><noscript><img alt="Generated report" class="alignnone size-full wp-image-13021" height="436" src="img/f6fcd46485176dabfbaa70e1208db3aa.png" width="761"/><p>用 Apache ANT 生成 JUnit 报告不是一件容易的事吗？ 猜猜这就是我们今天要做的。</p><p>在另一篇文章中再见。 祝您报告愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10c-advanced-webdriver-junit-report-customization/" title="10c. Advanced WebDriver – JUnit Report Customization"> 10c。 高级 WebDriver – JUnit 报表自定义</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
#### **步骤 2** ：
打开“`build.xml`”，并确保自动生成“`junitreport`”任务。 以下是我的项目的目标（初始化，清理，构建，`RadioBtns_Checkboxes`，`SelectItems`和`junitreport`）。
```xml
<project basedir="." default="build" name="Selenium">
<property environment="env"/>
<property name="junit.output.dir" value="junit"/>
<property name="debuglevel" value="source,lines,vars"/>
<property name="target" value="1.8"/>
<property name="source" value="1.8"/>
<target name="init">
<mkdir dir="bin"/>
<copy includeemptydirs="false" todir="bin">
<fileset dir="src">
<exclude name="**/*.java"/>
</fileset>
</copy>
</target>
<target name="clean">
<delete dir="bin"/>
</target>
<target name="build" depends="init">
<echo message="${ant.project.name}: ${ant.file}"/>
<javac debug="true" debuglevel="${debuglevel}" destdir="bin" includeantruntime="false" source="${source}" target="${target}">
<src path="src"/>
<classpath refid="Selenium.classpath"/>
</javac>
</target>
<target name="RadioBtns_Checkboxes">
<mkdir dir="${junit.output.dir}"/>
<junit fork="yes" printsummary="withOutAndErr">
<formatter type="xml"/>
<test name="com.blog.junitTests.RadioBtns_Checkboxes" todir="${junit.output.dir}"/>
<classpath refid="Selenium.classpath"/>
</junit>
</target>
<target name="SelectItems">
<mkdir dir="${junit.output.dir}"/>
<junit fork="yes" printsummary="withOutAndErr">
<formatter type="xml"/>
<test name="com.blog.junitTests.SelectItems" todir="${junit.output.dir}"/>
<classpath refid="Selenium.classpath"/>
</junit>
</target>
<target name="junitreport">
<junitreport todir="${junit.output.dir}">
<fileset dir="${junit.output.dir}">
<include name="TEST-*.xml"/>
</fileset>
<report format="frames" todir="${junit.output.dir}"/>
</junitreport>
</target>
</project>
```
#### **步骤 3** ：
可以通过以下任意一种方式执行构建，
1.右键单击“构建文件（`build.xml`）-> 运行方式 -> Ant Build”
![Report Generation Method 1](img/1f57bab2e596907cfafba4a0f756ff86.png)
2.右键单击“构建文件（`build.xml`）-> 运行方式 -> 外部工具配置 -> 运行”
3.蚀工具栏中的快捷方式运行图标
![Report Generation Method 2](img/6a5b08798471e00aeee6fc71c824d310.png)
让我们采用第二种方法，看看如何使用“外部工具配置”选项修改现有配置。
因此，右键单击“构建文件->运行方式->外部工具配置”：这将打开一个弹出窗口。 选择“主要”标签，并确保选择了正确的构建文件。
![Main Configuration](img/4fa275eb64b4fb422b00608b496fe7f8.png)
然后点击“目标”标签。
1. 将列出构建文件中定义的所有目标名称，并且仅检查默认目标。 点击“运行”，选择要执行的所有目标。
2. 在“目标执行顺序”框中，将从上一步中选择的所有目标按执行顺序列出。
3. 如果您想更改订单，请点击“订单...”。 这将打开“订单目标”弹出窗口。
4. 我们可以通过选择目标并相应地单击“上”或“下”按钮来在此弹出窗口中指定目标执行顺序。 点击“确定”以确认最终的执行顺序。
5. 完成所有操作后，点击“应用”和“运行”
![ANT target configuration](img/8af13d9bb45d3942d6d51b53f17f884f.png)
#### **步骤 4** ：
可以通过查看控制台视图来验证成功执行。 它显示了按配置顺序执行的所有目标以及基于构建文件中提到的日志记录级别的日志。 如图所示，将显示运行构建所花费的总时间以及消息“`BUILD SUCCESSFUL`”或“`BUILD FAILED`”。
![Console Output](img/0fb58b99d8612d1dccb306cceb89eba4.png)
#### **步骤 5** ：
在 Eclipse 的“包浏览器”视图中，右键单击该项目，然后单击“刷新”或`F5`。 已经创建了“`junit`”文件夹（在生成构建文件时在“JUnit 输出目录”框中指定的名称）。 这是 JUnit 报告（`index.html`）和 XML 一起提供的地方，用于执行的每个测试用例，显示其成功或失败。
![Report in JUnit folder](img/c5e6944f046312e1960f0c4919875688.png)
或者，在文件浏览器中导航到项目路径，然后双击“`junit`”文件夹。
#### **步骤 6** ：
在浏览器中打开“`index.html`”，并检查生成的默认报告。 这将在左窗格中显示所涉及的包和所有已执行的 Java 文件。
右窗格显示测试结果的摘要，其中包括测试的总数，失败，错误，跳过，成功率和执行时间。 还显示了包列表，其中包含类似的详细信息。
要深入查看所有已执行的测试或失败等，请单击显示的数字，如下图所示，
![Generated report](img/f6fcd46485176dabfbaa70e1208db3aa.png)
用 Apache ANT 生成 JUnit 报告不是一件容易的事吗？ 猜猜这就是我们今天要做的。
在另一篇文章中再见。 祝您报告愉快！
docs/133.md
浏览文件 @ 3b370fcb
......@@ -15,7 +15,7 @@
</junitreport>
```
Apache ANT 的 JunitReport 任务通过执行以下步骤来生成报告，
Apache ANT 的`JunitReport`任务通过执行以下步骤来生成报告，
* JUnit 任务生成的所有单个 XML 文件都被合并并命名为`TESTS-TestSuites.xml`
* CSS 样式应用于合并后的文档
......@@ -33,7 +33,7 @@ Apache ANT 的 JunitReport 任务通过执行以下步骤来生成报告，
**注意**： *所有单独的 JUnit 测试都是通过“junit” ANT 任务执行的，生成的 XML 文件为 生成的名称使用“`outfile`”属性指定。 如果未提及名称，则默认值为“`TEST-name`”（其中`name`是在 junit 任务的`name`属性中指定的测试名称）。*
使用`fileset`元素，junitreport 会从“`dir`”中提到的给定目录中收集所有单个 XML 文件，并根据上述代码段考虑所有以“`TEST-`”开头的文件。
使用`fileset`元素，`junitreport`会从“`dir`”中提到的给定目录中收集所有单个 XML 文件，并根据上述代码段考虑所有以“`TEST-`”开头的文件。
`<report format="frames" todir="junit/report"/>`
......@@ -92,7 +92,7 @@ Apache ANT 的 JunitReport 任务通过执行以下步骤来生成报告，
2.“页眉”部分负责显示标题和右侧显示的说明。 将它们分别更改为“自定义 JUnit 报告”和“由忍者设计！”。
#### BEFORE
#### `BEFORE`
```java
<!-- Page HEADER -->
......@@ -108,6 +108,54 @@ Apache ANT 的 JunitReport 任务通过执行以下步骤来生成报告，
</xsl:template>
```
![Before Title Customization](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20718%20340'%3E%3C/svg%3E)
![Before Title Customization](img/105704c5b193643f7f113ac0be161c95.png)
<noscript><img alt="Before Title Customization" class="size-full wp-image-13084 aligncenter" height="340" src="img/105704c5b193643f7f113ac0be161c95.png" width="718"/><h4><em>AFTER</em></h4><pre><code class="language-xml">&lt;xsl:template name="pageHeader"&gt; &lt;!-- &lt;h1&gt;&lt;xsl:value-of select="$TITLE"/&gt;&lt;/h1&gt; --&gt; &lt;h1&gt;Custom JUnit Report&lt;h1&gt; &lt;table width="100%"&gt; &lt;tr&gt; &lt;td align="left"&gt;&lt;/td&gt; &lt;!-- &lt;td align="right"&gt;Designed for use with &lt;a href="http://www.junit.org/"&gt;JUnit&lt;/a&gt; and &lt;a href="http://ant.apache.org/"&gt;Ant&lt;/a&gt;.&lt;/td&gt; --&gt; &lt;td align="right"&gt;Designed by ninjas!&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;hr size="1"/&gt; &lt;/xsl:template&gt;</code></pre><p>保存更改并从 eclipse 生成 JUnit 报告。</p><p><img alt="Title after customization" class="alignnone size-full wp-image-13085" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/15_CustomTitleAfter-1.jpg" height="336" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20773%20336'%3E%3C/svg%3E" width="773"/></p><noscript><img alt="Title after customization" class="alignnone size-full wp-image-13085" height="336" src="img/79f7da90cc8512a6f3a09a33020e5481.png" width="773"/><h2><strong>增加栈跟踪字体大小</strong></h2><p>我们在发生故障时看到的栈跟踪信息非常小，很难读取。 为了增加其字体大小，只需在模板中添加几行名称为 stylesheet.css 的行即可。</p><pre><code class="language-xml">&lt;xsl:template name="stylesheet.css"&gt; .StackTrace { font-size: 100%; }</code></pre><p>然后将该类添加到“display-failures”模板的“code”标签中，该模板负责显示栈跟踪信息。</p><h4><em>BEFORE</em></h4><pre><code class="language-xml">&lt;code &lt;xsl:call-template name="br-replace"&gt; &lt;xsl:with-param name="word" select="."/&gt; &lt;/xsl:call-template&gt; &lt;/code&gt;</code></pre><p><img alt="Stack trace before customization" class="alignnone size-full wp-image-13086" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/16_CustomStackTraceBefore-1.jpg" height="281" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20704%20281'%3E%3C/svg%3E" width="704"/></p><noscript><img alt="Stack trace before customization" class="alignnone size-full wp-image-13086" height="281" src="img/bb8d2d9cffa6c125da7d189e67916d17.png" width="704"/><h4>之后<i></i></h4><pre><code class="language-xml">&lt;code class="StackTrace"&gt; &lt;xsl:call-template name="br-replace"&gt; &lt;xsl:with-param name="word" select="."/&gt; &lt;/xsl:call-template&gt; &lt;/code&gt;</code></pre><p><img alt="Stack trace after customization" class="alignnone size-full wp-image-13083" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/17_CustomStackTraceAfter-1.jpg" height="308" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20744%20308'%3E%3C/svg%3E" width="744"/></p><noscript><img alt="Stack trace after customization" class="alignnone size-full wp-image-13083" height="308" src="img/aa339356190129736acc86ac3372a513.png" width="744"/><p>现在是时候戴上帽子了。 愿 ANT 的力量与您同在。</p><p>在另一篇文章中再见。 自定义愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10d-advanced-webdriver-junit-report-customization-part2/" title="10d. Advanced WebDriver – JUnit Report Customization Contd."> 10d。 高级 WebDriver – JUnit 报告自定义续。 </a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
#### *AFTER*
```xml
<xsl:template name="pageHeader"> <!-- <h1><xsl:value-of select="$TITLE"/></h1> --> <h1>Custom JUnit Report<h1> <table width="100%"> <tr> <td align="left"></td> <!-- <td align="right">Designed for use with <a href="http://www.junit.org/">JUnit</a> and <a href="http://ant.apache.org/">Ant</a>.</td> --> <td align="right">Designed by ninjas!</td> </tr> </table> <hr size="1"/> </xsl:template>
```
保存更改并从 eclipse 生成 JUnit 报告。
![Title after customization](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20773%20336'%3E%3C/svg%3E)
![Title after customization](img/79f7da90cc8512a6f3a09a33020e5481.png)
## **增加栈跟踪字体大小**
我们在发生故障时看到的栈跟踪信息非常小，很难读取。 为了增加其字体大小，只需在模板中添加几行名称为 stylesheet.css 的行即可。
```xml
<xsl:template name="stylesheet.css"> .StackTrace { font-size: 100%; }
```
然后将该类添加到“display-failures”模板的“code”标签中，该模板负责显示栈跟踪信息。
#### *BEFORE*
```xml
<code <xsl:call-template name="br-replace"> <xsl:with-param name="word" select="."/> </xsl:call-template> </code>
```
![Stack trace before customization](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20704%20281'%3E%3C/svg%3E)
![Stack trace before customization](img/bb8d2d9cffa6c125da7d189e67916d17.png)
#### 之后
```xml
<code class="StackTrace"> <xsl:call-template name="br-replace"> <xsl:with-param name="word" select="."/> </xsl:call-template> </code>
```
![Stack trace after customization](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20744%20308'%3E%3C/svg%3E)
![Stack trace after customization](img/aa339356190129736acc86ac3372a513.png)
现在是时候戴上帽子了。 愿 ANT 的力量与您同在。
在另一篇文章中再见。 自定义愉快！
###### 下一篇文章
##### [10d。 高级 WebDriver – JUnit 报告自定义续。](https://javabeginnerstutorial.com/selenium/10d-advanced-webdriver-junit-report-customization-part2/ "10d. Advanced WebDriver – JUnit Report Customization Contd.")
\ No newline at end of file
docs/137.md
浏览文件 @ 3b370fcb
......@@ -14,7 +14,7 @@
**`xstream-1.3.1.jar`** – 处理图片
让我们继续从 [https://code.google.com/archive/p/java2word/downloads](https://code.google.com/archive/p/java2word/downloads) （在撰写本文时的下载位置）下载这两个 JAR 文件。 我还将这些 JAR 以及本文中处理的所有其他代码文件一起放在我们的 [GitHub 存储库](https://github.com/JBTAdmin/Selenium)中。
让我们继续从 [https://code.google.com/archive/p/java2word/downloads](https://code.google.com/archive/p/java2word/downloads) （在撰写本文时的下载位置）下载这两个 JAR 文件。 我还将这些 JAR 以及本文中处理的所有其他代码文件一起放在我们的 [GitHub 仓库](https://github.com/JBTAdmin/Selenium)中。
## 步骤 2：
......@@ -241,4 +241,4 @@ public class WordDocWithScreenshotTest {
![Document Eclipse output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20810%20377'%3E%3C/svg%3E)
<noscript><img alt="Document Eclipse output" class="alignnone size-full wp-image-13504" height="377" src="img/cfe92b1c436c1f2d0946c238a4c772f1.png" width="810"/><p>在 Eclipse IDE 中，“JUnit”窗格清楚地显示了测试用例“<strong> WordDocWithScreenshotTest.java </strong>”已通过，并且控制台没有错误。 按预期打印“Word 文档创建成功”。</p><p>按照代码中的指定，屏幕快照将以上述格式的名称保存到“<strong> E：/ Selenium / screenshots </strong>”路径中。</p><p><img alt="Saved screenshots" class="alignnone size-full wp-image-13505" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/5_WordSavedScreenshots-1.jpg" height="239" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20389%20239'%3E%3C/svg%3E" width="389"/></p><noscript><img alt="Saved screenshots" class="alignnone size-full wp-image-13505" height="239" src="img/5c56b0f1090d7f365f904ce1cb7bc6d6.png" width="389"/><p>还将创建单词文档并将其保存在指定的位置“<strong> E：/ Selenium / </strong>”中。 该文件如下所示，</p><p><img alt="Created Word Document" class="alignnone size-full wp-image-13503" data-lazy-sizes="(max-width: 1005px) 100vw, 1005px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1.jpg 1005w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-300x185.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-768x473.jpg 768w" height="619" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201005%20619'%3E%3C/svg%3E" width="1005"/></p><noscript><img alt="Created Word Document" class="alignnone size-full wp-image-13503" height="619" sizes="(max-width: 1005px) 100vw, 1005px" src="img/c0e8c6605f52e31de7ba508ce15d0086.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1.jpg 1005w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-300x185.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-768x473.jpg 768w" width="1005"/><p>创建的 Word 文档，所有代码文件和 JAR 文件都放置在<a href="https://github.com/JBTAdmin/Selenium"> GitHub 存储库</a>中，以便于访问。 您可以为存储库加注星标和分支以方便使用。 请仔细阅读“README.md”文件以获取明确说明。</p><p>编码愉快！ 祝你今天愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10h-advanced-webdriver-sending-email-with-attachments/" title="10h. Advanced WebDriver – Sending email with attachments"> 10 小时。 高级 WebDriver – 发送带有附件的电子邮件</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="Document Eclipse output" class="alignnone size-full wp-image-13504" height="377" src="img/cfe92b1c436c1f2d0946c238a4c772f1.png" width="810"/><p>在 Eclipse IDE 中，“JUnit”窗格清楚地显示了测试用例“<strong> WordDocWithScreenshotTest.java </strong>”已通过，并且控制台没有错误。 按预期打印“Word 文档创建成功”。</p><p>按照代码中的指定，屏幕快照将以上述格式的名称保存到“<strong> E：/ Selenium / screenshots </strong>”路径中。</p><p><img alt="Saved screenshots" class="alignnone size-full wp-image-13505" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/5_WordSavedScreenshots-1.jpg" height="239" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20389%20239'%3E%3C/svg%3E" width="389"/></p><noscript><img alt="Saved screenshots" class="alignnone size-full wp-image-13505" height="239" src="img/5c56b0f1090d7f365f904ce1cb7bc6d6.png" width="389"/><p>还将创建单词文档并将其保存在指定的位置“<strong> E：/ Selenium / </strong>”中。 该文件如下所示，</p><p><img alt="Created Word Document" class="alignnone size-full wp-image-13503" data-lazy-sizes="(max-width: 1005px) 100vw, 1005px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1.jpg 1005w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-300x185.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-768x473.jpg 768w" height="619" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201005%20619'%3E%3C/svg%3E" width="1005"/></p><noscript><img alt="Created Word Document" class="alignnone size-full wp-image-13503" height="619" sizes="(max-width: 1005px) 100vw, 1005px" src="img/c0e8c6605f52e31de7ba508ce15d0086.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1.jpg 1005w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-300x185.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-768x473.jpg 768w" width="1005"/><p>创建的 Word 文档，所有代码文件和 JAR 文件都放置在<a href="https://github.com/JBTAdmin/Selenium"> GitHub 仓库</a>中，以便于访问。 您可以为仓库加注星标和分支以方便使用。 请仔细阅读“README.md”文件以获取明确说明。</p><p>编码愉快！ 祝你今天愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10h-advanced-webdriver-sending-email-with-attachments/" title="10h. Advanced WebDriver – Sending email with attachments"> 10 小时。 高级 WebDriver – 发送带有附件的电子邮件</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/138.md
浏览文件 @ 3b370fcb
......@@ -139,7 +139,7 @@ public class InvokeMail {
1. activation.jar
2. javax.mail-1.6.1.jar
我还将它们都放在了我们的 [**GitHub 存储库**](https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver/Sending%20Email)中，以及作为本文一部分处理的所有其他代码文件中。
我还将它们都放在了我们的 [**GitHub 仓库**](https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver/Sending%20Email)中，以及作为本文一部分处理的所有其他代码文件中。
将这些 JAR 添加到我们的项目构建路径中。 我们之前已经多次看到此程序，因此我不再重复（有关详细说明，请参阅此[文章](https://javabeginnerstutorial.com/selenium/9b-webdriver-eclipse-setup/)的步骤 3）。
......
docs/139.md
浏览文件 @ 3b370fcb
此差异已折叠。
docs/140.md
浏览文件 @ 3b370fcb
......@@ -16,7 +16,7 @@
## **步骤 2：**
将这些 JAR 添加到我们的项目构建路径中。 确保选择“`poi-x.xx`”，“`ooxml-lib`”和“`lib`”文件夹下的所有 JAR。 我还将这些以及其他所有代码文件都放在了我们的 [GitHub 存储库](https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver/Reading%20data%20from%20excel)中。
将这些 JAR 添加到我们的项目构建路径中。 确保选择“`poi-x.xx`”，“`ooxml-lib`”和“`lib`”文件夹下的所有 JAR。 我还将这些以及其他所有代码文件都放在了我们的 [GitHub 仓库](https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver/Reading%20data%20from%20excel)中。
我们之前已经多次看到这种添加 JAR 来构建路径过程的内容，因此我没有在重复它（有关详细说明，请参阅此[文章](https://javabeginnerstutorial.com/selenium/9b-webdriver-eclipse-setup/)的步骤 3）。
......
docs/141.md
浏览文件 @ 3b370fcb
......@@ -71,4 +71,4 @@
![download Apache Log4j](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20657%20634'%3E%3C/svg%3E)
<noscript><img alt="download Apache Log4j" class="alignnone size-full wp-image-14225" height="634" src="img/4d0bd0a2cc1db2cb7f03718ef5c12931.png" width="657"/><p>将下载文件夹的内容提取到特定位置。</p><h3>步骤 2：配置 Java 构建路径</h3><p>将 Log4j JAR 作为外部库添加到项目的构建路径。</p><p>让我们导航到本地计算机中提取下载的 JAR 的路径，并将其添加为外部 JAR。</p><p><img alt="JAR selection window" class="alignnone size-full wp-image-14226" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/2_JarSelection-1.jpg" height="318" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20502%20318'%3E%3C/svg%3E" width="502"/></p><noscript><img alt="JAR selection window" class="alignnone size-full wp-image-14226" height="318" src="img/c027190f02b422719b9633917ff29b9d.png" width="502"/><p>之前，我们已经多次看到此过程，因此，我不再重复（请参阅<a href="https://javabeginnerstutorial.com/selenium/9b-webdriver-eclipse-setup/">文章</a>的步骤 3）。</p><h3>步骤 3：建立必要的档案</h3><p>我们将创建 3 个文件。</p><p><strong> Log4j.properties </strong></p><li>右键单击“src”文件夹-&gt;新建-&gt;其他-&gt;常规-&gt;文件-&gt;下一页</li><li>提供“文件名”作为“Log4j.properties”，然后点击“完成”</li><p>结果看起来像这样，</p><p><img alt="Log4j.properties file creation" class="alignnone size-full wp-image-14227" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/3_property-file-creation.jpg" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20323%20186'%3E%3C/svg%3E" width="323"/></p><noscript><img alt="Log4j.properties file creation" class="alignnone size-full wp-image-14227" height="186" src="img/e27b7184646bb1e673729341bb77e0f8.png" width="323"/><p>我现在已经忽略了三个额外的程序包，因为我出于编码目的创建了它们。</p><p><strong>日志文件</strong></p><li>右键单击“src”文件夹-&gt;新建-&gt;其他-&gt;常规-&gt;文件夹-&gt;下一页</li><li>提供“文件夹名称”作为“资源”</li><li>右键点击“资源”文件夹并创建两个文件</li><li>将这些文件命名为“system.log”和“test.log”</li><ol><li><strong> system.log </strong> – 将具有系统生成的所有日志</li><li><strong> test.log </strong> – 将包含由于用户提供的手动命令而生成的所有日志</li></ol><p><img alt="Log files created" class="alignnone size-full wp-image-14228" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/4_log-files.jpg" height="341" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20275%20341'%3E%3C/svg%3E" width="275"/></p><noscript><img alt="Log files created" class="alignnone size-full wp-image-14228" height="341" src="img/7dbb8f2542d3154b6359132207b4d7b9.png" width="275"/><p>现在，所有环境都已准备就绪，我们可以使用 Log4j 进行一些实验并生成日志。 与往常一样，将 JAR 放置在 GitHub <a href="https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver">存储库</a>中。 让我们在即将发布的帖子中详细了解这一点。</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10l-advanced-webdriver-using-log4j-part-2/" title="10l. Advanced WebDriver – Using Log4j Part 2"> 10 升。 高级 WebDriver – 使用 Log4j 第 2 部分</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="download Apache Log4j" class="alignnone size-full wp-image-14225" height="634" src="img/4d0bd0a2cc1db2cb7f03718ef5c12931.png" width="657"/><p>将下载文件夹的内容提取到特定位置。</p><h3>步骤 2：配置 Java 构建路径</h3><p>将 Log4j JAR 作为外部库添加到项目的构建路径。</p><p>让我们导航到本地计算机中提取下载的 JAR 的路径，并将其添加为外部 JAR。</p><p><img alt="JAR selection window" class="alignnone size-full wp-image-14226" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/2_JarSelection-1.jpg" height="318" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20502%20318'%3E%3C/svg%3E" width="502"/></p><noscript><img alt="JAR selection window" class="alignnone size-full wp-image-14226" height="318" src="img/c027190f02b422719b9633917ff29b9d.png" width="502"/><p>之前，我们已经多次看到此过程，因此，我不再重复（请参阅<a href="https://javabeginnerstutorial.com/selenium/9b-webdriver-eclipse-setup/">文章</a>的步骤 3）。</p><h3>步骤 3：建立必要的档案</h3><p>我们将创建 3 个文件。</p><p><strong> Log4j.properties </strong></p><li>右键单击“src”文件夹-&gt;新建-&gt;其他-&gt;常规-&gt;文件-&gt;下一页</li><li>提供“文件名”作为“Log4j.properties”，然后点击“完成”</li><p>结果看起来像这样，</p><p><img alt="Log4j.properties file creation" class="alignnone size-full wp-image-14227" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/3_property-file-creation.jpg" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20323%20186'%3E%3C/svg%3E" width="323"/></p><noscript><img alt="Log4j.properties file creation" class="alignnone size-full wp-image-14227" height="186" src="img/e27b7184646bb1e673729341bb77e0f8.png" width="323"/><p>我现在已经忽略了三个额外的程序包，因为我出于编码目的创建了它们。</p><p><strong>日志文件</strong></p><li>右键单击“src”文件夹-&gt;新建-&gt;其他-&gt;常规-&gt;文件夹-&gt;下一页</li><li>提供“文件夹名称”作为“资源”</li><li>右键点击“资源”文件夹并创建两个文件</li><li>将这些文件命名为“system.log”和“test.log”</li><ol><li><strong> system.log </strong> – 将具有系统生成的所有日志</li><li><strong> test.log </strong> – 将包含由于用户提供的手动命令而生成的所有日志</li></ol><p><img alt="Log files created" class="alignnone size-full wp-image-14228" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/4_log-files.jpg" height="341" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20275%20341'%3E%3C/svg%3E" width="275"/></p><noscript><img alt="Log files created" class="alignnone size-full wp-image-14228" height="341" src="img/7dbb8f2542d3154b6359132207b4d7b9.png" width="275"/><p>现在，所有环境都已准备就绪，我们可以使用 Log4j 进行一些实验并生成日志。 与往常一样，将 JAR 放置在 GitHub <a href="https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver">仓库</a>中。 让我们在即将发布的帖子中详细了解这一点。</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10l-advanced-webdriver-using-log4j-part-2/" title="10l. Advanced WebDriver – Using Log4j Part 2"> 10 升。 高级 WebDriver – 使用 Log4j 第 2 部分</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/142.md
浏览文件 @ 3b370fcb
......@@ -181,4 +181,4 @@ Eclipse IDE 输出屏幕显示，
![JUnit Output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20635%20318'%3E%3C/svg%3E)
<noscript><img alt="JUnit Output" class="alignnone size-full wp-image-14235" height="318" src="img/3d95ae1c1e99ed4e996edb2f746e0831.png" width="635"/><li>system.log 和 test.log 文件都将按预期方式通过属性文件布局中指定的系统日志和带有时间戳的用户编码日志进行更新。</li><p><img alt="Generated Test.log file" class="alignnone size-full wp-image-14236" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/6_Test.log-file-1.jpg" height="188" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20608%20188'%3E%3C/svg%3E" width="608"/></p><noscript><img alt="Generated Test.log file" class="alignnone size-full wp-image-14236" height="188" src="img/63ba29fc17dd09ce494e16026d76132f.png" width="608"/><p>代码文件，日志文件和相关的 JAR 一如既往地放置在<a href="https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver"> GitHub 存储库</a>中。 我希望您现在已经了解了如何在 Selenium WebDriver 自动化的测试用例中利用流行的记录器之一。</p><p>祝你今天愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10m-advanced-webdriver-running-tests-in-headless-mode/" title="10m. Advanced WebDriver – Running tests in headless mode"> 10m。 Advanced WebDriver – 以无头模式运行测试</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="JUnit Output" class="alignnone size-full wp-image-14235" height="318" src="img/3d95ae1c1e99ed4e996edb2f746e0831.png" width="635"/><li>system.log 和 test.log 文件都将按预期方式通过属性文件布局中指定的系统日志和带有时间戳的用户编码日志进行更新。</li><p><img alt="Generated Test.log file" class="alignnone size-full wp-image-14236" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/6_Test.log-file-1.jpg" height="188" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20608%20188'%3E%3C/svg%3E" width="608"/></p><noscript><img alt="Generated Test.log file" class="alignnone size-full wp-image-14236" height="188" src="img/63ba29fc17dd09ce494e16026d76132f.png" width="608"/><p>代码文件，日志文件和相关的 JAR 一如既往地放置在<a href="https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver"> GitHub 仓库</a>中。 我希望您现在已经了解了如何在 Selenium WebDriver 自动化的测试用例中利用流行的记录器之一。</p><p>祝你今天愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10m-advanced-webdriver-running-tests-in-headless-mode/" title="10m. Advanced WebDriver – Running tests in headless mode"> 10m。 Advanced WebDriver – 以无头模式运行测试</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/146.md
浏览文件 @ 3b370fcb
......@@ -2,7 +2,7 @@
> 原文： [https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/](https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/)
嘿! 欢迎阅读关于 Vue 的另一篇有趣的文章！ 我们不仅要了解模板语法，还可以了解 Vue 的反应性。 这似乎就像我们之前的文章“[Hello World with Vue.js](https://javabeginnerstutorial.com/js/vue-js/1-hello-world-with-vue-js/) ”的继续。 因此，请确保您快速浏览一下，以了解我们到目前为止讨论的内容。 请参阅 [GitHub 存储库](https://github.com/JBTAdmin/vuejs)中的代码。
嘿! 欢迎阅读关于 Vue 的另一篇有趣的文章！ 我们不仅要了解模板语法，还可以了解 Vue 的反应性。 这似乎就像我们之前的文章“[Hello World with Vue.js](https://javabeginnerstutorial.com/js/vue-js/1-hello-world-with-vue-js/) ”的继续。 因此，请确保您快速浏览一下，以了解我们到目前为止讨论的内容。 请参阅 [GitHub 仓库](https://github.com/JBTAdmin/vuejs)中的代码。
还记得我们如何在 HTML 代码中使用两个花括号将数据呈现到 DOM 吗？ 让我们深入了解它，以了解 Vue 如何在引擎盖下工作。
......
docs/147.md
浏览文件 @ 3b370fcb
......@@ -71,4 +71,4 @@ var app = new Vue({
![without Vue Directives](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20784%20616'%3E%3C/svg%3E)
<noscript><img alt="without Vue Directives" class="alignnone size-full wp-image-13962" height="616" src="img/b61c39cadd45c6bced82a8933db8cda1.png" width="784"/><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>但是，在某些情况下，即使稍后更改属性，您可能仍要显示其初始值。 这是指令生效的地方。 在我们的场景中，我们希望显示<code>message</code>属性的初始值“嗨，大家好！” 作为标题。 因此，通过将指令 v-once 添加到<code>&lt;h1&gt;</code>元素，该元素内部的所有内容将仅呈现一次。 稍后通过<code>&lt;p&gt;</code>元素中的<code>greet()</code>方法对其进行更改时，将不会对其进行更新。</p><p><img alt="With Vue directives" class="alignnone size-full wp-image-13963" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/09/2_vOnce.jpg" height="591" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20788%20591'%3E%3C/svg%3E" width="788"/></p><noscript><img alt="With Vue directives" class="alignnone size-full wp-image-13963" height="591" src="img/86f997c82e065ce6c4461f4bd6bd5bfb.png" width="788"/><p>与往常一样，所有代码文件都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中找到。 请随意创建您自己的副本，以尝试使用<code>v-once</code>指令。 不要忘记让您的想象力疯狂。 再见！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/" title="4\. Vue Devtools Setup"> 4\. Vue Devtools 设置</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="without Vue Directives" class="alignnone size-full wp-image-13962" height="616" src="img/b61c39cadd45c6bced82a8933db8cda1.png" width="784"/><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>但是，在某些情况下，即使稍后更改属性，您可能仍要显示其初始值。 这是指令生效的地方。 在我们的场景中，我们希望显示<code>message</code>属性的初始值“嗨，大家好！” 作为标题。 因此，通过将指令 v-once 添加到<code>&lt;h1&gt;</code>元素，该元素内部的所有内容将仅呈现一次。 稍后通过<code>&lt;p&gt;</code>元素中的<code>greet()</code>方法对其进行更改时，将不会对其进行更新。</p><p><img alt="With Vue directives" class="alignnone size-full wp-image-13963" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/09/2_vOnce.jpg" height="591" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20788%20591'%3E%3C/svg%3E" width="788"/></p><noscript><img alt="With Vue directives" class="alignnone size-full wp-image-13963" height="591" src="img/86f997c82e065ce6c4461f4bd6bd5bfb.png" width="788"/><p>与往常一样，所有代码文件都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。 请随意创建您自己的副本，以尝试使用<code>v-once</code>指令。 不要忘记让您的想象力疯狂。 再见！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/" title="4\. Vue Devtools Setup"> 4\. Vue Devtools 设置</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/149.md
浏览文件 @ 3b370fcb
......@@ -14,4 +14,4 @@
![data binding raw HTML](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20995%20516'%3E%3C/svg%3E)
<noscript><img alt="data binding raw HTML" class="alignnone size-full wp-image-14050" height="516" sizes="(max-width: 995px) 100vw, 995px" src="img/70ef2d5460c92c8046ff872d1c287630.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/1_raw-html-as-text.jpg 995w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/1_raw-html-as-text-300x156.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/1_raw-html-as-text-768x398.jpg 768w" width="995"/><p>并不奇怪吗？ 整个 HTML 代码呈现为纯文本。 这就是模板语法的工作方式，并且这种行为可以防止任何第三方将不需要的代码注入您的网站（多么可怕？！）。 因此，切勿在用户无法控制的用户提供的内容上使用此功能。 因此，如果您真的相信提供 HTML 代码的源代码是安全的，并希望将其呈现给 DOM，请使用另一个指令<strong> v-html </strong>。</p><p><img alt="v-html" class="alignnone size-full wp-image-14051" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/2_raw-html-rendered-1.jpg" height="491" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20999%20491'%3E%3C/svg%3E" width="999"/></p><noscript><img alt="v-html" class="alignnone size-full wp-image-14051" height="491" src="img/6a0607653cf9dc089d2f8898879809a8.png" width="999"/><p>使用<strong> v-html </strong>指令会将<code>&lt;span&gt;</code>标记的内容替换为<code>vueLink</code>数据属性的值，并将其解释为纯 HTML。 因此，超链接以指定的绿色显示。</p><h2><strong>使用 JavaScript 表达式</strong></h2><p>双花括号以及显示纯文本还可以评估<strong> <em>单个</em> </strong> JavaScript 表达式。</p><p>请记住，<strong>仅是单个表达式</strong>。 不是语句，不是流控件，不是任何用户定义的全局变量！ 让我们来看一些例子</p><ol><li>可以始终在模板语法中访问“message”属性的值。 现在，我们可以对其应用任何可用的 JavaScript String 方法。</li></ol><pre><code class="language-javascript">{{ message.length }}</code></pre><ol start="2"><li>js 允许访问模板表达式中的几个全局对象，即 Math 和 Date。 小心，不允许访问用户定义的全局变量。</li></ol><pre><code class="language-javascript">{{ Math.PI }} {{ new Date() }}</code></pre><ol start="3"><li>流控制语句（如 if-else，for，while，do-while 等）将不起作用，因此剩下的唯一选择是使用三元表达式。 始终建议将复杂的逻辑放入我们将在以后的文章中详细讨论的方法中。</li></ol><pre><code class="language-javascript">{{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }}</code></pre><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>此外，如前所述，在模板语法内只能使用单个表达式。 即使是一个简单的表达式也无法使用，例如“让等级= 1”。</p><p>完整的代码如下，</p><h3>Index.html</h3><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;!-- text interpolations --&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;p&gt;For more info. on Vue, click {{ vueLink }}&lt;/p&gt; &lt;!-- raw HTML interpolation --&gt; &lt;p&gt;With v-html directive:&lt;/br&gt; For more info. on Vue, click &lt;span v-html="vueLink"&gt;&lt;/span&gt; &lt;/p&gt; &lt;!-- JavaScript expressions --&gt; &lt;p&gt; Length of the 'message' String: {{ message.length }} &lt;/br&gt; Value of PI: {{ Math.PI }} &lt;/br&gt; Today's date is: {{ new Date() }} &lt;/br&gt; Result of ternary expression is: {{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }} &lt;/br&gt; &lt;/p&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><h3>Index.js</h3><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi everyone!", vueLink: "&lt;a href='https://vuejs.org/' style='color:green'&gt;here&lt;/a&gt;" } });</code></pre><p>输出如下，</p><p><img alt="Using JavaScript expressions" class="alignnone size-full wp-image-14052" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/3_JS-expr.jpg" height="511" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201126%20511'%3E%3C/svg%3E" width="1126"/></p><noscript><img alt="Using JavaScript expressions" class="alignnone size-full wp-image-14052" height="511" src="img/b723c5b8f6cfc7058907ba787ddf98ee.png" width="1126"/><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中找到。</p><p>在我请假之前，让我先给您的大脑一个小任务。 我们无法在 HTML 属性中使用此模板/胡子语法。 您能想到其他选择吗？ 我相信你可以！</p><p>祝你今天愉快 ？</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/6-data-binding-p2/" title="6\. Data binding Part 2 (Attributes)"> 6.数据绑定第 2 部分（属性）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="data binding raw HTML" class="alignnone size-full wp-image-14050" height="516" sizes="(max-width: 995px) 100vw, 995px" src="img/70ef2d5460c92c8046ff872d1c287630.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/1_raw-html-as-text.jpg 995w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/1_raw-html-as-text-300x156.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/1_raw-html-as-text-768x398.jpg 768w" width="995"/><p>并不奇怪吗？ 整个 HTML 代码呈现为纯文本。 这就是模板语法的工作方式，并且这种行为可以防止任何第三方将不需要的代码注入您的网站（多么可怕？！）。 因此，切勿在用户无法控制的用户提供的内容上使用此功能。 因此，如果您真的相信提供 HTML 代码的源代码是安全的，并希望将其呈现给 DOM，请使用另一个指令<strong> v-html </strong>。</p><p><img alt="v-html" class="alignnone size-full wp-image-14051" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/2_raw-html-rendered-1.jpg" height="491" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20999%20491'%3E%3C/svg%3E" width="999"/></p><noscript><img alt="v-html" class="alignnone size-full wp-image-14051" height="491" src="img/6a0607653cf9dc089d2f8898879809a8.png" width="999"/><p>使用<strong> v-html </strong>指令会将<code>&lt;span&gt;</code>标记的内容替换为<code>vueLink</code>数据属性的值，并将其解释为纯 HTML。 因此，超链接以指定的绿色显示。</p><h2><strong>使用 JavaScript 表达式</strong></h2><p>双花括号以及显示纯文本还可以评估<strong> <em>单个</em> </strong> JavaScript 表达式。</p><p>请记住，<strong>仅是单个表达式</strong>。 不是语句，不是流控件，不是任何用户定义的全局变量！ 让我们来看一些例子</p><ol><li>可以始终在模板语法中访问“message”属性的值。 现在，我们可以对其应用任何可用的 JavaScript String 方法。</li></ol><pre><code class="language-javascript">{{ message.length }}</code></pre><ol start="2"><li>js 允许访问模板表达式中的几个全局对象，即 Math 和 Date。 小心，不允许访问用户定义的全局变量。</li></ol><pre><code class="language-javascript">{{ Math.PI }} {{ new Date() }}</code></pre><ol start="3"><li>流控制语句（如 if-else，for，while，do-while 等）将不起作用，因此剩下的唯一选择是使用三元表达式。 始终建议将复杂的逻辑放入我们将在以后的文章中详细讨论的方法中。</li></ol><pre><code class="language-javascript">{{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }}</code></pre><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>此外，如前所述，在模板语法内只能使用单个表达式。 即使是一个简单的表达式也无法使用，例如“让等级= 1”。</p><p>完整的代码如下，</p><h3>Index.html</h3><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;!-- text interpolations --&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;p&gt;For more info. on Vue, click {{ vueLink }}&lt;/p&gt; &lt;!-- raw HTML interpolation --&gt; &lt;p&gt;With v-html directive:&lt;/br&gt; For more info. on Vue, click &lt;span v-html="vueLink"&gt;&lt;/span&gt; &lt;/p&gt; &lt;!-- JavaScript expressions --&gt; &lt;p&gt; Length of the 'message' String: {{ message.length }} &lt;/br&gt; Value of PI: {{ Math.PI }} &lt;/br&gt; Today's date is: {{ new Date() }} &lt;/br&gt; Result of ternary expression is: {{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }} &lt;/br&gt; &lt;/p&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><h3>Index.js</h3><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi everyone!", vueLink: "&lt;a href='https://vuejs.org/' style='color:green'&gt;here&lt;/a&gt;" } });</code></pre><p>输出如下，</p><p><img alt="Using JavaScript expressions" class="alignnone size-full wp-image-14052" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/3_JS-expr.jpg" height="511" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201126%20511'%3E%3C/svg%3E" width="1126"/></p><noscript><img alt="Using JavaScript expressions" class="alignnone size-full wp-image-14052" height="511" src="img/b723c5b8f6cfc7058907ba787ddf98ee.png" width="1126"/><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p>在我请假之前，让我先给您的大脑一个小任务。 我们无法在 HTML 属性中使用此模板/胡子语法。 您能想到其他选择吗？ 我相信你可以！</p><p>祝你今天愉快 ？</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/6-data-binding-p2/" title="6\. Data binding Part 2 (Attributes)"> 6.数据绑定第 2 部分（属性）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/150.md
浏览文件 @ 3b370fcb
......@@ -8,4 +8,4 @@
![Attribute binding with template syntax](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201043%20591'%3E%3C/svg%3E)
<noscript><img alt="Attribute binding with template syntax" class="alignnone size-full wp-image-14067" height="591" src="img/1ed51c59dd82a5d6011f7e594f0eb2cc.png" width="1043"/><p>失望了吗 这是发生了什么事。 正如预期的那样，“Vue 官方网站”文本已显示为超链接。 单击它会打开一个新选项卡，因为我们使用了<code>_blank</code>作为目标（这里没什么疯狂的）。 现在，查看地址栏中的 URL。 不会像在 Vue 实例的数据对象中指定的那样导航到<a href="https://vuejs.org/v2/guide/index.html"> https://vuejs.org/v2/guide/index.html </a>，而是处理<code>href</code>属性的双引号内的值 作为字符串并解析为 URL <code>“{{ vueLink }}”</code>。 这就是普通 HTML <code>href</code>属性的工作方式，这就是您在新打开的标签页的地址栏中看到的内容。 显然，绑定从未发生过。</p><p>因此，这就是 Vue 的工作方式。 我们不能将模板语法/大括号括起来用于 HTML 属性绑定。 但是，如果我们仍然想将某些东西动态绑定到属性上怎么办？ 不要担心！ Vue 附带了另一个用于此目的的指令<strong> v-bind </strong>。 只要我们花时间寻找指令，指令就在我们周围。</p><p>在这种情况下，使用 v-bind 指令告诉 Vue.js 将 data 属性的值绑定到该指令后面的属性名称。</p><h3><strong>语法，</strong></h3><p><code data-enlighter-language="html">v-bind:html_attribute=”data_to_be_bound”</code></p><h3><strong>示例，</strong></h3><p><code data-enlighter-language="html">v-bind:href="vueLink"</code></p><p>让我们尝试执行此代码并检查输出。</p><p><img alt="Attribute v-bind" class="alignnone size-full wp-image-14068" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/5_v-bind-href-1.jpg" height="589" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201061%20589'%3E%3C/svg%3E" width="1061"/></p><noscript><img alt="Attribute v-bind" class="alignnone size-full wp-image-14068" height="589" src="img/1c1eaeb83683a2a7a6da93a84bae0124.png" width="1061"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p>奇迹般有效！ 单击呈现的链接将打开一个新标签，该标签具有预期的指定链接。</p><h2><strong>其他示例场景</strong></h2><ol><li>在网页上动态显示图片，即，当在 Vue 实例的数据对象中更改图片位置时，应该在网页上自动更新图片。</li><li>根据绑定到该字段的数据值启用或禁用输入字段。</li></ol><p>让我们一次处理一种情况。 到最后，您将对 Vue.js 表现出超出预期的表现。</p><h3>1.动态显示图像</h3><p>让我们将 Vue 的徽标图像放置在与代码相同的文件夹中，并将其在数据对象中的位置指定为<code>logo</code>。 将<code>&lt;img&gt;</code>标记的<code>src</code>属性绑定到<code>logo</code>属性的值。</p><pre><code class="language-html">&lt;img v-bind:src="logo" width="70" height="50"/&gt;</code></pre><p>图像将按预期渲染到 DOM。 将您的帽子戴上戒指，并尝试更改图像位置是否动态更新渲染的图像。 如果您在执行此操作时遇到任何挑战，请在评论部分给我大喊。 输出如下，</p><p><img alt="v-bind image" class="alignnone size-full wp-image-14069" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/6_v-bind-img.jpg" height="497" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20833%20497'%3E%3C/svg%3E" width="833"/></p><noscript><img alt="v-bind image" class="alignnone size-full wp-image-14069" height="497" src="img/68590a95dc9a52eaf5e90bf9aeee24f6.png" width="833"/><h3>2.根据绑定的值启用或禁用输入字段</h3><p>是时候做同样的歌舞了！</p><p>在 Vue 实例的数据对象中，让我们拥有<code>“isInputDisabled”</code>属性，并将其值设置为<code>true</code></p><pre><code class="language-javascript">isInputDisabled: true</code></pre><p>让我们将其绑定到输入标签的 disable 属性。</p><pre><code class="language-html">&lt;input v-bind:disabled="isInputDisabled"/&gt;</code></pre><p>这会将禁用的属性绑定到所提到的属性的值，并禁用输入字段。 使用 Chrome 开发者工具检查该元素会显示其相应的 HTML 代码，如下所示，</p><p><img alt="v-bind input disabled" class="alignnone size-full wp-image-14070" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/7_v-bind-disabled-input-1.jpg" height="491" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20379%20491'%3E%3C/svg%3E" width="379"/></p><noscript><img alt="v-bind input disabled" class="alignnone size-full wp-image-14070" height="491" src="img/1360c77ec1d6e0f9343d6ac614a06dd7.png" width="379"/><p>现在让我们将<code>“isInputDisabled”</code>的值更改为<code>false</code>。</p><pre><code class="language-javascript">isInputDisabled: false</code></pre><p>有趣的是，如果禁用的属性值为<code>false</code>，<code>null</code>或<code>undefined</code>，则甚至不包含在呈现的<code>&lt;input&gt;</code>元素中（使用开发人员工具检查该元素）。</p><p><img alt="v-bind input enabled" class="alignnone size-full wp-image-14063" data-lazy-sizes="(max-width: 368px) 100vw, 368px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input.jpg 368w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input-243x300.jpg 243w" height="454" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20368%20454'%3E%3C/svg%3E" width="368"/></p><noscript><img alt="v-bind input enabled" class="alignnone size-full wp-image-14063" height="454" sizes="(max-width: 368px) 100vw, 368px" src="img/8dd45bfd613195974e521992d039b42a.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input.jpg 368w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input-243x300.jpg 243w" width="368"/><p>完整的代码如下，</p><h3>Index.html</h3><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;!-- text interpolations --&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;p&gt; &lt;input v-bind:disabled="isInputDisabled"/&gt; &lt;/p&gt; &lt;div&gt; &lt;img v-bind:src="logo" width="70" height="50"/&gt; &lt;br/&gt; &lt;a v-bind:href="vueLink" target="_blank"&gt;Vue official website&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><h3>Index.js</h3><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi", isInputDisabled: false, logo: "vueLogo.png", vueLink: "https://vuejs.org/v2/guide/index.html" } });</code></pre><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中找到。</p><p>启动您喜欢的 IDE，并编写一些自己的方案！ 如有任何疑问，请随时在“评论”部分中进行提问。 另一个有趣的概念很快见！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/" title="7\. Conditional rendering Part 1 (v-if, v-else, v-else-if)"> 7.条件渲染第 1 部分（v-if，v-else，v-else-if）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="Attribute binding with template syntax" class="alignnone size-full wp-image-14067" height="591" src="img/1ed51c59dd82a5d6011f7e594f0eb2cc.png" width="1043"/><p>失望了吗 这是发生了什么事。 正如预期的那样，“Vue 官方网站”文本已显示为超链接。 单击它会打开一个新选项卡，因为我们使用了<code>_blank</code>作为目标（这里没什么疯狂的）。 现在，查看地址栏中的 URL。 不会像在 Vue 实例的数据对象中指定的那样导航到<a href="https://vuejs.org/v2/guide/index.html"> https://vuejs.org/v2/guide/index.html </a>，而是处理<code>href</code>属性的双引号内的值 作为字符串并解析为 URL <code>“{{ vueLink }}”</code>。 这就是普通 HTML <code>href</code>属性的工作方式，这就是您在新打开的标签页的地址栏中看到的内容。 显然，绑定从未发生过。</p><p>因此，这就是 Vue 的工作方式。 我们不能将模板语法/大括号括起来用于 HTML 属性绑定。 但是，如果我们仍然想将某些东西动态绑定到属性上怎么办？ 不要担心！ Vue 附带了另一个用于此目的的指令<strong> v-bind </strong>。 只要我们花时间寻找指令，指令就在我们周围。</p><p>在这种情况下，使用 v-bind 指令告诉 Vue.js 将 data 属性的值绑定到该指令后面的属性名称。</p><h3><strong>语法，</strong></h3><p><code data-enlighter-language="html">v-bind:html_attribute=”data_to_be_bound”</code></p><h3><strong>示例，</strong></h3><p><code data-enlighter-language="html">v-bind:href="vueLink"</code></p><p>让我们尝试执行此代码并检查输出。</p><p><img alt="Attribute v-bind" class="alignnone size-full wp-image-14068" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/5_v-bind-href-1.jpg" height="589" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201061%20589'%3E%3C/svg%3E" width="1061"/></p><noscript><img alt="Attribute v-bind" class="alignnone size-full wp-image-14068" height="589" src="img/1c1eaeb83683a2a7a6da93a84bae0124.png" width="1061"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p>奇迹般有效！ 单击呈现的链接将打开一个新标签，该标签具有预期的指定链接。</p><h2><strong>其他示例场景</strong></h2><ol><li>在网页上动态显示图片，即，当在 Vue 实例的数据对象中更改图片位置时，应该在网页上自动更新图片。</li><li>根据绑定到该字段的数据值启用或禁用输入字段。</li></ol><p>让我们一次处理一种情况。 到最后，您将对 Vue.js 表现出超出预期的表现。</p><h3>1.动态显示图像</h3><p>让我们将 Vue 的徽标图像放置在与代码相同的文件夹中，并将其在数据对象中的位置指定为<code>logo</code>。 将<code>&lt;img&gt;</code>标记的<code>src</code>属性绑定到<code>logo</code>属性的值。</p><pre><code class="language-html">&lt;img v-bind:src="logo" width="70" height="50"/&gt;</code></pre><p>图像将按预期渲染到 DOM。 将您的帽子戴上戒指，并尝试更改图像位置是否动态更新渲染的图像。 如果您在执行此操作时遇到任何挑战，请在评论部分给我大喊。 输出如下，</p><p><img alt="v-bind image" class="alignnone size-full wp-image-14069" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/6_v-bind-img.jpg" height="497" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20833%20497'%3E%3C/svg%3E" width="833"/></p><noscript><img alt="v-bind image" class="alignnone size-full wp-image-14069" height="497" src="img/68590a95dc9a52eaf5e90bf9aeee24f6.png" width="833"/><h3>2.根据绑定的值启用或禁用输入字段</h3><p>是时候做同样的歌舞了！</p><p>在 Vue 实例的数据对象中，让我们拥有<code>“isInputDisabled”</code>属性，并将其值设置为<code>true</code></p><pre><code class="language-javascript">isInputDisabled: true</code></pre><p>让我们将其绑定到输入标签的 disable 属性。</p><pre><code class="language-html">&lt;input v-bind:disabled="isInputDisabled"/&gt;</code></pre><p>这会将禁用的属性绑定到所提到的属性的值，并禁用输入字段。 使用 Chrome 开发者工具检查该元素会显示其相应的 HTML 代码，如下所示，</p><p><img alt="v-bind input disabled" class="alignnone size-full wp-image-14070" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/7_v-bind-disabled-input-1.jpg" height="491" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20379%20491'%3E%3C/svg%3E" width="379"/></p><noscript><img alt="v-bind input disabled" class="alignnone size-full wp-image-14070" height="491" src="img/1360c77ec1d6e0f9343d6ac614a06dd7.png" width="379"/><p>现在让我们将<code>“isInputDisabled”</code>的值更改为<code>false</code>。</p><pre><code class="language-javascript">isInputDisabled: false</code></pre><p>有趣的是，如果禁用的属性值为<code>false</code>，<code>null</code>或<code>undefined</code>，则甚至不包含在呈现的<code>&lt;input&gt;</code>元素中（使用开发人员工具检查该元素）。</p><p><img alt="v-bind input enabled" class="alignnone size-full wp-image-14063" data-lazy-sizes="(max-width: 368px) 100vw, 368px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input.jpg 368w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input-243x300.jpg 243w" height="454" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20368%20454'%3E%3C/svg%3E" width="368"/></p><noscript><img alt="v-bind input enabled" class="alignnone size-full wp-image-14063" height="454" sizes="(max-width: 368px) 100vw, 368px" src="img/8dd45bfd613195974e521992d039b42a.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input.jpg 368w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input-243x300.jpg 243w" width="368"/><p>完整的代码如下，</p><h3>Index.html</h3><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;!-- text interpolations --&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;p&gt; &lt;input v-bind:disabled="isInputDisabled"/&gt; &lt;/p&gt; &lt;div&gt; &lt;img v-bind:src="logo" width="70" height="50"/&gt; &lt;br/&gt; &lt;a v-bind:href="vueLink" target="_blank"&gt;Vue official website&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><h3>Index.js</h3><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi", isInputDisabled: false, logo: "vueLogo.png", vueLink: "https://vuejs.org/v2/guide/index.html" } });</code></pre><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p>启动您喜欢的 IDE，并编写一些自己的方案！ 如有任何疑问，请随时在“评论”部分中进行提问。 另一个有趣的概念很快见！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/" title="7\. Conditional rendering Part 1 (v-if, v-else, v-else-if)"> 7.条件渲染第 1 部分（v-if，v-else，v-else-if）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/151.md
浏览文件 @ 3b370fcb
......@@ -10,4 +10,4 @@ Vue **指令**再来一次！ 在这方面，我们有`v-if`，`v-else`和`v-els
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20599%20507'%3E%3C/svg%3E)
<noscript><img alt="" class="alignnone size-full wp-image-14079" height="507" sizes="(max-width: 599px) 100vw, 599px" src="img/14aaafae94bb48d942bd3f553d948bfd.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_Without-directives-1.jpg 599w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_Without-directives-1-300x254.jpg 300w" width="599"/><h2><strong> 1\. v-if 指令</strong></h2><p>使用<code>v-if</code>指令的语法如下：</p><pre><code class="language-html">&lt;HTML-tag v-if=”condition or expression that evaluates to true or false”&gt;</code></pre><p>如果条件为真/评估为真，则将渲染标签。</p><p>让我们向 Vue 实例的数据对象添加<code>display</code>属性，并为其赋予<code>false</code>值。</p><pre><code class="language-javascript">data: { message: "Hi", display: false } </code></pre><p>现在，将<code>v-if</code>指令添加到第一段标签中，并指定<code>display</code>条件，基于该条件，将不显示标签。</p><pre><code class="language-html">&lt;p v-if="display"&gt;Display evaluates to true&lt;/p&gt;</code></pre><p>由于<code>display</code>的值现在设置为<code>false</code>，因此不会呈现带有文本“<strong>显示评估为真</strong>”的第一个<code>&lt;p&gt;</code>标签。</p><p><img alt="v-if false condition" class="alignnone size-full wp-image-14081" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_v-if-false.jpg" height="507" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20666%20507'%3E%3C/svg%3E" width="666"/></p><noscript><img alt="v-if false condition" class="alignnone size-full wp-image-14081" height="507" src="img/683e241dceed1bc821e64308c0558eb1.png" width="666"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p>将<code>display</code>值更改为<code>true</code>将呈现第一个<code>&lt;p&gt;</code>标签的内容。</p><p><img alt="conditional rendering v-if" class="alignnone size-full wp-image-14080" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_v-if-true.jpg" height="508" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20670%20508'%3E%3C/svg%3E" width="670"/></p><noscript><img alt="conditional rendering v-if" class="alignnone size-full wp-image-14080" height="508" src="img/b81014dd6939b1699e77e2dc0eef84b9.png" width="670"/><h2><strong> 2\. v-else 指令</strong></h2><p>假设您要在显示为<code>true</code>时显示第一个<code>&lt;p&gt;</code>标签，并在显示结果为<code>false</code>时显示第二个<code>&lt;p&gt;</code>标签。 在这种情况下，我们可以使用<code>v-else</code>指令。 它类似于<code>else</code>块。</p><pre><code class="language-html">&lt;p v-if="display"&gt;Display evaluates to true&lt;/p&gt; &lt;p v-else&gt;You always get to see me :)&lt;/p&gt;</code></pre><p>将<code>display</code>设为<code>true</code>时，将在<code>v-if</code>指令的条件评估为<code>true</code>的情况下呈现第一个<code>&lt;p&gt;</code>标签。</p><p><img alt="v-else true" class="alignnone size-full wp-image-14082" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-else-true-1.jpg" height="501" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20653%20501'%3E%3C/svg%3E" width="653"/></p><noscript><img alt="v-else true" class="alignnone size-full wp-image-14082" height="501" src="img/7d0940f1b5db61e3875cb2e2263d9f58.png" width="653"/><p>将<code>display</code>更改为<code>false</code>只会使用<code>v-else</code>伪指令呈现第二个<code>&lt;p&gt;</code>标签，如下所示，</p><p><img alt="v-else false condition" class="alignnone size-full wp-image-14083" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/5_v-else-false-1.jpg" height="502" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20663%20502'%3E%3C/svg%3E" width="663"/></p><noscript><img alt="v-else false condition" class="alignnone size-full wp-image-14083" height="502" src="img/0f65cbd6fe9e24b6e96377776a4ac52f.png" width="663"/><p><strong> <em>注意：</em> </strong> <em>具有<code>v-else</code>指令的 HTML 元素必须紧随具有<code>v-if</code>的元素。 否则，<code>v-else</code>元素将不会被识别。 换句话说，不要在<code>v-if</code>元素和<code>v-else</code>元素之间添加任何元素。 </em></p><p>可以在<code>&lt;div&gt;</code>，<code>&lt;template&gt;</code>等帮助下将这些指令添加到单个 HTML 元素或元素块中。考虑一种情况，您希望根据条件显示错误消息。 在这种情况下<code>if-else</code>块会派上用场。</p><h2><strong> 3\. v-else-if 指令</strong></h2><p>它也与<code>v-if</code>元素一起使用。 该指令充当“<strong> else-if </strong>”条件。 与其他任何编程语言一样，它可以链接多次。</p><p>让我们向数据对象添加<code>val</code>属性，并为其提供数值。</p><pre><code class="language-javascript">data: { message: "Hi", val: 5 }</code></pre><p>将<code>v-if</code>，<code>v-else-if</code>和<code>v-else</code>伪指令添加到三个<code>&lt;p&gt;</code>标签并添加条件。</p><pre><code class="language-html">&lt;p v-if="val &lt; 10"&gt;Val is less than 10&lt;/p&gt; &lt;p v-else-if="val &gt; 10 &amp;&amp; val &lt; 20"&gt;val is between 10 and 20&lt;/p&gt; &lt;p v-else&gt;Pretty high val!!&lt;/p&gt;</code></pre><p>现在，让我们更改<code>val</code>属性的值，并查看输出如何变化。</p><p>首先，将<code>val</code>设为<code>5</code>。 由于它小于 10，因此<code>v-if</code>条件评估为<code>true</code>并被渲染。</p><p><img alt="v-else-if first expression" class="alignnone size-full wp-image-14084" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/6_v-else-if-first-1.jpg" height="504" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20728%20504'%3E%3C/svg%3E" width="728"/></p><noscript><img alt="v-else-if first expression" class="alignnone size-full wp-image-14084" height="504" src="img/cb9ed33f1627c5ef3a74aed8e5c6292f.png" width="728"/><p>现在将<code>val</code>更改为<code>15</code>。 <code>v-else-if</code>条件评估为<code>true</code>，并将其呈现到 DOM，如下所示。</p><p><img alt="v-else-if second expression" class="alignnone size-full wp-image-14085" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/7_v-else-if-second-1.jpg" height="502" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20771%20502'%3E%3C/svg%3E" width="771"/></p><noscript><img alt="v-else-if second expression" class="alignnone size-full wp-image-14085" height="502" src="img/29869b7f60d5b9f9d87511893e889e6b.png" width="771"/><p>将<code>val</code>更改为<code>90</code>会使<code>v-if</code>和<code>v-else-if</code>表达式均求值为<code>false</code>。 因此，将渲染<code>v-else</code>元素。</p><p><img alt="v-else-if third condtion" class="alignnone size-full wp-image-14086" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/8_v-else-if-third-1.jpg" height="501" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20731%20501'%3E%3C/svg%3E" width="731"/></p><noscript><img alt="v-else-if third condtion" class="alignnone size-full wp-image-14086" height="501" src="img/ba1ad56b6d8ad18480db60329a7bb779.png" width="731"/><p><strong> <em>注意：</em> </strong> <em>与 v-else 相似，带有 v-else-if 指令的元素必须紧随带有 v-if 或 v-else-if 的元素。 否则，将无法识别。 </em></p><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中找到。</p><p>是时候戴上开发人员的帽子，并尝试使用这些指令了！ 祝你今天愉快。</p><p> </p><p> </p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/" title="8\. Conditional rendering Part 2 (v-if and v-show)"> 8.条件渲染第 2 部分（v-if 和 v-show）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="" class="alignnone size-full wp-image-14079" height="507" sizes="(max-width: 599px) 100vw, 599px" src="img/14aaafae94bb48d942bd3f553d948bfd.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_Without-directives-1.jpg 599w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_Without-directives-1-300x254.jpg 300w" width="599"/><h2><strong> 1\. v-if 指令</strong></h2><p>使用<code>v-if</code>指令的语法如下：</p><pre><code class="language-html">&lt;HTML-tag v-if=”condition or expression that evaluates to true or false”&gt;</code></pre><p>如果条件为真/评估为真，则将渲染标签。</p><p>让我们向 Vue 实例的数据对象添加<code>display</code>属性，并为其赋予<code>false</code>值。</p><pre><code class="language-javascript">data: { message: "Hi", display: false } </code></pre><p>现在，将<code>v-if</code>指令添加到第一段标签中，并指定<code>display</code>条件，基于该条件，将不显示标签。</p><pre><code class="language-html">&lt;p v-if="display"&gt;Display evaluates to true&lt;/p&gt;</code></pre><p>由于<code>display</code>的值现在设置为<code>false</code>，因此不会呈现带有文本“<strong>显示评估为真</strong>”的第一个<code>&lt;p&gt;</code>标签。</p><p><img alt="v-if false condition" class="alignnone size-full wp-image-14081" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_v-if-false.jpg" height="507" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20666%20507'%3E%3C/svg%3E" width="666"/></p><noscript><img alt="v-if false condition" class="alignnone size-full wp-image-14081" height="507" src="img/683e241dceed1bc821e64308c0558eb1.png" width="666"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p>将<code>display</code>值更改为<code>true</code>将呈现第一个<code>&lt;p&gt;</code>标签的内容。</p><p><img alt="conditional rendering v-if" class="alignnone size-full wp-image-14080" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_v-if-true.jpg" height="508" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20670%20508'%3E%3C/svg%3E" width="670"/></p><noscript><img alt="conditional rendering v-if" class="alignnone size-full wp-image-14080" height="508" src="img/b81014dd6939b1699e77e2dc0eef84b9.png" width="670"/><h2><strong> 2\. v-else 指令</strong></h2><p>假设您要在显示为<code>true</code>时显示第一个<code>&lt;p&gt;</code>标签，并在显示结果为<code>false</code>时显示第二个<code>&lt;p&gt;</code>标签。 在这种情况下，我们可以使用<code>v-else</code>指令。 它类似于<code>else</code>块。</p><pre><code class="language-html">&lt;p v-if="display"&gt;Display evaluates to true&lt;/p&gt; &lt;p v-else&gt;You always get to see me :)&lt;/p&gt;</code></pre><p>将<code>display</code>设为<code>true</code>时，将在<code>v-if</code>指令的条件评估为<code>true</code>的情况下呈现第一个<code>&lt;p&gt;</code>标签。</p><p><img alt="v-else true" class="alignnone size-full wp-image-14082" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-else-true-1.jpg" height="501" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20653%20501'%3E%3C/svg%3E" width="653"/></p><noscript><img alt="v-else true" class="alignnone size-full wp-image-14082" height="501" src="img/7d0940f1b5db61e3875cb2e2263d9f58.png" width="653"/><p>将<code>display</code>更改为<code>false</code>只会使用<code>v-else</code>伪指令呈现第二个<code>&lt;p&gt;</code>标签，如下所示，</p><p><img alt="v-else false condition" class="alignnone size-full wp-image-14083" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/5_v-else-false-1.jpg" height="502" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20663%20502'%3E%3C/svg%3E" width="663"/></p><noscript><img alt="v-else false condition" class="alignnone size-full wp-image-14083" height="502" src="img/0f65cbd6fe9e24b6e96377776a4ac52f.png" width="663"/><p><strong> <em>注意：</em> </strong> <em>具有<code>v-else</code>指令的 HTML 元素必须紧随具有<code>v-if</code>的元素。 否则，<code>v-else</code>元素将不会被识别。 换句话说，不要在<code>v-if</code>元素和<code>v-else</code>元素之间添加任何元素。 </em></p><p>可以在<code>&lt;div&gt;</code>，<code>&lt;template&gt;</code>等帮助下将这些指令添加到单个 HTML 元素或元素块中。考虑一种情况，您希望根据条件显示错误消息。 在这种情况下<code>if-else</code>块会派上用场。</p><h2><strong> 3\. v-else-if 指令</strong></h2><p>它也与<code>v-if</code>元素一起使用。 该指令充当“<strong> else-if </strong>”条件。 与其他任何编程语言一样，它可以链接多次。</p><p>让我们向数据对象添加<code>val</code>属性，并为其提供数值。</p><pre><code class="language-javascript">data: { message: "Hi", val: 5 }</code></pre><p>将<code>v-if</code>，<code>v-else-if</code>和<code>v-else</code>伪指令添加到三个<code>&lt;p&gt;</code>标签并添加条件。</p><pre><code class="language-html">&lt;p v-if="val &lt; 10"&gt;Val is less than 10&lt;/p&gt; &lt;p v-else-if="val &gt; 10 &amp;&amp; val &lt; 20"&gt;val is between 10 and 20&lt;/p&gt; &lt;p v-else&gt;Pretty high val!!&lt;/p&gt;</code></pre><p>现在，让我们更改<code>val</code>属性的值，并查看输出如何变化。</p><p>首先，将<code>val</code>设为<code>5</code>。 由于它小于 10，因此<code>v-if</code>条件评估为<code>true</code>并被渲染。</p><p><img alt="v-else-if first expression" class="alignnone size-full wp-image-14084" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/6_v-else-if-first-1.jpg" height="504" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20728%20504'%3E%3C/svg%3E" width="728"/></p><noscript><img alt="v-else-if first expression" class="alignnone size-full wp-image-14084" height="504" src="img/cb9ed33f1627c5ef3a74aed8e5c6292f.png" width="728"/><p>现在将<code>val</code>更改为<code>15</code>。 <code>v-else-if</code>条件评估为<code>true</code>，并将其呈现到 DOM，如下所示。</p><p><img alt="v-else-if second expression" class="alignnone size-full wp-image-14085" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/7_v-else-if-second-1.jpg" height="502" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20771%20502'%3E%3C/svg%3E" width="771"/></p><noscript><img alt="v-else-if second expression" class="alignnone size-full wp-image-14085" height="502" src="img/29869b7f60d5b9f9d87511893e889e6b.png" width="771"/><p>将<code>val</code>更改为<code>90</code>会使<code>v-if</code>和<code>v-else-if</code>表达式均求值为<code>false</code>。 因此，将渲染<code>v-else</code>元素。</p><p><img alt="v-else-if third condtion" class="alignnone size-full wp-image-14086" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/8_v-else-if-third-1.jpg" height="501" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20731%20501'%3E%3C/svg%3E" width="731"/></p><noscript><img alt="v-else-if third condtion" class="alignnone size-full wp-image-14086" height="501" src="img/ba1ad56b6d8ad18480db60329a7bb779.png" width="731"/><p><strong> <em>注意：</em> </strong> <em>与 v-else 相似，带有 v-else-if 指令的元素必须紧随带有 v-if 或 v-else-if 的元素。 否则，将无法识别。 </em></p><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p>是时候戴上开发人员的帽子，并尝试使用这些指令了！ 祝你今天愉快。</p><p> </p><p> </p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/" title="8\. Conditional rendering Part 2 (v-if and v-show)"> 8.条件渲染第 2 部分（v-if 和 v-show）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/152.md
浏览文件 @ 3b370fcb
......@@ -34,4 +34,4 @@ data: {
![v-if template block](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20520%20532'%3E%3C/svg%3E)
<noscript><img alt="v-if template block" class="alignnone size-full wp-image-14093" height="532" src="img/6e38ac6963bfa766ebb74bd9aa67b5ba.png" width="520"/><p>这里有趣的是，如果您打开浏览器的<strong>开发人员工具</strong>（在 Chrome 浏览器中为<em> Ctrl + Shift + I </em>或<em> F12 </em>），然后在 在[元素]标签中，[<code>&lt;template&gt;</code>]元素将不包含[]。 它神奇地变成了<strong>不可见的</strong>！</p><p><img alt="developer tools" class="alignnone size-full wp-image-14094" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/10_p2-template-devTools.jpg" height="433" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20329%20433'%3E%3C/svg%3E" width="329"/></p><noscript><img alt="developer tools" class="alignnone size-full wp-image-14094" height="433" src="img/65cdd8584fd0a814f07052ca3cac578b.png" width="329"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p><strong> <em>注意：</em> </strong> <em>当<code>v-if</code>条件的值为<code>false</code>时，整个元素将从 DOM 中分离/删除。 当在我们的应用中不需要某个元素时，这通常是首选的行为，因为 DOM 中包含较少的元素会提高其性能。 </em></p><h2><strong> v-show 指令</strong></h2><p>作为开发人员的生活是如此变幻莫测！ 我们经常遇到需要频繁显示和隐藏元素的情况，即在网页上打开和关闭。 在这种情况下，最好使用<code>v-show</code>指令。</p><h3><strong>使用 v-show 的原因</strong></h3><p>该指令将确保 DOM 中始终存在<strong>元素。 将显示条件是否为真（评估为<code>true</code>）。 当条件评估为<code>false</code>时，该元素将通过自动添加 CSS 属性<code>display: none</code>来隐藏！ 听起来不有趣吗？</strong></p><p>这个概念可能很难缠住我们的头脑。 不用担心 我已经覆盖了你。 示例和屏幕截图可为我们提供帮助！</p><p>在前面的示例中，让我们将<code>v-show</code>指令添加到第二段标签中。</p><pre><code class="language-html">&lt;p v-show="display"&gt;How are you doing?&lt;/p&gt;</code></pre><p>当<code>display</code>为<code>true</code>时，<code>v-if</code>和<code>v-show</code>的行为类似。 浏览器输出和开发人员工具显示的结果与以前相同（请参阅“使用&lt;模板&gt;元素”标题下的“<strong>”下显示的两个图像）。 这里没有惊喜！</strong></p><p>让我们将<code>display</code>属性的值更改为<code>false</code>。 我们完整的代码如下所示：</p><h4><em> Index.js </em></h4><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { display: false } });</code></pre><h4><em> Index.html </em></h4><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;template v-if="display"&gt; &lt;h1&gt;Welcome&lt;/h1&gt; &lt;p&gt;Hi there!&lt;/p&gt; &lt;/template&gt; &lt;p v-show="display"&gt;How are you doing?&lt;/p&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p>顺便说一句，让我们继续查看浏览器的输出和开发人员工具的结果。</p><p><img alt="v-show hidden" class="alignnone size-full wp-image-14092" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/13_p2-v-show-invisible-1.jpg" height="501" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20652%20501'%3E%3C/svg%3E" width="652"/></p><noscript><img alt="v-show hidden" class="alignnone size-full wp-image-14092" height="501" src="img/af8367091b132c8d43446a93f6ede57b.png" width="652"/><p>不出所料，由于<code>v-if</code>和<code>v-show</code>条件都评估为<code>false</code>，因此没有任何内容呈现给网页。 这里也没有什么魔术。 但是，当我们打开开发人员工具并仔细查看“<strong> Elements </strong>”窗格时，有很多东西需要解码。</p><ol><li>具有<strong> v-if </strong>伪指令的<code>&lt;template&gt;</code>元素（包含<code>&lt;h1&gt;</code>和<code>&lt;p&gt;</code>元素）在评估为<code>false</code>时，已从 DOM 中删除了<strong>。</strong></li><li>仅具有<strong> v-show </strong>指令的第二个<code>&lt;p&gt;</code>元素<strong>使用 CSS <code>display</code>属性切换元素的可见性</strong>。 元素始终附加到 DOM，并且始终显示<strong>。 它只是变得不可见。 就这样！</strong></li></ol><h3><strong>当心！ </strong></h3><p>由于不支持将<code>v-show</code>与<code>&lt;template&gt;</code>元素一起使用，因此无法使用。 另外，它不适用于<code>v-else</code>（<code>if</code>和<code>else</code>是灵魂伴侣，你知道吗？！不是，<code>show</code>和<code>else</code>！）</p><h3><strong>那么，我应该使用 v-if 或 v-show 吗？ </strong></h3><p>好问题！ 如果您想<strong>切换</strong>，通常将<strong>经常切换为</strong>，因为 DOM 中始终存在该元素，请使用<strong> v-show </strong>，无论初始条件是否为<code>true</code>或<code>false</code>。 借助 CSS <code>display</code>属性只能切换可见性。 因此，初始渲染成本较高。</p><p>如果<strong>的状态<strong>的状态不经常更改/切换</strong>，尤其是在运行时，请使用<strong> v-if </strong>。 因为在这里附加和分离元素通常会变得昂贵。 另外，请记住，<code>v-if</code>是<strong>懒惰的</strong>，即，如果条件在初次渲染时评估为<code>false</code>，则直到条件变为<code>true</code>时，元素或块才会被渲染。 第一次。</strong></p><p>还在头上有雾吗？ 不用担心！ 练习是这里的关键。 抓住巫师的帽子和魔杖，尝试一些咒语（示例场景），您将掌握它！ 顺便说一下，以上讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中找到。</p><p>祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/" title="9\. Rendering Lists Part 1 (Iterating over arrays)"> 9.渲染列表第 1 部分（遍历数组）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="v-if template block" class="alignnone size-full wp-image-14093" height="532" src="img/6e38ac6963bfa766ebb74bd9aa67b5ba.png" width="520"/><p>这里有趣的是，如果您打开浏览器的<strong>开发人员工具</strong>（在 Chrome 浏览器中为<em> Ctrl + Shift + I </em>或<em> F12 </em>），然后在 在[元素]标签中，[<code>&lt;template&gt;</code>]元素将不包含[]。 它神奇地变成了<strong>不可见的</strong>！</p><p><img alt="developer tools" class="alignnone size-full wp-image-14094" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/10_p2-template-devTools.jpg" height="433" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20329%20433'%3E%3C/svg%3E" width="329"/></p><noscript><img alt="developer tools" class="alignnone size-full wp-image-14094" height="433" src="img/65cdd8584fd0a814f07052ca3cac578b.png" width="329"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p><strong> <em>注意：</em> </strong> <em>当<code>v-if</code>条件的值为<code>false</code>时，整个元素将从 DOM 中分离/删除。 当在我们的应用中不需要某个元素时，这通常是首选的行为，因为 DOM 中包含较少的元素会提高其性能。 </em></p><h2><strong> v-show 指令</strong></h2><p>作为开发人员的生活是如此变幻莫测！ 我们经常遇到需要频繁显示和隐藏元素的情况，即在网页上打开和关闭。 在这种情况下，最好使用<code>v-show</code>指令。</p><h3><strong>使用 v-show 的原因</strong></h3><p>该指令将确保 DOM 中始终存在<strong>元素。 将显示条件是否为真（评估为<code>true</code>）。 当条件评估为<code>false</code>时，该元素将通过自动添加 CSS 属性<code>display: none</code>来隐藏！ 听起来不有趣吗？</strong></p><p>这个概念可能很难缠住我们的头脑。 不用担心 我已经覆盖了你。 示例和屏幕截图可为我们提供帮助！</p><p>在前面的示例中，让我们将<code>v-show</code>指令添加到第二段标签中。</p><pre><code class="language-html">&lt;p v-show="display"&gt;How are you doing?&lt;/p&gt;</code></pre><p>当<code>display</code>为<code>true</code>时，<code>v-if</code>和<code>v-show</code>的行为类似。 浏览器输出和开发人员工具显示的结果与以前相同（请参阅“使用&lt;模板&gt;元素”标题下的“<strong>”下显示的两个图像）。 这里没有惊喜！</strong></p><p>让我们将<code>display</code>属性的值更改为<code>false</code>。 我们完整的代码如下所示：</p><h4><em> Index.js </em></h4><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { display: false } });</code></pre><h4><em> Index.html </em></h4><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;template v-if="display"&gt; &lt;h1&gt;Welcome&lt;/h1&gt; &lt;p&gt;Hi there!&lt;/p&gt; &lt;/template&gt; &lt;p v-show="display"&gt;How are you doing?&lt;/p&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p>顺便说一句，让我们继续查看浏览器的输出和开发人员工具的结果。</p><p><img alt="v-show hidden" class="alignnone size-full wp-image-14092" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/13_p2-v-show-invisible-1.jpg" height="501" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20652%20501'%3E%3C/svg%3E" width="652"/></p><noscript><img alt="v-show hidden" class="alignnone size-full wp-image-14092" height="501" src="img/af8367091b132c8d43446a93f6ede57b.png" width="652"/><p>不出所料，由于<code>v-if</code>和<code>v-show</code>条件都评估为<code>false</code>，因此没有任何内容呈现给网页。 这里也没有什么魔术。 但是，当我们打开开发人员工具并仔细查看“<strong> Elements </strong>”窗格时，有很多东西需要解码。</p><ol><li>具有<strong> v-if </strong>伪指令的<code>&lt;template&gt;</code>元素（包含<code>&lt;h1&gt;</code>和<code>&lt;p&gt;</code>元素）在评估为<code>false</code>时，已从 DOM 中删除了<strong>。</strong></li><li>仅具有<strong> v-show </strong>指令的第二个<code>&lt;p&gt;</code>元素<strong>使用 CSS <code>display</code>属性切换元素的可见性</strong>。 元素始终附加到 DOM，并且始终显示<strong>。 它只是变得不可见。 就这样！</strong></li></ol><h3><strong>当心！ </strong></h3><p>由于不支持将<code>v-show</code>与<code>&lt;template&gt;</code>元素一起使用，因此无法使用。 另外，它不适用于<code>v-else</code>（<code>if</code>和<code>else</code>是灵魂伴侣，你知道吗？！不是，<code>show</code>和<code>else</code>！）</p><h3><strong>那么，我应该使用 v-if 或 v-show 吗？ </strong></h3><p>好问题！ 如果您想<strong>切换</strong>，通常将<strong>经常切换为</strong>，因为 DOM 中始终存在该元素，请使用<strong> v-show </strong>，无论初始条件是否为<code>true</code>或<code>false</code>。 借助 CSS <code>display</code>属性只能切换可见性。 因此，初始渲染成本较高。</p><p>如果<strong>的状态<strong>的状态不经常更改/切换</strong>，尤其是在运行时，请使用<strong> v-if </strong>。 因为在这里附加和分离元素通常会变得昂贵。 另外，请记住，<code>v-if</code>是<strong>懒惰的</strong>，即，如果条件在初次渲染时评估为<code>false</code>，则直到条件变为<code>true</code>时，元素或块才会被渲染。 第一次。</strong></p><p>还在头上有雾吗？ 不用担心！ 练习是这里的关键。 抓住巫师的帽子和魔杖，尝试一些咒语（示例场景），您将掌握它！ 顺便说一下，以上讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p>祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/" title="9\. Rendering Lists Part 1 (Iterating over arrays)"> 9.渲染列表第 1 部分（遍历数组）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/153.md
浏览文件 @ 3b370fcb
......@@ -39,4 +39,4 @@ data: {
![v-for iterating over array](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20688%20448'%3E%3C/svg%3E)
<noscript><img alt="v-for iterating over array" class="alignnone size-full wp-image-14104" height="448" sizes="(max-width: 688px) 100vw, 688px" src="img/af9854cb19e36518d9d7c5b0266dc44b.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_v-for-array.jpg 688w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_v-for-array-300x195.jpg 300w" width="688"/><p>使用小胡子语法的另一种方法是使用<code>v-text</code>指令。 它将<code>greeting</code>设置为文本内容。</p><pre><code class="language-html">&lt;ul&gt; &lt;li v-for="greeting in greetings" v-text=greeting&gt;&lt;/li&gt; &lt;/ul&gt;</code></pre><p>将呈现相同的结果。</p><h2><strong> Vue 是反应性的！ </strong></h2><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>让我们沿着存储通道走一下。 我们了解到 Vue 的美丽在于其<a href="https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/">反应性</a>。</p><p><strong> <em>快速回顾：</em> </strong>使状态和视图保持同步。 换句话说，Vue 不仅在引用的 DOM 中将<strong>呈现为</strong>数据，而且无论何时在数据对象中更改其值，<strong>都会更新</strong>。</p><p>让我们再来看一次这种情况。</p><p>使用快捷方式<strong> F12 </strong>打开<em> Chrome DevTools </em>，然后点击“<strong> Vue </strong>”。 仅当您已遵循我们的教程系列并安装了<a href="https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/"> <strong> <em> Vue Devtools </em> </strong> Chrome 扩展</a>后，此面板才会出现。</p><p>由于我们没有使用任何全局变量来引用<code>index.js</code>文件中的 Vue 实例，因此默认情况下会将其保存到<code>$vm0</code>。 如下图所示，单击<code>&lt;Root&gt;</code>即可看到。 因此，让我们使用<code>$vm0</code>从开发者工具控制台访问 Vue 模型。</p><p><img alt="reactivity in vue" class="alignnone size-full wp-image-14105" data-lazy-sizes="(max-width: 372px) 100vw, 372px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0.jpg 372w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0-217x300.jpg 217w" height="514" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20372%20514'%3E%3C/svg%3E" width="372"/></p><noscript><img alt="reactivity in vue" class="alignnone size-full wp-image-14105" height="514" sizes="(max-width: 372px) 100vw, 372px" src="img/7de386b6e2a340c69e8afaf8d06fdc41.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0.jpg 372w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0-217x300.jpg 217w" width="372"/><p>让我们转到控制台，使用<code>push</code>方法向<code>greetings</code>数组添加一个问候，然后查看视图是否进行了动态更新（<em>神奇地</em>！）。</p><pre><code class="language-javascript">$vm0.greetings.push("namaste")</code></pre><p><img alt="v-for reactivity" class="alignnone size-full wp-image-14106" data-lazy-sizes="(max-width: 509px) 100vw, 509px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity.jpg 509w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity-300x242.jpg 300w" height="411" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20509%20411'%3E%3C/svg%3E" width="509"/></p><noscript><img alt="v-for reactivity" class="alignnone size-full wp-image-14106" height="411" sizes="(max-width: 509px) 100vw, 509px" src="img/fbdfc17ee75fab781a7335c339414c87.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity.jpg 509w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity-300x242.jpg 300w" width="509"/><p>这不是魔术吗？</p><h2><strong>访问当前数组项的索引</strong></h2><p>开发者的生活没有暂停按钮！ 我们期望完成意外的事情，例如访问数组项的索引及其内容。 我们知道如何使用 Vue 渲染数组元素，但是否也可以获得其索引？ 好吧，答案是肯定的！</p><p>语法与我们之前看到的非常相似，</p><pre><code class="language-html">&lt;div v-for="(greeting, index) in greetings"&gt;{{ index }}. {{ greeting}}&lt;/div&gt;</code></pre><p>我们必须引入一个括号并指定两个用逗号分隔的参数，可以选择它们的名称。 <strong>第一个</strong>参数是指数组元素 – 在我们的例子中是<code>greeting</code>。 <strong>第二个</strong>参数是可选的，它引用当前正在循环的项目的索引 – 在我们的示例中为<code>index</code>。 此<strong>订单</strong>是最重要的注意事项。 无论您使用什么名称，第一个始终是数组元素，第二个始终是 v-for 语法中的索引。 然后可以根据需要将其与代码中的这些名称一起使用。</p><p><img alt="v-for with index" class="alignnone size-full wp-image-14107" data-lazy-sizes="(max-width: 786px) 100vw, 786px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index.jpg 786w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-300x161.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-768x413.jpg 768w" height="423" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20786%20423'%3E%3C/svg%3E" width="786"/></p><noscript><img alt="v-for with index" class="alignnone size-full wp-image-14107" height="423" sizes="(max-width: 786px) 100vw, 786px" src="img/e2131f026f63f0feaafc6fd692278f3c.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index.jpg 786w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-300x161.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-768x413.jpg 768w" width="786"/><p>让我们看一下最终代码。</p><h3>Index.html</h3><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Greetings&lt;/h2&gt; &lt;!-- Iterating through array elements--&gt; &lt;ul&gt; &lt;li v-for="greeting in greetings" v-text=greeting&gt;&lt;/li&gt; &lt;/ul&gt; &lt;!-- Accessing array elements along with thier index --&gt; &lt;h2&gt;Greetings with Index&lt;/h2&gt; &lt;div v-for="(greeting, index) in greetings"&gt; {{ index }}. {{ greeting}} &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><h3>Index.js</h3><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { greetings: ["hi", "bonjour", "hola", "ciao"] } });</code></pre><p><a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中也提供了上面讨论的所有代码。 随意分叉存储库并进行一些实验。</p><p>在下一篇文章中，我们将研究如何使用 v-for 遍历对象。 在此之前，请继续练习！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/" title="10\. Rendering Lists Part 2 (Iterating over objects)"> 10.渲染列表第 2 部分（遍历对象）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="v-for iterating over array" class="alignnone size-full wp-image-14104" height="448" sizes="(max-width: 688px) 100vw, 688px" src="img/af9854cb19e36518d9d7c5b0266dc44b.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_v-for-array.jpg 688w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_v-for-array-300x195.jpg 300w" width="688"/><p>使用小胡子语法的另一种方法是使用<code>v-text</code>指令。 它将<code>greeting</code>设置为文本内容。</p><pre><code class="language-html">&lt;ul&gt; &lt;li v-for="greeting in greetings" v-text=greeting&gt;&lt;/li&gt; &lt;/ul&gt;</code></pre><p>将呈现相同的结果。</p><h2><strong> Vue 是反应性的！ </strong></h2><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>让我们沿着存储通道走一下。 我们了解到 Vue 的美丽在于其<a href="https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/">反应性</a>。</p><p><strong> <em>快速回顾：</em> </strong>使状态和视图保持同步。 换句话说，Vue 不仅在引用的 DOM 中将<strong>呈现为</strong>数据，而且无论何时在数据对象中更改其值，<strong>都会更新</strong>。</p><p>让我们再来看一次这种情况。</p><p>使用快捷方式<strong> F12 </strong>打开<em> Chrome DevTools </em>，然后点击“<strong> Vue </strong>”。 仅当您已遵循我们的教程系列并安装了<a href="https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/"> <strong> <em> Vue Devtools </em> </strong> Chrome 扩展</a>后，此面板才会出现。</p><p>由于我们没有使用任何全局变量来引用<code>index.js</code>文件中的 Vue 实例，因此默认情况下会将其保存到<code>$vm0</code>。 如下图所示，单击<code>&lt;Root&gt;</code>即可看到。 因此，让我们使用<code>$vm0</code>从开发者工具控制台访问 Vue 模型。</p><p><img alt="reactivity in vue" class="alignnone size-full wp-image-14105" data-lazy-sizes="(max-width: 372px) 100vw, 372px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0.jpg 372w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0-217x300.jpg 217w" height="514" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20372%20514'%3E%3C/svg%3E" width="372"/></p><noscript><img alt="reactivity in vue" class="alignnone size-full wp-image-14105" height="514" sizes="(max-width: 372px) 100vw, 372px" src="img/7de386b6e2a340c69e8afaf8d06fdc41.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0.jpg 372w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_vm0-217x300.jpg 217w" width="372"/><p>让我们转到控制台，使用<code>push</code>方法向<code>greetings</code>数组添加一个问候，然后查看视图是否进行了动态更新（<em>神奇地</em>！）。</p><pre><code class="language-javascript">$vm0.greetings.push("namaste")</code></pre><p><img alt="v-for reactivity" class="alignnone size-full wp-image-14106" data-lazy-sizes="(max-width: 509px) 100vw, 509px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity.jpg 509w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity-300x242.jpg 300w" height="411" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20509%20411'%3E%3C/svg%3E" width="509"/></p><noscript><img alt="v-for reactivity" class="alignnone size-full wp-image-14106" height="411" sizes="(max-width: 509px) 100vw, 509px" src="img/fbdfc17ee75fab781a7335c339414c87.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity.jpg 509w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_reactivity-300x242.jpg 300w" width="509"/><p>这不是魔术吗？</p><h2><strong>访问当前数组项的索引</strong></h2><p>开发者的生活没有暂停按钮！ 我们期望完成意外的事情，例如访问数组项的索引及其内容。 我们知道如何使用 Vue 渲染数组元素，但是否也可以获得其索引？ 好吧，答案是肯定的！</p><p>语法与我们之前看到的非常相似，</p><pre><code class="language-html">&lt;div v-for="(greeting, index) in greetings"&gt;{{ index }}. {{ greeting}}&lt;/div&gt;</code></pre><p>我们必须引入一个括号并指定两个用逗号分隔的参数，可以选择它们的名称。 <strong>第一个</strong>参数是指数组元素 – 在我们的例子中是<code>greeting</code>。 <strong>第二个</strong>参数是可选的，它引用当前正在循环的项目的索引 – 在我们的示例中为<code>index</code>。 此<strong>订单</strong>是最重要的注意事项。 无论您使用什么名称，第一个始终是数组元素，第二个始终是 v-for 语法中的索引。 然后可以根据需要将其与代码中的这些名称一起使用。</p><p><img alt="v-for with index" class="alignnone size-full wp-image-14107" data-lazy-sizes="(max-width: 786px) 100vw, 786px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index.jpg 786w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-300x161.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-768x413.jpg 768w" height="423" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20786%20423'%3E%3C/svg%3E" width="786"/></p><noscript><img alt="v-for with index" class="alignnone size-full wp-image-14107" height="423" sizes="(max-width: 786px) 100vw, 786px" src="img/e2131f026f63f0feaafc6fd692278f3c.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index.jpg 786w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-300x161.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-for-with-index-768x413.jpg 768w" width="786"/><p>让我们看一下最终代码。</p><h3>Index.html</h3><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Greetings&lt;/h2&gt; &lt;!-- Iterating through array elements--&gt; &lt;ul&gt; &lt;li v-for="greeting in greetings" v-text=greeting&gt;&lt;/li&gt; &lt;/ul&gt; &lt;!-- Accessing array elements along with thier index --&gt; &lt;h2&gt;Greetings with Index&lt;/h2&gt; &lt;div v-for="(greeting, index) in greetings"&gt; {{ index }}. {{ greeting}} &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><h3>Index.js</h3><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { greetings: ["hi", "bonjour", "hola", "ciao"] } });</code></pre><p><a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中也提供了上面讨论的所有代码。 随意分叉仓库并进行一些实验。</p><p>在下一篇文章中，我们将研究如何使用 v-for 遍历对象。 在此之前，请继续练习！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/" title="10\. Rendering Lists Part 2 (Iterating over objects)"> 10.渲染列表第 2 部分（遍历对象）</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/154.md
浏览文件 @ 3b370fcb
此差异已折叠。
docs/155.md
浏览文件 @ 3b370fcb
......@@ -64,4 +64,4 @@ var app = new Vue({
![click event](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20371%20267'%3E%3C/svg%3E)
<noscript><img alt="click event" class="alignnone size-full wp-image-14127" height="267" src="img/8d4cd9791d942ea8222e5da810bcf76c.png" width="371"/><p>凉！ 但是在实际的应用中，我们将要做的不仅仅是改变属性的文本。</p><p><strong> <em>令人费解的问题：</em> </strong>如何在<code>v-on</code>指令的双引号中放入复杂的 JavaScript 代码？</p><h3>使用方法</h3><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>上面提到的大脑拖曳问题的答案是使用方法。 就像<code>“data”</code>对象一样，我们的 Vue 实例有一个可选的<code>“methods”</code>对象，我们可以在其中定义所有方法。</p><p>现在，在<code>v-on</code>的双引号中，只需提及方法的名称，然后<strong>传递所需的参数</strong>（如果有）。 然后，在 Vue 实例的<code>“methods”</code>对象中定义方法，该方法将在每次<code>click</code>事件发生时触发。</p><h4>Index.html（代码段）</h4><pre><code class="language-html">&lt;button v-on:click="greet('howdy')"&gt;Say Hello&lt;/button&gt;</code></pre><h4>Index.js</h4><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi" }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; } } });</code></pre><p>您注意到<code>this</code>关键字的用法了吗？ 为了从 HTML 引用<code>data</code>对象的属性，我们可以直接使用它们，因为我们使用<code>‘el’</code>关键字将特定的 HTML 部分与 Vue 实例挂钩。 但是，在<code>methods</code>内部，我们必须使用<code>‘this’</code>关键字指向 Vue 实例，然后访问<code>data</code>对象的属性。</p><p><img alt="click event with method" class="alignnone size-full wp-image-14125" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_click-with-method.jpg" height="227" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20277%20227'%3E%3C/svg%3E" width="277"/></p><noscript><img alt="click event with method" class="alignnone size-full wp-image-14125" height="227" src="img/4226a5eb01a26b79a17a0465adc3b6af.png" width="277"/><p>单击该按钮，“说声你好”触发了<code>greet(‘howdy’)</code>方法，并且该方法中的代码被执行，从而向网页呈现“Howdy”。</p><h2>事件修饰符</h2><p>假设我们有一个名为“<strong>加 1 </strong>”的按钮和一个初始值为<code>zero</code>的计数器。 每次单击该按钮时，都会在现有的<code>counter</code>值上加 1 并将其打印到屏幕上。</p><p>现在让我们将想象力带入现实。 只需将<code>v-on</code>指令与<code>click</code>用作参数，即可触发将<code>counter</code>值加 1 的方法。</p><h4>Index.html (snippet)</h4><pre><code class="language-html">&lt;button v-on:click="addOne"&gt;Add 1&lt;/button&gt; &lt;p&gt; {{ counter }} &lt;/p&gt;</code></pre><h4>Index.js（代码段）</h4><pre><code class="language-javascript">methods: { addOne: function() { this.counter += 1; } }</code></pre><p><strong> <em>脑筋急转弯问题：</em> </strong> <em>如果我们只想先在<strong>首先在</strong> <code>click</code>上触发此方法，然后再不触发该方法怎么办？ </em></p><p>该问题的答案是 – <strong>事件修饰符</strong>！ 这些使我们能够<strong>修改事件</strong>的行为（正如其名称所暗示的）。</p><p><strong>用法：</strong>在事件名称（在本例中为<code>click</code>）之后，添加一个点并指定要使用的修饰符的名称。</p><pre><code class="language-html">&lt;button v-on:click.once="addOne"&gt;Add 1&lt;/button&gt;</code></pre><p>使用事件修饰符<code>.once</code>，<code>click</code>事件将仅触发一次。 这意味着，无论单击按钮多少次，只要将<code>counter</code>的值增加到 1，<code>“addOne”</code>方法将仅被称为<strong>。</strong></p><p><img alt=".once event modifier" class="alignnone size-full wp-image-14126" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_modifier-.once_-1.jpg" height="413" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20415%20413'%3E%3C/svg%3E" width="415"/></p><noscript><img alt=".once event modifier" class="alignnone size-full wp-image-14126" height="413" src="img/ecfa020fb75663bf3465034cc7d2100a.png" width="415"/><p>同样，其他可用的事件修饰符是</p><li>。停</li><li>。避免</li><li>。捕获</li><li>。自</li><li>。一旦</li><li>。被动</li><p>最常用的修饰符是<code>.stop</code>和<code>.prevent</code>，它们称为众所周知的<code>event.stopPropagation()</code>和<code>event.preventDefault()</code>方法。 这些是<a href="https://www.w3schools.com/jsref/obj_event.asp">本机事件对象</a>随附的方法。 这里与 Vue 无关。 Vue.js 只是提供了一种简单的方法，借助修饰符来处理此类常见事件详细信息，而不是在 Vue 实例的方法中显式指定这些事件方法（例如<code>event.preventDefault()</code>来取消事件）。</p><h3><strong>两个最常用修改器的快速刷新：</strong></h3><p>根据<code>stopPropagation()</code>事件方法，<code>.stop</code>修饰符将进一步停止事件的传播。</p><p>根据<code>preventDefault()</code>方法，<code>.prevent</code>修饰符将防止发生默认操作。 <code>.prevent</code>的最佳示例是将其与<code>Submit</code>按钮一起使用，以便触发提交事件时，它不会重新加载页面。</p><h3><strong>链接修饰符</strong></h3><p><em>警告：一开始可能会有些弯腰！ </em></p><p>Vue 让我们像这样，将这些修饰符一个接一个地链接，</p><pre><code class="language-html">v-on:click.self.prevent</code></pre><p>链接的<strong>顺序非常重要。 因为与每个修饰符相关的代码是按相同顺序生成的。</strong></p><p>例如，</p><pre><code class="language-html">&lt;a href="https://vuejs.org/" v-on:click.self.prevent target="_blank"&gt;Open Vue &lt;p&gt;Click me now&lt;/p&gt; &lt;/a&gt;</code></pre><p>使用<code>v-on:click.self.prevent</code>仅会阻止单击<code>&lt;a&gt;</code>元素本身，而不是单击其<code>child</code>元素。 好吧，我听到你说“请用英语”！ 换句话说，这意味着</p><li>单击<code>&lt;a&gt;</code>标签的<strong>“打开 Vue” </strong>将阻止打开<code>vuejs.org</code>页面</li><li>单击<strong>标签上的“立即单击我” </strong>，将在新标签中打开<code>vuejs.org</code>官方页面</li><p>相反，如果我们将链接修饰符的顺序更改为<code>v-on:click.prevent.self</code>，则将防止发生所有单击事件。</p><pre><code class="language-html">&lt;a href="https://vuejs.org/" v-on:click.prevent.self target="_blank"&gt;Open Vue &lt;p&gt;Click me now&lt;/p&gt; &lt;/a&gt;</code></pre><p>单击<code>&lt;a&gt;</code>的<strong>“打开 Vue” </strong>和<code>&lt;p&gt;</code>的<strong>“立即单击我” </strong>都不会打开<code>vuejs.org</code>（换句话说，它无法打开 ）。</p><p>现在，让我们看一下到目前为止处理的完整代码，</p><p>index.html</p><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;!-- Listening to click event with v-on directive --&gt; &lt;button v-on:click="greet('howdy')"&gt;Say Hello&lt;/button&gt; &lt;p&gt; {{ message }} &lt;/p&gt; &lt;h2&gt;Event Modifiers&lt;/h2&gt; &lt;!-- Using .once to modify click event --&gt; &lt;button v-on:click.once="addOne"&gt;Add 1&lt;/button&gt; &lt;p&gt; {{ counter }} &lt;/p&gt; &lt;!-- chaining event modifiers --&gt; &lt;a href="https://vuejs.org/" v-on:click.prevent.self target="_blank"&gt;Open Vue &lt;p&gt;Click me now&lt;/p&gt; &lt;/a&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p>index.js</p><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi", counter: 0 }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; }, // another way to define methods before es6 addOne: function() { this.counter += 1; } } });</code></pre><p>我知道今天有很多事情要消化。 上面讨论的所有代码以及不言自明的注释在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中可用。 慢慢来，我很快就会回来讨论键盘和其他鼠标 DOM 事件。</p><p>祝你有个美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/12-listening-to-keyboard-and-mouse-events/" title="12\. Listening to keyboard and mouse events"> 12.侦听键盘和鼠标事件</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="click event" class="alignnone size-full wp-image-14127" height="267" src="img/8d4cd9791d942ea8222e5da810bcf76c.png" width="371"/><p>凉！ 但是在实际的应用中，我们将要做的不仅仅是改变属性的文本。</p><p><strong> <em>令人费解的问题：</em> </strong>如何在<code>v-on</code>指令的双引号中放入复杂的 JavaScript 代码？</p><h3>使用方法</h3><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>上面提到的大脑拖曳问题的答案是使用方法。 就像<code>“data”</code>对象一样，我们的 Vue 实例有一个可选的<code>“methods”</code>对象，我们可以在其中定义所有方法。</p><p>现在，在<code>v-on</code>的双引号中，只需提及方法的名称，然后<strong>传递所需的参数</strong>（如果有）。 然后，在 Vue 实例的<code>“methods”</code>对象中定义方法，该方法将在每次<code>click</code>事件发生时触发。</p><h4>Index.html（代码段）</h4><pre><code class="language-html">&lt;button v-on:click="greet('howdy')"&gt;Say Hello&lt;/button&gt;</code></pre><h4>Index.js</h4><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi" }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; } } });</code></pre><p>您注意到<code>this</code>关键字的用法了吗？ 为了从 HTML 引用<code>data</code>对象的属性，我们可以直接使用它们，因为我们使用<code>‘el’</code>关键字将特定的 HTML 部分与 Vue 实例挂钩。 但是，在<code>methods</code>内部，我们必须使用<code>‘this’</code>关键字指向 Vue 实例，然后访问<code>data</code>对象的属性。</p><p><img alt="click event with method" class="alignnone size-full wp-image-14125" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_click-with-method.jpg" height="227" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20277%20227'%3E%3C/svg%3E" width="277"/></p><noscript><img alt="click event with method" class="alignnone size-full wp-image-14125" height="227" src="img/4226a5eb01a26b79a17a0465adc3b6af.png" width="277"/><p>单击该按钮，“说声你好”触发了<code>greet(‘howdy’)</code>方法，并且该方法中的代码被执行，从而向网页呈现“Howdy”。</p><h2>事件修饰符</h2><p>假设我们有一个名为“<strong>加 1 </strong>”的按钮和一个初始值为<code>zero</code>的计数器。 每次单击该按钮时，都会在现有的<code>counter</code>值上加 1 并将其打印到屏幕上。</p><p>现在让我们将想象力带入现实。 只需将<code>v-on</code>指令与<code>click</code>用作参数，即可触发将<code>counter</code>值加 1 的方法。</p><h4>Index.html (snippet)</h4><pre><code class="language-html">&lt;button v-on:click="addOne"&gt;Add 1&lt;/button&gt; &lt;p&gt; {{ counter }} &lt;/p&gt;</code></pre><h4>Index.js（代码段）</h4><pre><code class="language-javascript">methods: { addOne: function() { this.counter += 1; } }</code></pre><p><strong> <em>脑筋急转弯问题：</em> </strong> <em>如果我们只想先在<strong>首先在</strong> <code>click</code>上触发此方法，然后再不触发该方法怎么办？ </em></p><p>该问题的答案是 – <strong>事件修饰符</strong>！ 这些使我们能够<strong>修改事件</strong>的行为（正如其名称所暗示的）。</p><p><strong>用法：</strong>在事件名称（在本例中为<code>click</code>）之后，添加一个点并指定要使用的修饰符的名称。</p><pre><code class="language-html">&lt;button v-on:click.once="addOne"&gt;Add 1&lt;/button&gt;</code></pre><p>使用事件修饰符<code>.once</code>，<code>click</code>事件将仅触发一次。 这意味着，无论单击按钮多少次，只要将<code>counter</code>的值增加到 1，<code>“addOne”</code>方法将仅被称为<strong>。</strong></p><p><img alt=".once event modifier" class="alignnone size-full wp-image-14126" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_modifier-.once_-1.jpg" height="413" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20415%20413'%3E%3C/svg%3E" width="415"/></p><noscript><img alt=".once event modifier" class="alignnone size-full wp-image-14126" height="413" src="img/ecfa020fb75663bf3465034cc7d2100a.png" width="415"/><p>同样，其他可用的事件修饰符是</p><li>。停</li><li>。避免</li><li>。捕获</li><li>。自</li><li>。一旦</li><li>。被动</li><p>最常用的修饰符是<code>.stop</code>和<code>.prevent</code>，它们称为众所周知的<code>event.stopPropagation()</code>和<code>event.preventDefault()</code>方法。 这些是<a href="https://www.w3schools.com/jsref/obj_event.asp">本机事件对象</a>随附的方法。 这里与 Vue 无关。 Vue.js 只是提供了一种简单的方法，借助修饰符来处理此类常见事件详细信息，而不是在 Vue 实例的方法中显式指定这些事件方法（例如<code>event.preventDefault()</code>来取消事件）。</p><h3><strong>两个最常用修改器的快速刷新：</strong></h3><p>根据<code>stopPropagation()</code>事件方法，<code>.stop</code>修饰符将进一步停止事件的传播。</p><p>根据<code>preventDefault()</code>方法，<code>.prevent</code>修饰符将防止发生默认操作。 <code>.prevent</code>的最佳示例是将其与<code>Submit</code>按钮一起使用，以便触发提交事件时，它不会重新加载页面。</p><h3><strong>链接修饰符</strong></h3><p><em>警告：一开始可能会有些弯腰！ </em></p><p>Vue 让我们像这样，将这些修饰符一个接一个地链接，</p><pre><code class="language-html">v-on:click.self.prevent</code></pre><p>链接的<strong>顺序非常重要。 因为与每个修饰符相关的代码是按相同顺序生成的。</strong></p><p>例如，</p><pre><code class="language-html">&lt;a href="https://vuejs.org/" v-on:click.self.prevent target="_blank"&gt;Open Vue &lt;p&gt;Click me now&lt;/p&gt; &lt;/a&gt;</code></pre><p>使用<code>v-on:click.self.prevent</code>仅会阻止单击<code>&lt;a&gt;</code>元素本身，而不是单击其<code>child</code>元素。 好吧，我听到你说“请用英语”！ 换句话说，这意味着</p><li>单击<code>&lt;a&gt;</code>标签的<strong>“打开 Vue” </strong>将阻止打开<code>vuejs.org</code>页面</li><li>单击<strong>标签上的“立即单击我” </strong>，将在新标签中打开<code>vuejs.org</code>官方页面</li><p>相反，如果我们将链接修饰符的顺序更改为<code>v-on:click.prevent.self</code>，则将防止发生所有单击事件。</p><pre><code class="language-html">&lt;a href="https://vuejs.org/" v-on:click.prevent.self target="_blank"&gt;Open Vue &lt;p&gt;Click me now&lt;/p&gt; &lt;/a&gt;</code></pre><p>单击<code>&lt;a&gt;</code>的<strong>“打开 Vue” </strong>和<code>&lt;p&gt;</code>的<strong>“立即单击我” </strong>都不会打开<code>vuejs.org</code>（换句话说，它无法打开 ）。</p><p>现在，让我们看一下到目前为止处理的完整代码，</p><p>index.html</p><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;!-- Listening to click event with v-on directive --&gt; &lt;button v-on:click="greet('howdy')"&gt;Say Hello&lt;/button&gt; &lt;p&gt; {{ message }} &lt;/p&gt; &lt;h2&gt;Event Modifiers&lt;/h2&gt; &lt;!-- Using .once to modify click event --&gt; &lt;button v-on:click.once="addOne"&gt;Add 1&lt;/button&gt; &lt;p&gt; {{ counter }} &lt;/p&gt; &lt;!-- chaining event modifiers --&gt; &lt;a href="https://vuejs.org/" v-on:click.prevent.self target="_blank"&gt;Open Vue &lt;p&gt;Click me now&lt;/p&gt; &lt;/a&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p>index.js</p><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi", counter: 0 }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; }, // another way to define methods before es6 addOne: function() { this.counter += 1; } } });</code></pre><p>我知道今天有很多事情要消化。 上面讨论的所有代码以及不言自明的注释在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中可用。 慢慢来，我很快就会回来讨论键盘和其他鼠标 DOM 事件。</p><p>祝你有个美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/12-listening-to-keyboard-and-mouse-events/" title="12\. Listening to keyboard and mouse events"> 12.侦听键盘和鼠标事件</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/156.md
浏览文件 @ 3b370fcb
......@@ -125,4 +125,4 @@ new Vue({
![mouseover event](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20450%20255'%3E%3C/svg%3E)
<noscript><img alt="mouseover event" class="alignnone size-full wp-image-14144" height="255" src="img/a1c490148c18e07a6f32b328ddfde462.png" width="450"/><p>我们还没有完成！</p><h2>使用事件对象</h2><p>还记得 JavaScript 世界中的<a href="https://www.w3schools.com/jsref/obj_event.asp">本机事件对象</a>吗？ 触发事件时，将创建 Event 对象，并将其自动传递给使用<code>v-on</code>指令调用的任何方法。 再次感谢 Vue！ 让我们看一些例子来了解这一点。</p><p>Event 对象具有“<code>target</code>”方法，该方法返回触发事件的元素，并与<code>element.tagName</code>属性一起使用返回元素的 HTML 标记名称。</p><p><strong>Index.html (code snippet)</strong></p><pre><code class="language-html">&lt;div&gt; &lt;!-- Listening to mouse events --&gt; &lt;button v-on:mouseover="showRole"&gt;Hover over me!&lt;/button&gt; {{ role }} &lt;p&gt;{{ "Tag Name:" + tagName }}&lt;/p&gt; &lt;/div&gt;</code></pre><p><strong>Index.js</strong></p><pre><code class="language-javascript">new Vue({ el: "#app", data: { role: "", tagName: "" }, // define all custom methods within the 'methods' object methods: { showRole() { // 'this' keyword refers to the current Vue instance this.role = "developer"; this.tagName = event.target.tagName; } } });</code></pre><p>使用<code>event.target</code>将返回“<code>[object HTMLButtonElement]</code>”，而<code>event.target.tagName</code>将返回“<code>BUTTON</code>”。</p><p><img alt="Event object" class="alignnone size-full wp-image-14143" data-lazy-sizes="(max-width: 402px) 100vw, 402px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj.jpg 402w, https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj-300x190.jpg 300w" height="255" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20402%20255'%3E%3C/svg%3E" width="402"/></p><noscript><img alt="Event object" class="alignnone size-full wp-image-14143" height="255" sizes="(max-width: 402px) 100vw, 402px" src="img/f8145617a1b29741272a1a997f640584.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj.jpg 402w, https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj-300x190.jpg 300w" width="402"/><h2>与 Event 对象一起传递参数</h2><p>到目前为止，我们肯定知道两件事，</p><ol><li>将创建<code>Event</code>对象，并将其自动传递给触发事件时正在调用的方法。</li><li>只需在方法名称后面的括号内指定参数，即可将参数传递给这些方法非常容易。</li></ol><p>如果我们想使用此自动创建的<code>Event</code>对象将自己的参数<em> <strong>沿</strong> </em>传递，该怎么办？ 我们也可以这样做吗？</p><p>答案是肯定的！ 绝对没错！！</p><p>这里要记住的重点是<em> <strong>的命名</strong> </em>。 Vue 将原始 DOM 事件存储在名为“<code>$event</code>”的变量中。 注意不要覆盖或拼写错误，因为它是 Vue.js 使用的受保护名称，以了解这不是自定义参数，而是<code>Event</code>对象本身。</p><p>让我们对代码进行这些更改。</p><p><strong>Index.html (code snippet)</strong></p><pre><code class="language-html">&lt;button v-on:mouseover="showRole('developer', $event)"&gt;Hover over me!&lt;/button&gt; {{ role }} &lt;p&gt;{{ "Tag Name:" + tagName }}&lt;/p&gt;</code></pre><p><strong> Index.js（代码段）</strong></p><pre><code class="language-javascript">showRole(customRole, event) { // 'this' keyword refers to the current Vue instance this.role = customRole; this.tagName = event.target.tagName; }</code></pre><p>在总结之前，这里是供您欣赏的完整代码！</p><p><strong>Index.html</strong></p><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;!-- Using key modifiers with keyboard events --&gt; &lt;button v-on:keyup.enter="greet"&gt;greet&lt;/button&gt; &lt;hr/&gt; &lt;div&gt; &lt;!-- Passing arguments along with original DOM event --&gt; &lt;button v-on:mouseover="showRole('developer', $event)"&gt;Hover over me!&lt;/button&gt; {{ role }} &lt;p&gt;{{ "Tag Name:" + tagName }}&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p><strong>Index.js</strong></p><pre><code class="language-javascript">new Vue({ el: "#app", data: { role: "", tagName: "" }, // define all custom methods within the 'methods' object methods: { greet() { alert("Hi"); }, showRole(customRole, event) { // 'this' keyword refers to the current Vue instance this.role = customRole; this.tagName = event.target.tagName; } } });</code></pre><p>因此，我们现在可以将自定义参数与带有<code>$event</code>变量的自动创建的<code>Event</code>对象一起传递。 上面讨论的所有代码以及注释都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中找到。</p><p>这使我们到了本主题的结尾。 祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/13-shorthands-for-v-bind-and-v-on/" title="13\. Let’s use shorthands"> 13.让我们使用速记</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="mouseover event" class="alignnone size-full wp-image-14144" height="255" src="img/a1c490148c18e07a6f32b328ddfde462.png" width="450"/><p>我们还没有完成！</p><h2>使用事件对象</h2><p>还记得 JavaScript 世界中的<a href="https://www.w3schools.com/jsref/obj_event.asp">本机事件对象</a>吗？ 触发事件时，将创建 Event 对象，并将其自动传递给使用<code>v-on</code>指令调用的任何方法。 再次感谢 Vue！ 让我们看一些例子来了解这一点。</p><p>Event 对象具有“<code>target</code>”方法，该方法返回触发事件的元素，并与<code>element.tagName</code>属性一起使用返回元素的 HTML 标记名称。</p><p><strong>Index.html (code snippet)</strong></p><pre><code class="language-html">&lt;div&gt; &lt;!-- Listening to mouse events --&gt; &lt;button v-on:mouseover="showRole"&gt;Hover over me!&lt;/button&gt; {{ role }} &lt;p&gt;{{ "Tag Name:" + tagName }}&lt;/p&gt; &lt;/div&gt;</code></pre><p><strong>Index.js</strong></p><pre><code class="language-javascript">new Vue({ el: "#app", data: { role: "", tagName: "" }, // define all custom methods within the 'methods' object methods: { showRole() { // 'this' keyword refers to the current Vue instance this.role = "developer"; this.tagName = event.target.tagName; } } });</code></pre><p>使用<code>event.target</code>将返回“<code>[object HTMLButtonElement]</code>”，而<code>event.target.tagName</code>将返回“<code>BUTTON</code>”。</p><p><img alt="Event object" class="alignnone size-full wp-image-14143" data-lazy-sizes="(max-width: 402px) 100vw, 402px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj.jpg 402w, https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj-300x190.jpg 300w" height="255" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20402%20255'%3E%3C/svg%3E" width="402"/></p><noscript><img alt="Event object" class="alignnone size-full wp-image-14143" height="255" sizes="(max-width: 402px) 100vw, 402px" src="img/f8145617a1b29741272a1a997f640584.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj.jpg 402w, https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj-300x190.jpg 300w" width="402"/><h2>与 Event 对象一起传递参数</h2><p>到目前为止，我们肯定知道两件事，</p><ol><li>将创建<code>Event</code>对象，并将其自动传递给触发事件时正在调用的方法。</li><li>只需在方法名称后面的括号内指定参数，即可将参数传递给这些方法非常容易。</li></ol><p>如果我们想使用此自动创建的<code>Event</code>对象将自己的参数<em> <strong>沿</strong> </em>传递，该怎么办？ 我们也可以这样做吗？</p><p>答案是肯定的！ 绝对没错！！</p><p>这里要记住的重点是<em> <strong>的命名</strong> </em>。 Vue 将原始 DOM 事件存储在名为“<code>$event</code>”的变量中。 注意不要覆盖或拼写错误，因为它是 Vue.js 使用的受保护名称，以了解这不是自定义参数，而是<code>Event</code>对象本身。</p><p>让我们对代码进行这些更改。</p><p><strong>Index.html (code snippet)</strong></p><pre><code class="language-html">&lt;button v-on:mouseover="showRole('developer', $event)"&gt;Hover over me!&lt;/button&gt; {{ role }} &lt;p&gt;{{ "Tag Name:" + tagName }}&lt;/p&gt;</code></pre><p><strong> Index.js（代码段）</strong></p><pre><code class="language-javascript">showRole(customRole, event) { // 'this' keyword refers to the current Vue instance this.role = customRole; this.tagName = event.target.tagName; }</code></pre><p>在总结之前，这里是供您欣赏的完整代码！</p><p><strong>Index.html</strong></p><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;!-- Using key modifiers with keyboard events --&gt; &lt;button v-on:keyup.enter="greet"&gt;greet&lt;/button&gt; &lt;hr/&gt; &lt;div&gt; &lt;!-- Passing arguments along with original DOM event --&gt; &lt;button v-on:mouseover="showRole('developer', $event)"&gt;Hover over me!&lt;/button&gt; {{ role }} &lt;p&gt;{{ "Tag Name:" + tagName }}&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p><strong>Index.js</strong></p><pre><code class="language-javascript">new Vue({ el: "#app", data: { role: "", tagName: "" }, // define all custom methods within the 'methods' object methods: { greet() { alert("Hi"); }, showRole(customRole, event) { // 'this' keyword refers to the current Vue instance this.role = customRole; this.tagName = event.target.tagName; } } });</code></pre><p>因此，我们现在可以将自定义参数与带有<code>$event</code>变量的自动创建的<code>Event</code>对象一起传递。 上面讨论的所有代码以及注释都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p>这使我们到了本主题的结尾。 祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/13-shorthands-for-v-bind-and-v-on/" title="13\. Let’s use shorthands"> 13.让我们使用速记</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/157.md
浏览文件 @ 3b370fcb
......@@ -74,4 +74,4 @@ data: {
![v-bind](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20578%20354'%3E%3C/svg%3E)
<noscript><img alt="v-bind" class="alignnone size-full wp-image-14134" height="354" src="img/51f44e5135c07d36919a60b077148ebd.png" width="578"/><h2>v-on 的简写</h2><p>为了理解<code>v-on</code>指令的简写语法，让我们有一个按钮。 单击它后，我们将触发名为“<code>greet</code>”的方法，以在消息<code>Hi</code>和<code>Hello</code>之间切换。</p><p>完整的语法是</p><p><em>Index.html (snippet)</em></p><pre><code class="language-html">&lt;button v-on:click="greet"&gt;Click for a different greeting&lt;/button&gt;</code></pre><p><em>Index.js (snippet)</em></p><pre><code class="language-javascript">data: { message: "Hi", url: "https://www.google.com" }, methods: { greet() { this.message === "Hi" ? this.message = "Hello" : this.message = "Hi"; } }</code></pre><p>好的。 此处的缩写是将单词<code>v-on</code>和冒号替换为<code>@</code>符号。 就这样！ 它是如此简单！！</p><p><em>Index.html (snippet)</em></p><pre><code class="language-html">&lt;!-- Using v-on shorthand --&gt; &lt;button @click="greet"&gt;Click for a different greeting&lt;/button&gt; </code></pre><h2>最终密码</h2><p>Index.html</p><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;!-- Using v-on shorthand --&gt; &lt;button @click="greet"&gt;Click for a different greeting&lt;/button&gt; &lt;p&gt; {{ message }} &lt;/p&gt; &lt;!-- Using v-bind shorthand --&gt; &lt;a :href="url" target="_blank"&gt;Google&lt;/a&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p>Index.js</p><pre><code class="language-javascript">new Vue({ el: "#app", data: { message: "Hi", url: "https://www.google.com" }, // define all custom methods within the 'methods' object methods: { greet() { // 'this' keyword refers to the current Vue instance this.message === "Hi" ? this.message = "Hello" : this.message = "Hi"; } } });</code></pre><p>代码看起来更加简洁，优雅且不那么冗长（显然！）。 您将在处理事件负载的实际应用中更好地看到它。 请记住，使用速记语法完全是可选的，完全由您决定。 上面讨论的所有代码以及注释都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中找到。</p><p><em>警告：我将在以后的所有代码示例中使用这些简写形式。 与他们合作的次数越多，您就越感到舒适！ </em></p><p><strong>为什么要使用速记？ </strong></p><p>让我们了解使用这些速记来说服您的原因，</p><ol><li>由于经常以完整形式使用这些指令，因此代码变得冗长。</li><li>在将 Vue.js 用作管理所有前端代码的框架的应用（例如<a href="https://en.wikipedia.org/wiki/Single-page_application"> SPA </a>）中，很明显正在使用 Vue，而前缀<code>v-</code>并不那么重要。</li><li>干净，易读的代码是每个开发人员最终想要的。</li></ol><p>这使我们到了本文的结尾。 祝你今天愉快。</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/" title="14\. Two-way data binding with v-model"> 14.使用 v 模型</a>的双向数据绑定</h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="v-bind" class="alignnone size-full wp-image-14134" height="354" src="img/51f44e5135c07d36919a60b077148ebd.png" width="578"/><h2>v-on 的简写</h2><p>为了理解<code>v-on</code>指令的简写语法，让我们有一个按钮。 单击它后，我们将触发名为“<code>greet</code>”的方法，以在消息<code>Hi</code>和<code>Hello</code>之间切换。</p><p>完整的语法是</p><p><em>Index.html (snippet)</em></p><pre><code class="language-html">&lt;button v-on:click="greet"&gt;Click for a different greeting&lt;/button&gt;</code></pre><p><em>Index.js (snippet)</em></p><pre><code class="language-javascript">data: { message: "Hi", url: "https://www.google.com" }, methods: { greet() { this.message === "Hi" ? this.message = "Hello" : this.message = "Hi"; } }</code></pre><p>好的。 此处的缩写是将单词<code>v-on</code>和冒号替换为<code>@</code>符号。 就这样！ 它是如此简单！！</p><p><em>Index.html (snippet)</em></p><pre><code class="language-html">&lt;!-- Using v-on shorthand --&gt; &lt;button @click="greet"&gt;Click for a different greeting&lt;/button&gt; </code></pre><h2>最终密码</h2><p>Index.html</p><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;!-- Using v-on shorthand --&gt; &lt;button @click="greet"&gt;Click for a different greeting&lt;/button&gt; &lt;p&gt; {{ message }} &lt;/p&gt; &lt;!-- Using v-bind shorthand --&gt; &lt;a :href="url" target="_blank"&gt;Google&lt;/a&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p>Index.js</p><pre><code class="language-javascript">new Vue({ el: "#app", data: { message: "Hi", url: "https://www.google.com" }, // define all custom methods within the 'methods' object methods: { greet() { // 'this' keyword refers to the current Vue instance this.message === "Hi" ? this.message = "Hello" : this.message = "Hi"; } } });</code></pre><p>代码看起来更加简洁，优雅且不那么冗长（显然！）。 您将在处理事件负载的实际应用中更好地看到它。 请记住，使用速记语法完全是可选的，完全由您决定。 上面讨论的所有代码以及注释都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p><em>警告：我将在以后的所有代码示例中使用这些简写形式。 与他们合作的次数越多，您就越感到舒适！ </em></p><p><strong>为什么要使用速记？ </strong></p><p>让我们了解使用这些速记来说服您的原因，</p><ol><li>由于经常以完整形式使用这些指令，因此代码变得冗长。</li><li>在将 Vue.js 用作管理所有前端代码的框架的应用（例如<a href="https://en.wikipedia.org/wiki/Single-page_application"> SPA </a>）中，很明显正在使用 Vue，而前缀<code>v-</code>并不那么重要。</li><li>干净，易读的代码是每个开发人员最终想要的。</li></ol><p>这使我们到了本文的结尾。 祝你今天愉快。</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/" title="14\. Two-way data binding with v-model"> 14.使用 v 模型</a>的双向数据绑定</h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/158.md
浏览文件 @ 3b370fcb
......@@ -79,4 +79,4 @@ new Vue({
![v-model initial output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20467%20384'%3E%3C/svg%3E)
<noscript><img alt="v-model initial output" class="alignnone size-full wp-image-14163" height="384" src="img/1fbc5015295fc979e5e228f95c136712.png" width="467"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p>图像的右半部分显示<a href="https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/"> Vue DevTools </a>窗格。 也可以看到具有<code>message</code>属性及其值的<code>data</code>对象。</p><p>当我们将文本字段中的消息从“hi”更改为“hello”时，我们键入的每个字符都将在基础数据模型（如 Vue Devtools 中所示）上进行反应性更新，并在输出结果的视图中进行更新 在<code>&lt;p&gt;</code>标签中使用小胡子语法。</p><p><img alt="reactivity with v-model" class="alignnone size-full wp-image-14164" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/2_reactivity-1.jpg" height="379" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20470%20379'%3E%3C/svg%3E" width="470"/></p><noscript><img alt="reactivity with v-model" class="alignnone size-full wp-image-14164" height="379" src="img/39c5c156976147d4e25ea3115a06f7e9.png" width="470"/><p>我强烈建议您如图所示打开 Vue Devtools 并更改文本字段中的值，以查看此更改是被动发生的。 这将是您的盛宴！ 我可以保证。</p><h2>修饰符</h2><p>v 模型带有三个修饰符。 如果您错过了修饰符部分，请将检出<a href="https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/">。</a></p><p><strong>用法：</strong>遵循<code>v-model</code>指令，添加一个点并指定修饰符。</p><li><code>.lazy</code> – 在更改事件（而非输入事件）之后将输入与数据同步</li><pre><code class="language-html">&lt;input v-model.lazy="message"&gt;</code></pre><li><code>.number</code> – 用于将有效的输入字符串转换为数字</li><pre><code class="language-html">&lt;input v-model.number="age"&gt;</code></pre><li><code>.trim</code> – 自动修剪用户输入</li><pre><code class="language-html">&lt;input v-model.trim="message"&gt;</code></pre><p>该代码一如既往在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中可用。</p><p>试一试，并注意 Vue 如何根据输入类型是否为文本字段，复选框，单选按钮，选择，多选，文本区域元素等来正确更新元素……它看起来和听起来很神奇，因为所有语法 您需要完成一个简单的指令<code>v-model</code>来完成这项艰巨的任务。 如果遇到任何问题，请随时在评论部分大声疾呼。</p><p>祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/" title="15\. Form input bindings"> 15.表单输入绑定</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="v-model initial output" class="alignnone size-full wp-image-14163" height="384" src="img/1fbc5015295fc979e5e228f95c136712.png" width="467"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p>图像的右半部分显示<a href="https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/"> Vue DevTools </a>窗格。 也可以看到具有<code>message</code>属性及其值的<code>data</code>对象。</p><p>当我们将文本字段中的消息从“hi”更改为“hello”时，我们键入的每个字符都将在基础数据模型（如 Vue Devtools 中所示）上进行反应性更新，并在输出结果的视图中进行更新 在<code>&lt;p&gt;</code>标签中使用小胡子语法。</p><p><img alt="reactivity with v-model" class="alignnone size-full wp-image-14164" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/2_reactivity-1.jpg" height="379" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20470%20379'%3E%3C/svg%3E" width="470"/></p><noscript><img alt="reactivity with v-model" class="alignnone size-full wp-image-14164" height="379" src="img/39c5c156976147d4e25ea3115a06f7e9.png" width="470"/><p>我强烈建议您如图所示打开 Vue Devtools 并更改文本字段中的值，以查看此更改是被动发生的。 这将是您的盛宴！ 我可以保证。</p><h2>修饰符</h2><p>v 模型带有三个修饰符。 如果您错过了修饰符部分，请将检出<a href="https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/">。</a></p><p><strong>用法：</strong>遵循<code>v-model</code>指令，添加一个点并指定修饰符。</p><li><code>.lazy</code> – 在更改事件（而非输入事件）之后将输入与数据同步</li><pre><code class="language-html">&lt;input v-model.lazy="message"&gt;</code></pre><li><code>.number</code> – 用于将有效的输入字符串转换为数字</li><pre><code class="language-html">&lt;input v-model.number="age"&gt;</code></pre><li><code>.trim</code> – 自动修剪用户输入</li><pre><code class="language-html">&lt;input v-model.trim="message"&gt;</code></pre><p>该代码一如既往在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中可用。</p><p>试一试，并注意 Vue 如何根据输入类型是否为文本字段，复选框，单选按钮，选择，多选，文本区域元素等来正确更新元素……它看起来和听起来很神奇，因为所有语法 您需要完成一个简单的指令<code>v-model</code>来完成这项艰巨的任务。 如果遇到任何问题，请随时在评论部分大声疾呼。</p><p>祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/" title="15\. Form input bindings"> 15.表单输入绑定</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/159.md
浏览文件 @ 3b370fcb
此差异已折叠。
docs/160.md
浏览文件 @ 3b370fcb
......@@ -93,4 +93,4 @@ new Vue({
![class binding with objects](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20440%20390'%3E%3C/svg%3E)
<noscript><img alt="class binding with objects" class="alignnone size-full wp-image-14193" height="390" src="img/bb21f07c51cbe083ac05a5835ff0ed39.png" width="440"/><p>在浏览器中可以清楚地看到结果。 Chrome DevTools 窗格显示 HTML 代码中如何显示“<code>success</code>”类。</p><p>如果我们将<code>successFlag</code>的值设置为<code>false</code>，那么这就是输出的样子。</p><p>index.js（摘要）</p><pre><code class="language-javascript">data: { successFlag : false }</code></pre><p><img alt="Toggle class" class="alignnone size-full wp-image-14194" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/04/2_objectValFalse-1.jpg" height="327" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20440%20327'%3E%3C/svg%3E" width="440"/></p><noscript><img alt="Toggle class" class="alignnone size-full wp-image-14194" height="327" src="img/16e81b7a149978ed0997a62f9a765381.png" width="440"/><p>奇迹般有效！</p><p>如果我们拥有普通的<code>class</code>属性，并且在此属性之上，我们想借助<code>v-bind:class</code>来切换另一个类的存在？ 换句话说，我们可以在一个元素上同时具有<code>class</code>和<code>v-bind:class</code>吗？ 可能吗？</p><p>YESSSS！ 使用 Vue，几乎所有内容都是肯定的！</p><p>最好的部分是，我们可以通过<strong>的两种</strong>方式实现这一目标。</p><h3>方法 1：内联对象</h3><p>index.html (snippet)</p><pre><code class="language-html">&lt;div&gt; &lt;!-- class bindings: Objects --&gt; &lt;div class="underline" :class="{ success : successFlag, bcg : bcgFlag }"&gt; Hello!! &lt;/div&gt; &lt;p&gt;The value of successFlag is {{ successFlag }}&lt;/p&gt; &lt;/div &gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { successFlag: false, bcgFlag: true } </code></pre><p>style.css（摘要）</p><pre><code class="language-css">.underline { text-decoration-color: red; text-decoration-line: underline; } .bcg { background-color: aqua; padding: 5px; width: fit-content; }</code></pre><p>普通的<code>class</code>属性具有将始终呈现的类<code>underline</code>。</p><p>还可能在对象中将更多字段传递给<code>v-bind:class</code>。 为了理解这一点，让我们根据其值的真实性切换两个类。 在上面的代码中，两个类<code>success</code>和<code>bcg</code>作为对象传递给<code>v-bind:class</code>。 <code>successFlag</code>和<code>bcgFlag</code>分别设置为<code>false</code>和<code>true</code>。 因此，呈现的类列表将变为“<code>underline bcg</code>”，并且仅应用那些样式。</p><h3>方法 2：绑定对象不内联</h3><p>index.html (snippet)</p><pre><code class="language-html">&lt;div class="underline" :class="classObject"&gt; Hello!! &lt;/div&gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { classObject: { success : false, bcg : true } }</code></pre><p>在 vue 实例的数据中指定了要绑定到<code>v-bind:class</code>的对象。</p><p><img alt="binding multiple objects" class="alignnone size-full wp-image-14191" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/04/3_multipleObjects-1.jpg" height="341" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20499%20341'%3E%3C/svg%3E" width="499"/></p><noscript><img alt="binding multiple objects" class="alignnone size-full wp-image-14191" height="341" src="img/426feb0ed4c8053a49bb317a6cb9fbe8.png" width="499"/><h2>数组语法</h2><p>可以使用类以数组的形式将类传递给<code>v-bind:class</code>，而不是使用对象，</p><p>index.html (snippet)</p><pre><code class="language-html">&lt;!-- class bindings: Arrays --&gt; &lt;div class="underline" :class="[successClass, bcgClass]"&gt; Array Bindings. &lt;/div&gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { successFlag: false, bcgFlag: true, successClass: 'success', bcgClass: 'bcg' }</code></pre><p>为简单起见，本示例也使用相同的类。</p><p>在 chrome DevTools 中检查时，这将呈现所有三个类，</p><p><code>&lt;div class="underline success bcg"&gt;</code></p><p><img alt="Class binding with arrays" class="alignnone size-full wp-image-14192" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/04/4_arrays-1.jpg" height="464" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20523%20464'%3E%3C/svg%3E" width="523"/></p><noscript><img alt="Class binding with arrays" class="alignnone size-full wp-image-14192" height="464" src="img/d21db25e02c10e675abfbee5efd15b24.png" width="523"/><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中找到。</p><p>启动您喜欢的 IDE，并编写一些自己的方案！ 如有任何疑问，请随时在“评论”部分中进行提问。 请继续关注，因为我们的下一篇文章都是关于绑定内联样式的。</p><p> </p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"></h5></div></div> </body> </html></noscript>
\ No newline at end of file
<noscript><img alt="class binding with objects" class="alignnone size-full wp-image-14193" height="390" src="img/bb21f07c51cbe083ac05a5835ff0ed39.png" width="440"/><p>在浏览器中可以清楚地看到结果。 Chrome DevTools 窗格显示 HTML 代码中如何显示“<code>success</code>”类。</p><p>如果我们将<code>successFlag</code>的值设置为<code>false</code>，那么这就是输出的样子。</p><p>index.js（摘要）</p><pre><code class="language-javascript">data: { successFlag : false }</code></pre><p><img alt="Toggle class" class="alignnone size-full wp-image-14194" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/04/2_objectValFalse-1.jpg" height="327" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20440%20327'%3E%3C/svg%3E" width="440"/></p><noscript><img alt="Toggle class" class="alignnone size-full wp-image-14194" height="327" src="img/16e81b7a149978ed0997a62f9a765381.png" width="440"/><p>奇迹般有效！</p><p>如果我们拥有普通的<code>class</code>属性，并且在此属性之上，我们想借助<code>v-bind:class</code>来切换另一个类的存在？ 换句话说，我们可以在一个元素上同时具有<code>class</code>和<code>v-bind:class</code>吗？ 可能吗？</p><p>YESSSS！ 使用 Vue，几乎所有内容都是肯定的！</p><p>最好的部分是，我们可以通过<strong>的两种</strong>方式实现这一目标。</p><h3>方法 1：内联对象</h3><p>index.html (snippet)</p><pre><code class="language-html">&lt;div&gt; &lt;!-- class bindings: Objects --&gt; &lt;div class="underline" :class="{ success : successFlag, bcg : bcgFlag }"&gt; Hello!! &lt;/div&gt; &lt;p&gt;The value of successFlag is {{ successFlag }}&lt;/p&gt; &lt;/div &gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { successFlag: false, bcgFlag: true } </code></pre><p>style.css（摘要）</p><pre><code class="language-css">.underline { text-decoration-color: red; text-decoration-line: underline; } .bcg { background-color: aqua; padding: 5px; width: fit-content; }</code></pre><p>普通的<code>class</code>属性具有将始终呈现的类<code>underline</code>。</p><p>还可能在对象中将更多字段传递给<code>v-bind:class</code>。 为了理解这一点，让我们根据其值的真实性切换两个类。 在上面的代码中，两个类<code>success</code>和<code>bcg</code>作为对象传递给<code>v-bind:class</code>。 <code>successFlag</code>和<code>bcgFlag</code>分别设置为<code>false</code>和<code>true</code>。 因此，呈现的类列表将变为“<code>underline bcg</code>”，并且仅应用那些样式。</p><h3>方法 2：绑定对象不内联</h3><p>index.html (snippet)</p><pre><code class="language-html">&lt;div class="underline" :class="classObject"&gt; Hello!! &lt;/div&gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { classObject: { success : false, bcg : true } }</code></pre><p>在 vue 实例的数据中指定了要绑定到<code>v-bind:class</code>的对象。</p><p><img alt="binding multiple objects" class="alignnone size-full wp-image-14191" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/04/3_multipleObjects-1.jpg" height="341" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20499%20341'%3E%3C/svg%3E" width="499"/></p><noscript><img alt="binding multiple objects" class="alignnone size-full wp-image-14191" height="341" src="img/426feb0ed4c8053a49bb317a6cb9fbe8.png" width="499"/><h2>数组语法</h2><p>可以使用类以数组的形式将类传递给<code>v-bind:class</code>，而不是使用对象，</p><p>index.html (snippet)</p><pre><code class="language-html">&lt;!-- class bindings: Arrays --&gt; &lt;div class="underline" :class="[successClass, bcgClass]"&gt; Array Bindings. &lt;/div&gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { successFlag: false, bcgFlag: true, successClass: 'success', bcgClass: 'bcg' }</code></pre><p>为简单起见，本示例也使用相同的类。</p><p>在 chrome DevTools 中检查时，这将呈现所有三个类，</p><p><code>&lt;div class="underline success bcg"&gt;</code></p><p><img alt="Class binding with arrays" class="alignnone size-full wp-image-14192" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/04/4_arrays-1.jpg" height="464" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20523%20464'%3E%3C/svg%3E" width="523"/></p><noscript><img alt="Class binding with arrays" class="alignnone size-full wp-image-14192" height="464" src="img/d21db25e02c10e675abfbee5efd15b24.png" width="523"/><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p>启动您喜欢的 IDE，并编写一些自己的方案！ 如有任何疑问，请随时在“评论”部分中进行提问。 请继续关注，因为我们的下一篇文章都是关于绑定内联样式的。</p><p> </p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"></h5></div></div> </body> </html></noscript>
\ No newline at end of file
docs/185.md
浏览文件 @ 3b370fcb
......@@ -18,7 +18,7 @@ HQL 背后的主要思想是，您可以在查询中使用实体名称，而不
from Book
```
是的，您可以在存储库中看到这是一个有效的查询。
是的，您可以在仓库中看到这是一个有效的查询。
如果提及实体，则可以使用其简单名称或实体的限定名称（具有整个包结构）。
......
docs/190.md
浏览文件 @ 3b370fcb
......@@ -76,7 +76,7 @@ private static List<Book> getBooks(Session session) {
有趣的是 setLockMode 方法的第一个字符串参数：它是实体使用此锁定的别名，您必须在查询的`FROM`块中使用此别名。
使用此存储库方法加载书籍后，将书籍打印到控制台的结果可能是这样的：
使用此仓库方法加载书籍后，将书籍打印到控制台的结果可能是这样的：
```java
Java 8 in Action by Raoul-Gabriel Urma, Mario Fusco, Alan Mycroft (ISBN: 9781617291999), published 2015.07.29\. 0:00 [1]
......
docs/71.md
浏览文件 @ 3b370fcb
......@@ -15,7 +15,7 @@ Java 10 由各种新功能和对许多功能领域的改进组成。 它的一
3. JEP 304：垃圾收集器接口
4. JEP 307：适用于 G1 的并行全 GC
5. JEP 316：备用存储设备上的堆分配
6. JEP 296：将 JDK 林整合到单个存储库中
6. JEP 296：将 JDK 林整合到单个仓库中
7. JEP 319：根证书
8. JEP 317：基于 Java 的实验性 JIT 编译器
9. JEP 312：线程本地握手
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或