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

简介: 首先将 Vue.js 下载到本地,本章就以本地的 Vue.js 为例。在本地创建一个工作区即创建一个文件夹,使用 vscode 打开,将 Vue.js 放到工作区目录下。## 创建挂载元素首先创建一个 index.html 的文件,使用 <script src="./vue.js"></script>加载 vue.js,这里的 ./vue.js 路径根据自己 Vue.js 文件位置而定。
更多技术文章分享和免费资料领取
https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=Aliyun&timestamp=1651113897
首先将 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框架的使用就先说到这里啦,大家可以多多练习一下哦~

原文链接

⬇️ 点击“下方链接”,提升测试核心竞争力!+V~ ceshiren001
更多技术文章分享和免费资料领取
https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=Aliyun&timestamp=1651113897
相关文章
|
2月前
|
人工智能 搜索推荐 数据管理
探索软件测试中的自动化测试框架选择与优化策略
本文深入探讨了在现代软件开发流程中,如何根据项目特性、团队技能和长期维护需求,精准选择合适的自动化测试框架。
155 11
|
4天前
|
人工智能 自然语言处理 测试技术
AxBench:斯坦福大学推出评估语言模型控制方法的基准测试框架
AxBench 是由斯坦福大学推出,用于评估语言模型可解释性方法的基准测试框架,支持概念检测和模型转向任务,帮助研究者系统地比较不同控制技术的有效性。
35 5
AxBench:斯坦福大学推出评估语言模型控制方法的基准测试框架
|
26天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
1月前
|
存储 测试技术 API
pytest接口自动化测试框架搭建
通过上述步骤,我们成功搭建了一个基于 `pytest`的接口自动化测试框架。这个框架具备良好的扩展性和可维护性,能够高效地管理和执行API测试。通过封装HTTP请求逻辑、使用 `conftest.py`定义共享资源和前置条件,并利用 `pytest.ini`进行配置管理,可以大幅提高测试的自动化程度和执行效率。希望本文能为您的测试工作提供实用的指导和帮助。
114 15
|
2月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
548 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
2月前
|
Linux Shell 网络安全
Kali Linux系统Metasploit框架利用 HTA 文件进行渗透测试实验
本指南介绍如何利用 HTA 文件和 Metasploit 框架进行渗透测试。通过创建反向 shell、生成 HTA 文件、设置 HTTP 服务器和发送文件,最终实现对目标系统的控制。适用于教育目的,需合法授权。
92 9
Kali Linux系统Metasploit框架利用 HTA 文件进行渗透测试实验
|
1月前
|
消息中间件 监控 小程序
电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
电竞陪玩系统架构涵盖前端(React/Vue)、后端(Spring Boot/php)、数据库(MySQL/MongoDB)、实时通信(WebSocket)及其他组件(Redis、RabbitMQ、Nginx)。通过模块化设计、微服务架构和云计算技术优化,提升系统性能与可靠性。同时,加强全面测试、实时监控及故障管理,确保系统稳定运行。
|
移动开发 JavaScript 前端开发
8个最佳的JavaScript移动应用开发框架
随着智能手机和平板电脑的普及,移动应用的开发越来越流行,基于JavaScript的移动开发框架也逐渐成为主流。移动开发与桌面应用的开发相比,有个显著的不同,那就是,移动应用绝大多数是基于触摸屏的应用。
1226 0
|
移动开发 JavaScript 前端开发
8个最佳的JavaScript移动应用开发框架
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/9935445 《8个最佳的JavaScript移动应用开发框架》 作者:chszs,转载需注明。
1066 0
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
50 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75