Vue编写复杂界面时,可以将html和js分离,使程序逻辑更加清晰。代码如下:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- 使用带参数的方法 -->
<input type="button" value="GET" @click="getInfo">
<!-- 为方法添加修饰符 -->
<input type="button" value="POST" @click="postLogin">
</div>
<script src="./VTest11.js"></script>
</body>
</html>
js代码:
var app = new Vue({
el: "#app",
data: {
msg: ""
},
methods: {
getInfo: function () {
// 使用this变量,访问Vue中的数据
var that = this;
// get请求
axios.get("https://www.baidu.com/").then(
function (response) {
console.log(response);
// 获取返回的数据体
console.log(response.data);
that.mdg = response.data;
},
function (err) {
console.log(err);
}
)
},
postLogin: function () {
axios.post("https://www.baidu.com/", {
username: "test"
}).then(
function (response) {
console.log(response);
},
function (err) {
console.log(err);
}
)
}
},
})
结果如下:
点击按钮即可响应事件。