【测试平台开发】——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 ...
随机推荐
- mac环境搭建
brew 参考:https://zhuanlan.zhihu.com/p/111014448 ## 更新 homebrew-cask cd "$(brew --repo)"/Lib ...
- 【论文阅读】Exploring the Limitations of Behavior Cloning for Autonomous Driving
Column: January 16, 2022 11:11 PM Last edited time: January 21, 2022 12:23 PM Sensor/组织: 1 RGB Statu ...
- Go 使用原始套接字捕获网卡流量
Go 使用原始套接字捕获网卡流量 Go 捕获网卡流量使用最多的库为 github.com/google/gopacket,需要依赖 libpcap 导致必须开启 CGO 才能够进行编译. 为了减少对环 ...
- Vue2 整理（二）：核心篇（组件化开发）
前言 上一篇连接:vue2 整理:基础篇. 组件化开发 组件概念 组件,对于学Java的人来说的话,这个词所要表达的意思再熟悉不过了. 所谓组件就是:面向对象中的抽象.封装思想:而所谓的组件化就是:把 ...
- 严格根号带修 RMQ
其实很简单,把之前随机数据的解法中维护块内数据的数据结构换成约束 RMQ,这样子复杂度 严格 单点修改 \(O(\sqrt n)\),区间查询 \(O(1)\),线性空间. 唯一的问题是常数太大了,有 ...
- test20230824总结
A 怎么是重构树板子,放在图上都是水题. B 考场上只打了一个暴力,赛后发现似乎是很可做的 C 是一个考察状态设计的 dp 以后要多刷 D 是一道数据结构优化 dp 考场上写出来了却因为空间问题挂了 ...
- yb课堂之个人信息接口开发 《十三》
根据token从查询个人信息接口开发 直接解密token,获取个人信息 通过token解密查询数据库获取个人信息 UserController.java package net.ybclass.onl ...
- Java智能之Spring AI：5分钟打造智能聊天模型的利器
前言 尽管Python最近成为了编程语言的首选,但是Java在人工智能领域的地位同样不可撼动,得益于强大的Spring框架.随着人工智能技术的快速发展,我们正处于一个创新不断涌现的时代.从智能语音助手 ...
- XAMPP的mysql启动失败：Plugin ‘FEEDBACK‘ is disabled
安装完XAMPP后启动mysql,发现启动失败也没有任何提示,通过查看mysql_error日志,描述: 2021-08-11 18:56:53 0 [Note] InnoDB: Mutexes an ...
- 第八节 JMeter基础-高级登录【数据库数据驱动】
声明:本文所记录的仅本次操作学习到的知识点,其中商城IP错误,请自行更改. 背景:获取数据库用户表中的数据进行登录接口测试.思路: 引用jar包[测试计划]. 设置数据库的连接信息,取变量名db1-- ...