【测试平台开发】——01Vue前端框架实操
一、VScode官网地址
https://code.visualstudio.com/
但是官网下载贼慢，需要修改下国内地址：
原地址：https://az764295.vo.msecnd.net/stable/507ce72a4466fbb27b715c3722558bb15afa9f48/VSCode-darwin-universal.zip
然后将红框内的部分更换为如下内容：
vscode.cdn.azure.cn <--------就是左边这个
更新后的地址为：https://vscode.cdn.azure.cn/stable/507ce72a4466fbb27b715c3722558bb15afa9f48/VSCode-darwin-universal.zip
这个就是国内的镜像了点开后你会发现速度直接起飞。
参考：《国内下载vscode速度慢问题解决》
二、常用插件
1、中文插件：
Chinese (Simplified) Language Pack for Visual Studio Code
2、ES6语法中的JS代码段：
JavaScript（ES6）code snippets
3、Vetur
4、vue简写代码：
vue vscode snippets
5、（推荐）Auto Close Tag：
自动添加HTML/XML结束标签
6、（推荐）Auto Rename Tag：
自动重命名对应的HTML/XML标签
7、Highlight Matching Tag：
突出显示匹配的开始和结束标签
8、代码校验：
eslint
三、组件库的使用
Vuetify：https://vuetifyjs.com/zh-Hans
四、Vue.js安装
1、直接用 <script> 引入
下载vue.js文件到项目目录下
五、VUE的使用
1、创建html文件
文件夹下创建文件：index.html
2、创建挂载元素引入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>
<!-- 创建挂载元素 -->
<div id="app">
{{msg}} </div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
data:{
msg: "hello world"
}
})
</script>
</body>
</html>
3、VUE的内部指令
1）v-if、v-else：元素是否存在
<body>
<div id="app">
{{msg}}
<button>alert</button>
<div v-if="show">展示</div>
<div v-else>不展示</div>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
// data:数据
data:{
msg: "hello world123",
show:true
},
// methods:方法
methods:{ },
})
</script>
</body>
2）v-show：元素是否显示
<body>
<div id="app">
{{msg}}
<button>alert</button>
<!-- <div v-if="show">展示</div>
<div v-else>不展示</div> -->
<div v-show="show">v-show v-show</div>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
// data:数据
data:{
msg: "hello world123",
show:false
},
// methods:方法
methods:{ },
})
</script>
</body>
虽然是false，但是还是显示dom节点：
3）v-for：循环
①循环数组
<body>
<div id="app">
<!-- {{msg}} -->
<!-- <button>alert</button> -->
<!-- <div v-if="show">展示</div>
<div v-else>不展示</div> -->
<!-- <div v-show="show">v-show v-show</div> -->
<p v-for="(value,index) in arr">{{value}}--{{index}}</p>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
// data:数据
data:{
msg: "hello world123",
show:false,
// arr:数组
arr:['qe','423','fgd','阿达']
},
// methods:方法
methods:{ },
})
</script>
</body>
②循环对象
<body>
<div id="app">
<p v-for="(value,key,index) in obj">{{key}}：{{value}}--{{index}}</p>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
// data:数据
data:{
obj:{
name:'zc',
age:'12'
}, }
})
</script>
</body>
③循环对象数组
<body>
<div id="app">
<p v-for="value in objArr">{{value.name}}--{{value.age}}</p>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
// data:数据
data:{ objArr:[
{
name:'zc1',
age:'11'
},
{
name:'zc2',
age:'12'
},
{
name:'zc3',
age:'13'
}
] }
})
</script>
</body>
4）v-on：绑定事件
<body>
<div id="app">
<button v-on:click="add()">按钮</button>
简写：v-on:click ==> @click
<div>{{count}}</div>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
// data:数据
data:{
count:1
},
// methods:方法
methods:{
add(){
this.count++
}
},
})
</script>
</body>
5）v-bild：绑定属性
<body>
<div id="app">
<div style="width: 100px;height: 100px;border: 5px solid #4fc08d" v-bind:style='bgcolor'></div>
简写 v-bind: ===> :
<div style="width: 100px;height: 100px;border: 5px solid #4fc08d" :style='bgcolor'></div>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
// data:数据
data:{ bgcolor:{
backgroundColor: '#73abfe'
} }
})
</script>
</body>
6）v-model：绑定数据
<body>
<div id="app">
<input type="text" v-model="text">
<button @click="shouText()">打印</button>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
// data:数据
data:{ text:123 },
// methods:方法
methods:{ shouText(){
console.log(this.text)
}
}
})
</script>
</body>
六、Vue的生命周期
<body>
<div id="app">
<!-- {{msg}} -->
<!-- <div v-if="show">展示</div>
<div v-else>不展示</div> -->
<!-- <div v-show="show">v-show v-show</div> -->
<!-- <p v-for="(value,index) in arr">{{value}}--{{index}}</p> -->
<!-- <p v-for="(value,key,index) in obj">{{key}}：{{value}}--{{index}}</p> -->
<!-- <p v-for="value in objArr">{{value.name}}--{{value.age}}</p> --> <!-- <button v-on:click="add()">按钮</button>
简写↓
<button @click="add()">按钮</button>
<div>{{count}}</div> --> <!-- <div style="width: 100px;height: 100px;border: 5px solid #4fc08d" v-bind:style='bgcolor'></div>
简写
<div style="width: 100px;height: 100px;border: 5px solid #4fc08d" :style='bgcolor'></div> --> <input type="text" v-model="text">
<button @click="shouText()">打印</button>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script> <script>
new Vue({
el: "#app",
// data:数据
data:{
msg: "hello world123",
show:false,
// arr:数组
arr:['qe','423','fgd','阿达'],
obj:{
name:'zc',
age:'12'
},
objArr:[
{
name:'zc1',
age:'11'
},
{
name:'zc2',
age:'12'
},
{
name:'zc3',
age:'13'
}
],
count:1,
bgcolor:{
backgroundColor: '#73abfe'
},
text:123 },
// methods:方法
methods:{
add(){
this.count++
},
shouText(){
console.log(this.text)
}
},
created(){
console.log("加载完成111")
}, })
</script>
</body>
【测试平台开发】——01Vue前端框架实操的更多相关文章
- 学习版pytest内核测试平台开发万字长文入门篇
前言 2021年,测试平台如雨后春笋般冒了出来,我就是其中一员,写了一款pytest内核测试平台,在公司落地.分享出来后,有同学觉得挺不错,希望能开源,本着"公司代码不要传到网上去,以免引起 ...
- 自动化测试平台（Vue前端框架安装配置）
Vue简介: 通俗的来说Vue是前端框架,用来写html的框架,可轻量级也可不轻量级 Vue特性: 绑定性,响应性,实时性,组件性 安装软件以及控件: 控件库:element-ui node.js ( ...
- 技术分享 | 一步一步学测试平台开发-Vue restful请求
本文节选自霍格沃兹测试学院内部教材 一般在构建应用时需要访问后端的 API 接口获取后端数据并展示.做这件事的方法有很多种(比如 axios,vue-resource,fetch-jsonp),使用 ...
- EIP权限工作流平台总结-2前端框架
1.预览地址:www.eipflow.com (1) 权限工作流:www.demo.eipflow.com/Account/Login (2) 基础权限版:www.auth.eipflow.com ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 关于使用jqmobi前端框架在phonegap平台上开发时的日期时间选择控件
jqmobi(appframework)作为Intel的一款html5移动前端框架,以其自身轻量级和容易上手获得了很多移动HTML5开发者的喜爱,相对于jquerymobile,它可以说将jQuery ...
- APICloud APP前端框架——手机APP开发、APP制作、APP定制平台
概述 APICloud前端框架,包括api.js和api.css.api.css处理不同平台浏览器的默认样式.api.js是一个JavaScript库.是APICloud为混合移动开发定制的轻量Jav ...
- Selenium之unittest测试框架详谈及实操
申明:本文是基于python3.x及selenium3.x. unittest,也可以称为PyUnit,可以用来创建全面的测试套件,可以用于单元自动化测试(模块).功能自动化测试(UI)等等. 官方文 ...
- unittest测试框架详谈及实操(二)
类级别的setUp()方法与tearDown()方法 在实操(一)的例子中,通过setUp()方法为每个测试方法都创建了一个Chrome实例,并且在每个测试方法执行结束后要关闭实例.是不是觉得有个多余 ...
- ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
随机推荐
- SpringBoot 1.x 2.x配置文件指定服务项目名
SpringBoot版本1.x: server.context-path=/demo SpringBoot版本2.x: server.servlet.context-path=/demo
- 小产品，快变现，Solo社区共建者 James 专访
采访人:徐小夕. 本次受邀采访的嘉宾是Solo社区计划负责人&Solo社区联合创建者 James Pan(老潘). 专访内容 1. Solo社区创建的背景 随着国内软件市场内卷加剧,加上大环境 ...
- windows服务开发demo
0.写在前面 windows7开始,windows服务运行在session 0, 用户程序都运行在session x (x >= 1) 而session之间是有隔离的,实践发现是无法在服务中直接 ...
- [oeasy]python0037_终端_terminal_电传打字机_tty_shell_控制台_console_发展历史
换行回车 回忆上次内容 换行 和 回车 是两回事 换行 对应字节0x0A Line-Feed 水平 不动 垂直 向上喂纸 所以是 feed 回车 对应字节0x0D Carriage-Return 垂直 ...
- 解决“网页源代码编码形式为utf-8，但爬虫代码设置为decode('utf-8')仍出现汉字乱码”的问题
为了用爬虫获取百度首页的源代码,检查了百度的源代码,显示编码格式为utf-8 但这样写代码,却失败了-.. (这里提示:不要直接复制百度的URL,应该是http,不是https!!!) # 获取百度首 ...
- 靶机: Chronos
靶机: Chronos 准备 靶机:https://www.vulnhub.com/entry/chronos-1,735/ 使用 VirtualBox 网络 Host-Only 配置网络环境:htt ...
- 使用uWSGI+nginx部署Django项目（Ubuntu）
对于uwsgi+nginx的部署方式,它的访问关系大概是: 1 the web client <-> the web server <-> the socket <-&g ...
- 20+前端常用的vscode插件（总结推荐）
本篇文章给大家总结分享20多个前端常用的vscode插件.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1. vscode 简介vscode是微软开发的的一款代码编辑器,就如官网上 ...
- 基于.NET开源、强大易用的短链生成及监控系统
前言 今天大姚给大家分享一个基于.NET开源(MIT License).免费.强大易用的短链生成及监控系统:SuperShortLink. 项目介绍 SuperShortLink是一个基于.NET开源 ...
- LLM并行训练7-混合并行总结
概述 根据前面的系列文章, 对预训练大模型里用到的主要并行加速技术做了一系列拆分分析. 但是在实际的训练里往往是多种并行混合训练. 我们要怎么配置这些并行策略才能让训练框架尽可能的减少通信瓶颈, 提升 ...