技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用

简介: 首先将 Vue.js 下载到本地,本章就以本地的 Vue.js 为例。在本地创建一个工作区即创建一个文件夹,使用 vscode 打开,将 Vue.js 放到工作区目录下。## 创建挂载元素首先创建一个 index.html 的文件,使用 <script src="./vue.js"></script>加载 vue.js,这里的 ./vue.js 路径根据自己 Vue.js 文件位置而定。
更多技术文章分享和免费资料领取
https://qrcode.testing-studio.com/f?from=Aliyun&url=https://ceshiren.com/t/topic/16586
首先将 Vue.js 下载到本地,本章就以本地的 Vue.js 为例。在本地创建一个工作区即创建一个文件夹,使用 vscode 打开,将 Vue.js 放到工作区目录下。

创建挂载元素

首先创建一个 index.html 的文件,使用 加载 vue.js,这里的 ./vue.js 路径根据自己 Vue.js 文件位置而定。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./vue.js">
      打印
</script>
  </body>
</html>

创建Vue实例

创建 Vue 实例的目的是为元素提供数据、方法等
首先在 body 下面创建一个

标签,它的 id="app"·
<div id="app"></div>

创建 Vue 实例

<div id="app">{{msg}}</div>
<script>
  new Vue({
    // Vue 实例
    el: "#app", // el: 是一个挂载元素的关键字, 后面的 #app 是 css 选择器,表示只在这个元素中起作用。
    data: {
      // data 是储存数据的地方,div 用到的数据储存在这个地方
      msg: "hello world", // msg 类似于变量名,引用用插值的方式 {{msg}} 来引用
    },
    methods: {
      // methods 里面用来定义方法
    },
  });
</script>

将数据放在 data 中的好处就是不需要频繁的去修改 DOM 中的数据,而是直接的修改 data 中的数据即可。

Vue内部指令

Vue 指令是为了对页面和数据操作更为便捷,这些操作就加左指令,通常以 v-xxx 表示。
常用的指令为:

  • v-if v-else:元素是否存在
  • v-show:元素是否显示
  • v-for:循环
  • v-on:绑定事件:简写 @
  • v-bind:绑定属性:简写 :
  • v-model:绑定数据

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="show('展示_if')">展示_if</button>
      <button @click="show('展示_else_if')">展示_else_if</button>
      <button @click="show('展示_else')">展示_else</button>
      <p v-if="'展示_if' == is_show">hello_if</p>
      <p v-else-if="'展示_else_if' == is_show">hello_else_if</p>
      <p v-else>hello_else</p>
    </div>
  </body>
</html>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      is_show: "展示",
    },
    methods: {
      show(tmp) {
        this.is_show = tmp;
      },
    },
  });
</script>
  • @click 等同于 v-on:click 分开来看,它是由v-on 和click 组成;v-on绑定事件监听器。可以用来绑定点击事件、键盘事件等;click通过单词含义我们可以知道这是点击的意思,在这里表示点击事件;那么v-on:click合起来看,就表示监控点击事件。
  • v-if 根据表达式有条件的渲染元素。当表达式满足条件后,才会进行渲染。
  • v-else-if,同等与v-if ,与 v-if 或 v-else-if 组合使用。
  • var vm = new Vue,顶一个 Vue 实例,实例名字为 vm。
  • el,决定之后 Vue 实例会管理哪一个 DOM。
  • data,Vue 实例对应的数据对象。
  • methods,定义属于 Vue 的一些方法,可以在其他地方调用,也可以在指令中调用。

这里使用 npm 安装的 Vue 来创建项目。上面已经介绍了 Vue 的安装,接下来就是初始化项目和下载环境所需要的依赖。

初始化项目

使用 vscode 打开一个工作区,在当前的目录下打开一个终端,输入 vue ui,Vue 就是启动一个 Web 服务,这是一个可视化的界面。
启动的服务地址为 http://localhost:8000 这里的地址以自己实际输出的为准。
通过浏览器访问,这时出现的就是初始化项目的页面。此时是没有项目的状态,点击创建。需要填写项目的路径,然后点击“在此创建新项目”。
需要填写项目的名字、包管理器、以及初始化 git(可选),然后点击下一步。
这里可以选择手动配置,选择自己需要的插件,当然也可以选择其他的选项。主要选择下面的这几个功能,点击下一步。

接下来 CSS pre-processor 选择 stylus,然后点击创建项目。会弹出保存预设,这里选择‘创建项目,不保存预设’即可。

Vue Web 端有下载插件的功能,点击下图的插件,然后点击添加插件。

搜索 vuetify 和 axios 这两个插件,点击安装-->完成安装-->继续,插件安装完成。

项目结构

项目分为三大块:node_modules、public、src 以及其他的附属文件

node_modules 是用来存放依赖的地方,这个文件非常的大,所以在上传到 git 的时候,通常不会上传这个文件,而是上传 package.json 的文件

这个文件记录了项目需要用到的依赖,安装文件中的依赖,只需要在命令行里输入 npm install 即可

public 中主要是存放静态的资源文件
src 存放项目源码及需要引用的资源文件。

  • src 下的 assets:存放项目中用到的资源文件,css、js、images 等。
  • src 下的 componets:存放 Vue 开发中的组件:HelloWorld.vue 等。
  • src 下的 router:vue-router vue 路由的配置文件。
  • src 下的 main.js:vue-cli 工程的入口文件。

每个文件的功能就不一一介绍了,主要的是上面这几个文件。
启动 Vue 服务:命令默认为 npm run serve

使用浏览器打开上图的链接,就会显示出当前项目的主页。Vue.js框架的使用就先说到这里啦,大家可以多多练习一下哦~

原文链接

⬇️ 点击“下方链接”,提升测试核心竞争力!

更多技术文章分享和免费资料领取
https://qrcode.testing-studio.com/f?from=Aliyun&url=https://ceshiren.com/t/topic/16586
相关文章
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
78 9
|
1月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
24天前
|
前端开发 JavaScript 测试技术
前端自动化测试
前端自动化测试是通过使用工具和脚本自动执行测试用例的过程,旨在提高测试效率、减少人为错误,并确保Web应用的功能在不同环境和设备上的一致性与稳定性。
|
1月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
32 9
|
1月前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
53 4
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
129 1
|
1月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
54 1
|
1月前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
68 2
|
1月前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
47 2
|
1月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
43 1