HTML基础四-VUE
一、VUE
VUE官网：https://cn.vuejs.org/v2/guide/
1.1 Vue简介
VUE与JS的区别
VUE在JS的基础上进行了优化
增加VUE最强大的特点，对数据操作特别的友好
（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化
不失优雅
Vue虽然是一个比较轻量级的框架，简单轻量的同时还非常的人性化，其提供的API也是非常的容易理解，同时也提供了一些很便捷的指令和属性。
1.2 Vue基础写法
1、一个最基础的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--模板语言-->
{{msg}}
</div>
<!--引用外网js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
// 最基础实例Vue的方法
var vm = new Vue({
// 元素
el:'#app', // 引用上面APP属性
// 存储数据
data:{
msg:'hi vue!'
} // 对数据操作特别友好
})
</script>
</body>
</html>
2、存储方法methods
2.1 模板语言-更换数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--模板语言-->
<span>{{msg}}</span>
<input type="button" v-on:click="change" value="修改">
</div>
<!--引用外网js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
// 最基础实例Vue的方法
var vm = new Vue({
// 元素
el: '#app',
data: {
msg: 'hi vue!'
}, // 对数据操作特别友好
methods: {
change() {
this.msg = 'hi vue! day1'
},
}
})
</script>
</body>
</html>
2.3 模板语言-三元运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--模板语言-->
<span>{{msg}}</span>
<div>{{flag?'男生':'女生'}}</div> 三元运算
<input type="button" v-on:click="change" value="修改">
</div>
<!--引用外网js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
// 最基础实例Vue的方法
var vm = new Vue({
// 元素
el: '#app',
data: {
msg: 'hi vue!',
flag:true
}, // 对数据操作特别友好
methods: {
change() {
this.flag = false;
this.msg = 'hi vue! day1'
},
}
})
</script>
</body>
</html>
2.3 模板语言-标签跳转
v-on:用于绑定事件
v-bind:用于给标签的属性绑定变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--模板语言-->
<a v-bind:href="a_href">跳转</a>
<input type="button" v-on:click="change" value="修改">
<!--flag为真 跳百度 为假跳博客-->
</div>
<!--引用外网js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
// 最基础实例Vue的方法
var vm = new Vue({
// 元素
el: '#app',
data: {
msg: 'hi vue!',
flag:true,
num:1,
a_href:'http://www.baidu.com'
}, // 对数据操作特别友好
methods: {
change() {
this.a_href = 'https://www.cnblogs.com/zibinchen/'
},
}
})
</script>
</body>
</html>
<input type="button" v-on:click="change" value="修改">
简写方式--> <input type="button" @click="change" value="修改">
<a v-bind:href="a_href">跳转</a>
简写方式-->
<a :href="a_href">跳转</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--模板语言-->
<a :href="a_href">跳转</a>
<input type="button" @click="change" value="修改">
<!--flag为真 跳百度 为假跳博客-->
</div>
<!--引用外网js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
// 最基础实例Vue的方法
var vm = new Vue({
// 元素
el: '#app',
data: {
msg: 'hi vue!',
flag:true,
num:1,
a_href:'http://www.baidu.com'
}, // 对数据操作特别友好
methods: {
change() {
this.a_href = 'https://www.cnblogs.com/zibinchen/'
},
}
})
</script>
</body>
</html>
1.3 Vue模板条件判断
<span v-if="number==10086">移动v-if</span><span v-else-if="number==10010">联通v-else-if</span><span v-else>电信v-else</span> <span v-show="number==10086">移动-v-show</span><span v-show="number==100861">111111</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摩羯座</title>
</head>
<body>
<div id="app">
<!--模板语言-->
<span v-if="number==10086">移动v-if</span>
<span v-else-if="number==10010">联通v-else-if</span>
<span v-else>电信v-else</span>
<span v-show="number==10086">移动-v-show</span>
<span v-show="number==100861">111111</span>
</div>
<!--引用外网js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
// 最基础实例Vue的方法
var vm = new Vue({
// 元素
el: '#app',
data: {
msg: 'hi vue!',
flag:true,
num:1,
a_href:'http://www.baidu.com',
number:10086
}, // 对数据操作特别友好
methods: {
change() {
this.a_href = 'https://www.cnblogs.com/zibinchen/'
},
}
})
</script>
</body>
</html>
1.4 Vue里for循环
循环写在哪个标签上，就生成哪个标签1、列循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摩羯座</title>
</head>
<body>
<div id="app">
<!--循环写在哪个标签上，就生成哪个标签-->
<div v-for="(item,index) in games">{{item}}--{{index}}</div>
</div>
<!--引用外网js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
// 最基础实例Vue的方法
var vm = new Vue({
// 元素
el: '#app',
data: {
msg: 'hi vue!',
flag:true,
num:1,
a_href:'http://www.baidu.com',
number:10086,
games:['绝地求生','英雄联盟','王者荣耀']
}, // 对数据操作特别友好
methods: {
change() {
this.a_href = 'https://www.cnblogs.com/zibinchen/'
},
}
})
</script>
</body>
</html>
2、字典循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摩羯座</title>
</head>
<body>
<div id="app">
<!--循环写在哪个标签上，就生成哪个标签-->
<div v-for="(item,key) in dictgames">{{item}}--{{key}}</div>
</div>
<!--引用外网js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
// 最基础实例Vue的方法
var vm = new Vue({
// 元素
el: '#app',
data: {
msg: 'hi vue!',
flag:true,
num:1,
a_href:'http://www.baidu.com',
number:10086,
games:['绝地求生','英雄联盟','王者荣耀'],
dictgames:{'name':'英雄联盟','company':'蓝洞'}
}, // 对数据操作特别友好
methods: {
change() {
this.a_href = 'https://www.cnblogs.com/zibinchen/'
},
}
})
</script>
</body>
</html>
1.5 双向数据绑定
1、v-model双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摩羯座</title>
</head>
<body>
<div id="app">
<span>span-->{{name}}</span><br>
<!--v-model 双向数据绑定-->
<input type="text" v-model="name">
<input type="button" @click="change" value="修改">
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
"name":'wdc'
},
methods:{
change(){
this.name = '';
}
}
})
</script>
</body>
</html>
2、radio【单选】双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>性别-->{{genderValue}}</span><br>
<input type="radio" value="1" name="gender" v-model="genderValue">男
<input type="radio" value="2" name="gender" v-model="genderValue">女
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
passwd:'',
genderValue:2
},
methods:{
change(){
this.name = '';
}
}
})
</script>
</body>
</html>
3、checkbox+v-model【多选】双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摩羯座</title>
</head>
<body>
<div id="app">
<span>请选择你喜欢的电影-->{{movies}}</span><br>
<input type="checkbox" value="1" v-model="movies">变形金刚
<input type="checkbox" value="2" v-model="movies">复仇者联盟
<input type="checkbox" value="3" v-model="movies">飞驰人生
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
passwd:'',
genderValue:2,
movies:[]
},
methods:{
change(){
this.name = '';
}
}
})
</script>
</body>
</html>
4、v-model【下拉框】双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摩羯座</title>
</head>
<body>
<div id="app">
<span>请选择你喜欢的电影-->{{selectMovie}}</span><br>
<select v-model="selectMovie">
<option disabled value="">请选择</option>
<option value="变形金刚">变形金刚</option>
<option value="复仇者联盟">复仇者联盟</option>
<option value="飞驰人生">飞驰人生</option>
</select>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
passwd:'',
genderValue:2,
movies:[],
selectMovie:'复仇者联盟'
},
methods:{
change(){
this.name = '';
}
}
})
</script>
</body>
</html>
5、通过枚举值取变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摩羯座</title>
</head>
<body>
<div id="app">
<span>请选择你喜欢的电影-->{{selectMovie}}</span><br>
<select v-model="selectMovie">
<option v-for="option in options" :value="option.id">{{option.name}}</option>
</select>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
passwd:'',
genderValue:2,
movies:[2,3],
selectMovie:'',
options:[{"name":"变形金刚","id":1},{"name":"复仇者联盟","id":2},{"name":"飞驰人生","id":3}]
}, // 枚举： 变形金刚==1，复仇者联盟==2，飞驰人生==3
methods:{
change(){
this.name = '';
}
}
})
</script>
</body>
</html>
1.6 Filters添加参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摩羯座</title>
</head>
<body>
<div id="app">
<span>{{age|changeAge('wdc','真')}}</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
passwd:'',
genderValue:2,
movies:[2,3],
selectMovie:'',
options:[{"name":"变形金刚","id":1},{"name":"复仇者联盟","id":2},{"name":"飞驰人生","id":3}],
age:18
},
methods: {
change() {
this.name = '';
}
},
filters:{
changeAge(age,name,f){
if (age==18){
return name+f+'年轻'
}
}
}
})
</script>
</body>
</html>
二、生命周期 axios
在SPA的项目开发过程中，前端和后端进行数据交互有很多种方式，这里说常用的axios的方式，基本类似JQ的Ajax。
如果想在项目中使用axios，首先要进行安装。并在main.js中进行注册。
安装并注册完成后，就可以在组件中使用了。比如我们通过钩子函数（mounted）当Vue实例和页面进行绑定后就开始请求我们的数据。
2.1 钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>{{name}}</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
},
methods:{
},
filters:{
},
// 钩子函数
created:function () {
//数据初始化后
//假设 我们限制有一个列表的页面，列表的数据就可以通过created 进行请求
this.name='wdc';
console.log('created')
},
// mounted:function () {
// //标签和数据相结合前调用了mounted
// console.log('mounted')
// }
})
</script>
</body>
</html>
2.2 使用axios发送请求
1、启动mock.py
import flask
from flask_cors import CORS
server = flask.Flask(__name__)
CORS(server, supports_credentials=True)
server.config['JSON_AS_ASCII'] = False
@server.route("/api/project", methods=["get", "put", "post", "delete"])
def project():
print(flask.request.args)
if flask.request.method == "GET":
data = {"code": 0, "msg": "操作成功", "data": [
{"id": 2, "create_time": "2019-11-13 10:42:38", "name": "测试本机项目", "desc": "测试本机项目", "user": "dsx",
"host": "http://127.0.0.1:8000"},
{"id": 1, "create_time": "2019-11-12 22:02:04", "name": "金桔宝", "desc": "金桔宝", "user": "dsx",
"host": "127.0.0.1:8080"}], "count": 2}
else:
data = {
"code": 0,
"msg": "成功"
}
return flask.jsonify(data)
@server.route("/api/parameter", methods=["get", "put", "post", "delete"])
def parameter():
print(flask.request.args)
if flask.request.method == "GET":
data = {"code": 0, "msg": "操作成功", "data": [{"id": 5, "name": "username", "desc": "用户名", "value": "dsx"},
{"}], "count": 2}
else:
data = {
"code": 0,
"msg": "成功"
}
return flask.jsonify(data)
@server.route("/api/interface", methods=["get", "put", "post", "delete"])
def interface():
print(flask.request.values)
if flask.request.method == "GET":
data = {"code": 0, "msg": "操作成功", "data": [
{"id": 4, "create_time": "2019-11-13 12:21:48", "update_time": "2019-11-13 12:21:48", "name": "获取参数接口",
"uri": "/api/parameter", "params": None, "headers": "{\"token\":\"${token}\"}", "project_id": 2,
"user": "dsx", "project": "测试本机项目"},
{"id": 3, "create_time": "2019-11-13 10:49:04", "update_time": "2019-11-13 10:49:04", "name": "项目接口",
"uri": "/api/project", "params": None, "headers": "{\"token\":\"${token}\"}", "project_id": 2,
"user": "dsx", "project": "测试本机项目"},
{"id": 2, "create_time": "2019-11-13 10:43:20", "update_time": "2019-11-13 10:43:20", "name": "登录接口",
"uri": "/api/login", "params": None, "headers": None, "project_id": 2, "user": "dsx", "project": "测试本机项目"},
{"id": 1, "create_time": "2019-11-12 22:02:35", "update_time": "2019-11-12 22:02:35", "name": "接口名称",
"uri": "/api/login", "params": "{\"key\":\"1\"}", "headers": "{\"key1\":\"value1\"}", "project_id": 1,
"user": "dsx", "project": "金桔宝"}], "count": 4}
else:
data = {
"code": 0,
"msg": "成功"
}
return flask.jsonify(data)
@server.route("/api/case_collection", methods=["get", "put", "post", "delete"])
def case_collection():
print(flask.request.values)
if flask.request.method == "GET":
data = {"code": 0, "msg": "操作成功", "data": [
{"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13",
"desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705",
"status": 3, "project_name": "测试本机项目", "case_count": 3},
{"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13",
"desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705",
"status": 3, "project_name": "测试本机项目", "case_count": 3},
{"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13",
"desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705",
"status": 3, "project_name": "测试本机项目", "case_count": 3},
{"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13",
"desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705",
"status": 3, "project_name": "测试本机项目", "case_count": 3},
{"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13",
"desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705",
"status": 3, "project_name": "测试本机项目", "case_count": 3},
{"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13",
"desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705",
"status": 3, "project_name": "测试本机项目", "case_count": 3},
{"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13",
"desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705",
"status": 3, "project_name": "测试本机项目", "case_count": 3},
{"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13",
"desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705",
"status": 3, "project_name": "测试本机项目", "case_count": 3},
{"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13",
"desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705",
"status": 3, "project_name": "测试本机项目", "case_count": 3}], "count": 9}
else:
data = {
"code": 0,
"msg": "成功"
}
return flask.jsonify(data)
@server.route("/api/run", methods=["post"])
def case_run():
data = {
"code": 0,
"msg": "成功"
}
return flask.jsonify(data)
@server.route("/api/run_collection", methods=["post"])
def run_collection():
data = {
"code": 0,
"msg": "成功"
}
return flask.jsonify(data)
@server.route("/api/case", methods=["get", "put", "post", "delete"])
def case():
print(flask.request.values)
if flask.request.method == "GET":
data = {"code": 0, "msg": "操作成功", "data": [
{"id": 8, "create_time": "2019-11-13 17:01:16", "update_time": "2019-11-13 17:01:16", "title": "测试",
",
"params": None, "headers": None, "is_json": False, "json": None, "status": 2, "report_batch": None,
"project_name": "测试本机项目", "interface_name": "/api/parameter", "rely_case": []},
{"id": 6, "create_time": "2019-11-13 15:40:43", "update_time": "2019-11-13 15:40:43", "title": "创建参数",
",
"params": "{\"name\":\"测试\",\"desc\":\"测试\",\"value\":\"123\"}", "headers": None, "is_json": False,
"json": None, "status": 999, "report_batch": "71cd8d7d-f18a-46b6-b871-bbc159863883",
"project_name": "测试本机项目", "interface_name": "/api/parameter", "rely_case": []},
{"id": 5, "create_time": "2019-11-13 12:33:07", "update_time": "2019-11-13 12:33:07", "title": "参数请求",
"project_id": 2, "interface_id": 4, "user": "dsx", "method": 2, "cache_field": "id", "check": "code=0",
"params": "{\"project_id\":\"2\"}", "headers": None, "is_json": False, "json": None, "status": 1,
"report_batch": "cf9c57e5-eba0-4be9-b0c2-6d08002d2130", "project_name": "测试本机项目",
"interface_name": "/api/parameter", "rely_case": [{"id": 4, "title": "项目请求"}]},
{"id": 4, "create_time": "2019-11-13 10:49:39", "update_time": "2019-11-13 10:49:39", "title": "项目请求",
"project_id": 2, "interface_id": 3, "user": "dsx", "method": 2, "cache_field": None, "check": "code=0",
"params": None, "headers": None, "is_json": False, "json": None, "status": 1,
"report_batch": "c1440343-89aa-46a1-8fe8-7740b35ce854", "project_name": "测试本机项目",
"interface_name": "/api/project", "rely_case": [{"id": 3, "title": "本机登录"}]},
{"id": 3, "create_time": "2019-11-13 10:44:33", "update_time": "2019-11-13 10:44:33", "title": "本机登录",
"project_id": 2, "interface_id": 2, "user": "dsx", "method": 1, "cache_field": "token", "check": "code=0",
"params": "{\"username\":\"17610105018\",\"password\":\"123456\"}", "headers": None, "is_json": False,
"json": None, "status": 1, "report_batch": "50154aa1-335c-42f8-a224-f7d7819eae35",
"project_name": "测试本机项目", "interface_name": "/api/login", "rely_case": []},
{"id": 2, "create_time": "2019-11-13 00:11:03", "update_time": "2019-11-13 00:11:03", "title": "test2",
",
"params": None, "headers": None, "is_json": False, "json": None, "status": 2, "report_batch": None,
"project_name": "金桔宝", "interface_name": "/api/login", "rely_case": [{"id": 1, "title": "登录用例"}]},
{"id": 1, "create_time": "2019-11-12 22:03:13", "update_time": "2019-11-12 22:03:13", "title": "登录用例",
",
"params": None, "headers": None, "is_json": False, "json": None, "status": 2, "report_batch": None,
"project_name": "金桔宝", "interface_name": "/api/login", "rely_case": []}], "count": 7}
else:
data = {
"code": 0,
"msg": "成功"
}
return flask.jsonify(data)
@server.route("/api/join_case", methods=["post", "get"])
def join_case():
print(flask.request.values)
if flask.request.method == "GET":
data = {"code": 0, "msg": "操作成功", "data": {
"all_case": [{"id": 8, "title": "测试"}, {"id": 6, "title": "创建参数"}, {"id": 5, "title": "参数请求"},
{"id": 4, "title": "项目请求"}, {"id": 3, "title": "本机登录"}], "join_case": [5, 4, 3]}}
else:
data = {
"code": 0,
"msg": "成功"
}
return flask.jsonify(data)
# @server.route("/api/case_response", methods=["get"])
# def case_response():
# print(flask.request.values)
# if flask.request.method == "GET":
#
# data = {
# "code": 0,
# "msg": "成功",
# "data": {
# "all_case": [{"id": 1, "name": "登陆用例", "create_time": "2019-07-21 18:01:02",
# "update_time": "2019-07-21 18:01:02",
# "project_name": "牛牛测试项目1", "response": "回归流程使用", "case_count": 5,
# "report_id": 1,
# "report_name": "2019-08-06测试报告", "user": "牛牛"},
# {"id": 2, "name": "登陆用例1", "create_time": "2019-07-21 18:01:02",
# "update_time": "2019-07-21 18:01:02",
# "project_name": "牛牛测试项目2", "project_id": 2, "desc": "冒烟测试使用", "case_count": 4,
# "report_id": 2,
# "report_name": "2019-08-06测试报告", "user": "牛牛"},
# {"id": 3, "name": "登陆用例2", "create_time": "2019-07-21 18:01:02",
# "update_time": "2019-07-21 18:01:02",
# "project_name": "牛牛测试项目3", "project_id": 3, "desc": "支付流程", "case_count": 3,
# "report_id": 3,
# "report_name": "2019-08-06测试报告", "user": "牛牛"}],
# "join_case": [1]
#
# }
# }
# else:
# data = {
# "code": 0,
# "msg": "成功"
# }
# return flask.jsonify(data)
@server.route("/api/login", methods=["post"])
def login():
data = {
"code": 0,
"msg": "成功",
"token": "token1234355",
"user": "牛牛"
}
return flask.jsonify(data)
@server.route("/api/logout", methods=['get'])
def logout():
data = {
"code": 0,
"msg": "成功"
}
return flask.jsonify(data)
@server.route("/api/report", methods=['get'])
def report():
data = {"code": 0, "msg": "操作成功", "data": [
{"id": 145, "create_time": "2019-11-23 12:53:34", "update_time": "2019-11-23 12:53:34",
"url": "http://127.0.0.1:8000/api/parameter", "project": 2, "title": "参数请求",
"params": "{\"project_id\": \"2\"}",
"response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 5, 'name': 'username', 'desc': '用户名', 'value': 'dsx'}, {'id': 4, 'name': '测试', 'desc': '测试', 'value': '123'}], 'count': 2}",
"case": 5, "case_collection": "本机集合13", "batch": "111e8fa4-4407-44cf-97f7-ee9a2cd1b9b2", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-23 12:53:34", "check": "code=0", "method": "GET"},
{"id": 144, "create_time": "2019-11-23 12:53:32", "update_time": "2019-11-23 12:53:32",
"url": "http://127.0.0.1:8000/api/project", "project": 2, "title": "项目请求", "params": "{}",
"response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8000'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}",
"case": 4, "case_collection": "本机集合13", "batch": "111e8fa4-4407-44cf-97f7-ee9a2cd1b9b2", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-23 12:53:32", "check": "code=0", "method": "GET"},
{"id": 143, "create_time": "2019-11-23 12:53:31", "update_time": "2019-11-23 12:53:31",
"url": "http://127.0.0.1:8000/api/login", "project": 2, "title": "本机登录",
"params": "{\"username\": \"17610105018\", \"password\": \"123456\"}",
"response": "{'code': 0, 'msg': '操作成功', 'token': '783d2c6ded55ca4f5bb865923ff29cbc', 'user': 'dsx', 'user_id': 1}",
"case": 3, "case_collection": "本机集合13", "batch": "111e8fa4-4407-44cf-97f7-ee9a2cd1b9b2", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-23 12:53:31", "check": "code=0", "method": "POST"},
{"id": 142, "create_time": "2019-11-23 12:53:09", "update_time": "2019-11-23 12:53:09",
"url": "http://127.0.0.1:8000/api/parameter", "project": 2, "title": "创建参数",
"params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}",
"response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6, "case_collection": "单用例运行",
"batch": "71cd8d7d-f18a-46b6-b871-bbc159863883", "reason": "校验点写法出错", "duration": 100, "status": 999,
",
"method": "POST"}, {"id": 141, "create_time": "2019-11-23 12:53:04", "update_time": "2019-11-23 12:53:04",
"url": "http://127.0.0.1:8000/api/login", "project": 2, "title": "本机登录",
"params": "{\"username\": \"17610105018\", \"password\": \"123456\"}",
"response": "{'code': 0, 'msg': '操作成功', 'token': 'cc0c3eb41b9b6be9b01d726523dcf1b9', 'user': 'dsx', 'user_id': 1}",
"case": 3, "case_collection": "单用例运行", "batch": "50154aa1-335c-42f8-a224-f7d7819eae35",
"reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目",
"run_user": "dsx", "run_time": "2019-11-23 12:53:04", "check": "code=0", "method": "POST"},
{"id": 140, "create_time": "2019-11-23 12:51:34", "update_time": "2019-11-23 12:51:34",
"url": "http://127.0.0.1:8000/api/login", "project": 2, "title": "本机登录",
"params": "{\"username\": \"17610105018\", \"password\": \"123456\"}",
"response": "{'code': 0, 'msg': '操作成功', 'token': '8d2bba744a35f76b0ea99ccc296feff4', 'user': 'dsx', 'user_id': 1}",
"case": 3, "case_collection": "单用例运行", "batch": "999c5990-6bd3-406f-8750-3b1b9a16ec50", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-23 12:51:34", "check": "code=0", "method": "POST"},
{"id": 139, "create_time": "2019-11-23 12:50:51", "update_time": "2019-11-23 12:50:51",
"url": "http://127.0.0.1:8080/api/login", "project": 2, "title": "本机登录",
"params": "{\"username\": \"17610105018\", \"password\": \"123456\"}",
"response": "{'msg': \"请求接口出错，http://127.0.0.1:8080/api/login,HTTPConnectionPool(host='127.0.0.1', port=8080): Max retries exceeded with url: /api/login (Caused by NewConnectionError('<urllib3.connection.HTTPConnection object at 0x10555d860>: Failed to establish a new connection: [Errno 61] Connection refused',))\"}",
"case": 3, "case_collection": "单用例运行", "batch": "753a6a27-98d7-42c6-b244-8096b53ce38c",
"reason": "code和预期结果不一致，预期结果【0】，实际结果【空】,运算符【=】", "duration": 100, "status": 1, "user": 1,
"project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-23 12:50:51", "check": "code=0",
"method": "POST"}, {"id": 138, "create_time": "2019-11-15 16:21:56", "update_time": "2019-11-15 16:21:56",
"url": "http://127.0.0.1:8080/api/project", "project": 2, "title": "项目请求", "params": "{}",
"response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8080'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}",
"case": 4, "case_collection": "单用例运行", "batch": "c1440343-89aa-46a1-8fe8-7740b35ce854",
"reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目",
"run_user": "dsx", "run_time": "2019-11-15 16:21:56", "check": "code=0", "method": "GET"},
{"id": 137, "create_time": "2019-11-15 16:21:54", "update_time": "2019-11-15 16:21:54",
"url": "http://127.0.0.1:8080/api/login", "project": 2, "title": "本机登录",
"params": "{\"username\": \"17610105018\", \"password\": \"123456\"}",
"response": "{'code': 0, 'msg': '操作成功', 'token': '1c9d51ccae8e7606ab5cc2c22a48650e', 'user': 'dsx', 'user_id': 1}",
"case": 3, "case_collection": "单用例运行", "batch": "c1440343-89aa-46a1-8fe8-7740b35ce854", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-15 16:21:54", "check": "code=0", "method": "POST"},
{"id": 136, "create_time": "2019-11-15 16:21:42", "update_time": "2019-11-15 16:21:42",
"url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数",
"params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}",
"response": "{'code': -2, 'msg': '请登录！'}", "case": 6, "case_collection": "单用例运行",
"batch": "359810f9-9e16-40a2-81b4-e010c4db9e44", "reason": "校验点写法出错", "duration": 100, "status": 999,
",
"method": "POST"}, {"id": 135, "create_time": "2019-11-13 18:15:37", "update_time": "2019-11-13 18:15:37",
"url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数",
"params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}",
"response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6,
"case_collection": "单用例运行", "batch": "b2a61952-88ed-43d4-b43a-b847a69ba82b",
"reason": "校验点写法出错", "duration": 100, "status": 999, "user": 1, "project_name": "测试本机项目",
", "method": "POST"},
{"id": 134, "create_time": "2019-11-13 18:14:55", "update_time": "2019-11-13 18:14:55",
"url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数",
"params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}",
"response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6, "case_collection": "单用例运行",
"batch": "42677205-d36a-4792-8b17-7ca71960e4bc", "reason": "校验点写法出错", "duration": 100, "status": 999,
",
"method": "POST"}, {"id": 133, "create_time": "2019-11-13 18:12:10", "update_time": "2019-11-13 18:12:10",
"url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数",
"params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}",
"response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6,
"case_collection": "单用例运行", "batch": "c19a3b82-e1f7-4bb4-b87f-4520c1590073",
"reason": "验证通过", "duration": 100, "status": 999, "user": 1, "project_name": "测试本机项目",
", "method": "POST"},
{"id": 132, "create_time": "2019-11-13 17:29:58", "update_time": "2019-11-13 17:29:58",
"url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "参数请求",
"params": "{\"project_id\": \"2\"}",
"response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 4, 'name': '测试', 'desc': '测试', 'value': '123'}], 'count': 1}",
"case": 5, "case_collection": "单用例运行", "batch": "cf9c57e5-eba0-4be9-b0c2-6d08002d2130", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-13 17:29:58", "check": "code=0", "method": "GET"},
{"id": 131, "create_time": "2019-11-13 17:29:57", "update_time": "2019-11-13 17:29:57",
"url": "http://127.0.0.1:8080/api/project", "project": 2, "title": "项目请求", "params": "{}",
"response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8080'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}",
"case": 4, "case_collection": "单用例运行", "batch": "cf9c57e5-eba0-4be9-b0c2-6d08002d2130", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-13 17:29:57", "check": "code=0", "method": "GET"},
{"id": 130, "create_time": "2019-11-13 17:29:55", "update_time": "2019-11-13 17:29:55",
"url": "http://127.0.0.1:8080/api/login", "project": 2, "title": "本机登录",
"params": "{\"username\": \"17610105018\", \"password\": \"123456\"}",
"response": "{'code': 0, 'msg': '操作成功', 'token': 'd91da70a2394669cdc0e7bef4a5ec222', 'user': 'dsx', 'user_id': 1}",
"case": 3, "case_collection": "单用例运行", "batch": "cf9c57e5-eba0-4be9-b0c2-6d08002d2130", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-13 17:29:55", "check": "code=0", "method": "POST"},
{"id": 129, "create_time": "2019-11-13 17:29:28", "update_time": "2019-11-13 17:29:28",
"url": "http://127.0.0.1:8080/api/project", "project": 2, "title": "项目请求", "params": "{}",
"response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8080'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}",
"case": 4, "case_collection": "单用例运行", "batch": "1d10fdaa-698b-4fef-a8a8-59e53576f5ae", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-13 17:29:28", "check": "code=0", "method": "GET"},
{"id": 128, "create_time": "2019-11-13 17:29:27", "update_time": "2019-11-13 17:29:27",
"url": "http://127.0.0.1:8080/api/login", "project": 2, "title": "本机登录",
"params": "{\"username\": \"17610105018\", \"password\": \"123456\"}",
"response": "{'code': 0, 'msg': '操作成功', 'token': 'd5e84d54c497e74a746ffeaa061cc28e', 'user': 'dsx', 'user_id': 1}",
"case": 3, "case_collection": "单用例运行", "batch": "1d10fdaa-698b-4fef-a8a8-59e53576f5ae", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-13 17:29:27", "check": "code=0", "method": "POST"},
{"id": 127, "create_time": "2019-11-13 17:29:20", "update_time": "2019-11-13 17:29:20",
"url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数",
"params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}",
"response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6, "case_collection": "单用例运行",
"batch": "a64261bd-c5d3-4b18-8c61-a549e7be29c6", "reason": "code和预期结果不一致，预期结果【0】，实际结果【-1】,运算符【=】",
"duration": 100, "status": 999, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
", "method": "POST"},
{"id": 126, "create_time": "2019-11-13 17:28:16", "update_time": "2019-11-13 17:28:16",
"url": "http://127.0.0.1:8080/api/project", "project": 2, "title": "项目请求", "params": "{}",
"response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8080'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}",
"case": 4, "case_collection": "本机集合13", "batch": "117ebcf4-fdec-4ebc-a9b4-5628f4b79abb", "reason": "验证通过",
"duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx",
"run_time": "2019-11-13 17:28:16", "check": "code=0", "method": "GET"}], "count": 145}
return flask.jsonify(data)
@server.route("/api/collection_report", methods=['get'])
def collection_report():
data = {"code": 0, "msg": "操作成功",
"data": {"case_collection": "本机集合13", "run_time": "2019-12-05 15:27:21", "case_count": 1, "pass_count": 1,
"run_user": "dsx", "fail_count": 0, "duration": 100,
"report_batch": "e714e8d1-477e-4851-b76a-b57cbd575af7"}}
return flask.jsonify(data)
@server.route("/api/case_report", methods=['get'])
def case_report():
data = {"code": 0, "msg": "操作成功",
"data": {"title": "参数请求", "run_time": "2019-11-13 17:29:58", "project_name": "测试本机项目", "status": 1,
"case_collection": "单用例运行", "duration": 100, "run_user": "dsx",
"url": "http://127.0.0.1:8080/api/parameter", "method": 2, "check": "code=0", "reason": "验证通过",
"params": "{\"project_id\": \"2\"}",
"response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 4, 'name': '测试', 'desc': '测试', 'value': '123'}], 'count': 1}"}}
return flask.jsonify(data)
@server.route("/api/dataInfo", methods=['get'])
def dataInfo():
data = {
"code": 0,
"msg": "成功",
"data": {"project": 128, "interface": 100, "case_join": 100, "caseNum": 100,
"info": {"caseNumInfo": [80, 4.9, 7, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20, 6.4, 3.3],
"runInfo": [2.6, 5.9, 9, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6, 2.3],
"passInfo": [2, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23, 16.5, 12, 6.2]}}
}
return flask.jsonify(data)
@server.route("/api/test", methods=['get'])
def test():
data = {
"code": 0,
"msg": "成功",
"data": [
{"id": 1, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 2, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 3, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 4, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 5, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 5, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 6, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 7, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 8, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 9, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 10, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 11, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 12, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 13, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 14, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 15, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 16, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 17, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 18, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 19, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 20, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
{"id": 21, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看",
"status": "失败", "title": "登录1"},
],
"count": 21
}
return flask.jsonify(data)
server.run("127.0.0.1", port=8080, debug=True)
2、使用axios({}）方法调用接口
2.1 第一种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>{{name}}</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
},
methods:{
},
filters:{
},
// 钩子函数
created:function () {
//数据初始化后
//假设 我们限制有一个列表的页面，列表的数据就可以通过created 进行请求
axios({
method:'post',
url:'http://127.0.0.1:8080/api/project',
}).then(function (response) {
console.log(response)
});
this.name='wdc';
console.log('created')
},
// mounted:function () {
// //标签和数据相结合前调用了mounted
// console.log('mounted')
// }
})
</script>
</body>
</html>
2.2第二种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>{{name}}</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
},
methods:{
},
filters:{
},
// 钩子函数
created:function () {
//数据初始化后
//假设 我们限制有一个列表的页面，列表的数据就可以通过created 进行请求
axios({
method:'get',
url:'http://127.0.0.1:8080/api/project',
// es6最新的函数定义方式
}).then((response)=>{
this.name='wdc2'
})
},
// mounted:function () {
// //标签和数据相结合前调用了mounted
// console.log('mounted')
// }
})
</script>
</body>
</html>
HTML基础四-VUE的更多相关文章
- Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...
- Bootstrap<基础四> 代码
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
- Python 基础 四 面向对象杂谈
Python 基础 四 面向对象杂谈 一.isinstance(obj,cls) 与issubcalss(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls ...
- C#_02.13_基础四_.NET方法
C#_02.13_基础四_.NET方法 一.方法概述: 方法是一块具有名称的代码.可以通过方法进行调用而在别的地方执行,也可以把数据传入方法并接受数据输出. 二.方法的结构: 方法头 AND 方法 ...
- day 68 Django基础四之模板系统
Django基础四之模板系统 本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法 模板渲染的官方文档 关 ...
- day 54 Django基础四之模板系统
Django基础四之模板系统 本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法 模板渲染的官方文档 关于模 ...
- Vue基础之Vue组件
Vue基础之Vue组件 // 组件是可以复用的Vue实例! // 可以把经常重复的功能封装为组件!
- Vue基础之Vue的模板语法
Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...
- Django基础四之测试环境和ORM查询
Django基础四之测试环境和ORM查询 目录 Django基础四之测试环境和ORM查询 1. 搭建测试环境 1.1 测试环境搭建方法: 1.2 使用测试环境对数据库进行CURD 1.3 返回Quer ...
随机推荐
- Windows下MySQL安装流程，8.0以上版本ROOT密码报错及修改
官网下载MySQL安装后,解压,添加环境变量,以管理员方式运行cmd,运行以下命令 mysqld --initialize --console mysqld -install net start my ...
- Navicat的安装和pymysql模块的使用
内容回顾 select distinct 字段1,字段2,... from 表名 where 分组之前的过滤条件 group by 分组条件 having 分组之后过滤条件 order by 排序字段 ...
- Redis（二）特性和学习路线
Redis是高效的内存数据库或者说缓存.对多种数据结构都支持,每种数据结构都有相应的应用场景. 特性 Redis支持非常多的特性,从用途.性能.高可用.数据安全方面都提供了相应的支持和保障. Redi ...
- 【04】Jenkins：基本功能补充说明
写在前面的话 在 Jenkins 中有那么一些功能,可能你几乎不会怎么用到,但是某些时候又能够帮助你解决一些很麻烦的事情.我这里单独的把这些小配置抽离出来作为一个单独章节.很多配置不需要记得,但是要知 ...
- Oracle的数据类型和表的操作
学习笔记: Oracle数据类型 1.创建表 ---创建一个person表 create table person( pid ), pname ) ); 2.修改表结构 --添加一列 )); --修改 ...
- PIESDKDoNet二次开发配置注意事项
在安装完PIESDK进行二次开发的过程中会遇到下面几种常见的开发配置问题,就写一个文档总结一下. 1. 新建项目无PIESDK模板问题 关于新建项目时候,找不到下图中的PIEMainApplic ...
- Python【day 9】函数入门1
1.什么是函数 函数的概念:对功能或者动作的封装 函数的好处:避免重复代码 2.函数的定义 1.函数的定义 def 函数名(形参列表): 函数体(return) 2.函数的调用 函数名(实参列表) 3 ...
- $.fn.extend 与 $.extend的区别
今天看到别人写的jquery 代码都是这样的 $.fn.extend 所以查询了一下,因为自己不是前端开发,看到这样写的,感觉很牛逼.从百度上搜到的感觉解释的还是挺好的,作为记录,方便以后查找. 搜索 ...
- js 实现watch监听数据变化
1.js /** * @desc 属性改变监听,属性被set时出发watch的方法,类似vue的watch * @author Jason * @study https://www.jianshu.c ...
- 为a标签添加鼠标样式和背景颜色
发现对a标签设置行高,高度,宽度都只能使样式应用到文字上,而不是自己想要的带空白的整个区域,这个时候,可以使用padding样式为其设置内边距,来增大面积,从而使其样式能充满空白,更加好看. .btn ...