html如何使用vue和ajax

elemetn-ui 官网：

https://element.eleme.cn/#/zh-CN/component/installation

 

html代码

查看代码 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/element.css">
    <script src="./js/vue.js"></script>
    <script src="./js/element.js"></script>
</head>
<body>
引入vue 和 element-ui
<div id="app">
    {{message}}
    <el-row>
        <el-button @click="abc()">默认按钮</el-button>
        <el-button type="primary" @click="ccc()">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el:'#app',
        data:{
            message: 'aaaa',
            flag: true
        },
        methods : {
            abc : function () {
                this.message='bbbbbb'
            },
            ccc: function () {
                this.message = '666666666666'
            }
        },
        // 生命周期钩子
        created (){
        }
    })

</script>
</body>
</html>

把vue.js 、element.js、element.css都放在 resource目录里

下载element.js和vue.js

 

2、axios访问后台

//封装
//axios封装post请求
function axiosPost(method,url,data) {
   let result = axios({
       method: method,
       url: url,
       data: data,
       transformRequest:[function(data){
           let ret = '';
           for(let i in data){
               ret += encodeURIComponent(i)+'='+encodeURIComponent(data[i])+"&";
           }
           return ret;
       }],
       header:{
           'Content-Type':'application/x-www-form-urlencoded'
       }
   }).then(resp=> {
       return resp.data;
   }).catch(error=>{
       window.alert(error);
       return "exception="+error;
   });
   return result;
}

用法：

axiosRequest('post', '/parent/selectOneForPost', {id: 2}) .then(resp =>
                    console.log(111,resp)
                );

 

posted @ 2022-01-16 15:48  得好好活  阅读(579)  评论(0)    收藏  举报