【测试平台开发】——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 ...
随机推荐
- BufferCache的简单理解
对于磁盘和文件系统来讲 Buffer对应磁盘数据的缓存,用于读或写. Cache对应文件数据的页缓存,用于读或写. Buffer可以用来聚合多个写操作,Cache则可以理解为预读操作,文件系统通过这两 ...
- 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-1-环境准备与搭建
1.简介 Python+Playwright系列的文章还没有结束,就有好的小伙伴或者童鞋们私信公众号留言,问宏哥什么时候出Java语言的Playwright的自动化测试文章.本来想趁热打铁将Pytho ...
- java --面试题大全
J2EE面试题 文档版本号:V2.0 2016年11月 目 录 1. Java基础部分 8 1.1. 一个".java"源文 ...
- Navicat for mysql 无法连接到虚拟机的linux系统下的mysql
最近在linux Centos7版本的虚拟机上安装了一个MySql数据库,发现本地可以正常ping通虚拟机,但Navicat则无法正常连接到虚拟机里的MySql数据库,经过一番琢磨,发现解决这个问题的 ...
- webpack4.15.1 学习笔记(四) — Tree shaking
目录 Tree shaking 原理 标记效果 副作用代码不可被删除 如何实现 Tree shaking 的几种方法 总结 Tree shaking 本质上为了消除无用的js代码,减少加载文件体积的方 ...
- [oeasy]python0022_框架标题的制作_banner_结尾字符串_end
结尾字符串(end) 回忆上次内容 python3 的程序是一个 5.3M 的可执行文件 python3 里面存的是 cpu 指令 可以执行的那种 我们可以把指令对应的汇编找到 ...
- oeasy教您玩转vim - 81 - # 宏macro的进阶
宏的进阶 macro 回忆 关于宏,上次有4个要点 qa 开始录制宏 q 结束录制宏 @a 应用宏 qA 追加录制宏 甚至可以编辑宏 "ap 把宏作为文本粘贴出来 编辑之后 " ...
- 搭建lnmp环境-nginx关联php-fpm （第三步）
永久关闭防火墙sudo systemctl stop firewalldsudo systemctl disable firewall 有两个防火墙!如果上面那个关闭还不行,就继续关这个后重启. ...
- 【Vue】树状节点接口 与 级联选择框组件
原来有一个组织机构的渲染, 我自己写的我自己看也8太明白了: https://www.cnblogs.com/mindzone/p/14888046.html 现在,有一个位置选择,使用这个级联选择器 ...
- 【SpringMVC】11 拦截器
拦截器是AOP具体的应用 只能使用SpringMVC自己的组件有效 之拦截访问控制器方法的请求, 如果访问的是jsp.html.css.img.js这一类的静态资源,则不会拦截 演示: 编写一个拦截器 ...