v-model进阶与vue与axios简单交互

【一】v-model进阶

【1】v-model 之 lazy、number、trim

  • lazy：等待input框的数据绑定时区焦点之后再变化
  • number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
  • trim：去除首位的空格
v-model 之 lazy、number、trim
{{myText1}}
{{myText2}}
{{myText3}}
{{myText4}}

【二】vue与ajax

  • 后端 --》提供接口--》json形式 --》给前端 --》前端拿到再做处理

  • vue中使用ajax

    • jquery的ajax
    • js原生的fetch
    • XMLHTTPRequest--》需要做浏览器兼容
    • fetch方案

  • 第三方axios（最多）

  • 写个后端接口--》django----》flask简单

  • 前后端交互---》跨越问题---》后端处理
    -Access-Control-Allow-Origin

【1】后端发送数据

pip install flask

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/') #根路径
def index():
    res=jsonify({
        'code':100,
        'msg':'成功',
        'userinfo':{'name':'张三', 'age':20}
    })
    res.headers['Access-Control-Allow-Origin']= '*'
    return res

if __name__ == '__main__':
    app.run()
  • 解决跨域问题
res.headers['Access-Control-Allow-Origin']= '*'

【2】使用ajax发请求

         methods: {
            handleLoad(){
                $.ajax({
                    url:'http://127.0.0.1:5000/',
                    method:'get',
                    success:(data)=>{
                        console.log(data)
                        this.name=data.userinfo.name
                        this.age=data.userinfo.age
                    }
                })
            },

【3】使用fetch

            //fetch
            handleLoad(){
                fetch('http://127.0.0.1:5000/')
                    .then(res=>res.json())
                    .then(myJson=>{
                        console.log(myJson)
                        // this.name=myJson.userinfo.name
                        // this.age=myJson.userinfo.age
                    })

            },
            // axios
            handleLoad(){
                axios.get('http://127.0.0.1:5000/')
                    .then(res=>{
                        // 真正的数据在res.data中
                        console.log(res.data)
                        this.name=res.data.userinfo.name
                        this.age=res.data.userinfo.age
                    })
            }

【4】使用axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <script src="./JS/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <h1>点击按钮，获取数据，显示</h1>
    <p>姓名:{{name}}</p>
    <p>年龄:{{age}}</p>
    <br>
    <button @click="handleLoad">获取数据</button>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name:'',
            age:'',
        },
        methods: {
            // axios
            handleLoad(){
                axios.get('http://127.0.0.1:5000/')
                    .then(res=>{
                        // 真正的数据在res.data中
                        console.log(res.data)
                        this.name=res.data.userinfo.name
                        this.age=res.data.userinfo.age
                    })
            }
posted @ 2024-04-29 19:55  -半城烟雨  阅读(20)  评论(0)    收藏  举报