【vue讲解：v-model 之 lazy、number、trim、与后端交互、小电影案例】

2 v-model 之 lazy、number、trim

python 复制代码

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>input 和v-model</h1>
    <input type="text" v-model="name">

    <h1>v-model修饰符：lazy、number、trim</h1>
    <input type="text" v-model.lazy="s1">--->{{s1}}
    <br>
    <input type="text" v-model.number="s2">--->{{s2}}
    <br>
    <input type="text" v-model.trim="s3">--->{{s3}}


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '彭于晏',
            s1: '',
            s2: '',
            s3: '',

        },
    })
</script>
</html>

3 与后端交互

python 复制代码

# 1 使用jq的ajax  ===》不好---》引入了jq框架，好多功能用不到
# 2 原生js  fetch
	提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分
       fetch('http://127.0.0.1:5000/userinfo')
                    .then(response => {
                        return response.json();
                    }).then(data => {
                    this.username = data.username
                    this.age = data.age
                });
# 3 axios  第三方ajax，只有ajax，没有别的，小--》底层还是基于XMLHttpRequest
	  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

3.1 jq发送

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/jq.js"></script>
</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名：{{username}}</p>
    <p>年龄：{{age}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: ''

        },
        methods: {
            handleLoad() {
                // 后端发送请求，拿到数据，赋值给 username和age 页面就有了
                // 1 发送请求方式1 使用 jq的ajax
                $.ajax({
                    url: 'http://127.0.0.1:5000/userinfo',
                    method: 'get',
                    success: data => {
                        // CORS policy  跨域问题---》解决---》后端响应头中加入：Access-Control-Allow-Origin
                        console.log(typeof data)
                        data = JSON.parse(data)
                        this.username = data.username
                        this.age = data.age
                    }
                })
            }
        }
    })
</script>
</html>

3.2 原生js

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/jq.js"></script>
</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名：{{username}}</p>
    <p>年龄：{{age}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: ''

        },
        methods: {
            handleLoad() {
                // 后端发送请求，拿到数据，赋值给 username和age 页面就有了
                // 1 原生fetch发送请求
                fetch('http://127.0.0.1:5000/userinfo')
                    .then(response => {
                        return response.json();
                    }).then(data => {
                    this.username = data.username
                    this.age = data.age
                });
            }
        }
    })
</script>
</html>

3.3 axios

html 复制代码

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

</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名：{{username}}</p>
    <p>年龄：{{age}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: ''

        },
        methods: {
            handleLoad() {
                // 后端发送请求，拿到数据，赋值给 username和age 页面就有了
                // 1 axios发送请求
                axios.get('http://127.0.0.1:5000/userinfo')
                    .then(res => {
                        console.log(res.data); //真正的响应体的数据在res.data
                        this.username = res.data.username
                        this.age = res.data.age
                    })
                    .catch(error => {
                        console.log(error);
                    });

            }
        }
    })
</script>
</html>

4 小电影案例

4.1 后端

python 复制代码

from flask import Flask, jsonify
import json

app = Flask(__name__)


@app.route('/film', methods=['GET'])
def film():
    with open('./film.json', 'rt', encoding='utf-8') as f:
        res = json.load(f)
    res=jsonify(res)
    res.headers['Access-Control-Allow-Origin']='*'
    return res


if __name__ == '__main__':
    app.run()

4.2 前端

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>

</head>
<body>
<div id="app">
    <h1>点击显示小电影案例</h1>
    <button @click="handleLoad">加载</button>
    <div v-for="film in filmList">
        <img :src="film.poster" alt="" height="200px" width="150px">
        <div>
            <h3>{{film.name}}</h3>
            <p>主演：
                <span v-for="item in film.actors">
                {{item.name}} &nbsp;&nbsp;
            </span>
            </p>
            <p>{{film.nation}}|{{film.runtime}}</p>
        </div>
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            filmList: []

        },
        methods: {
            handleLoad() {
                axios.get('http://127.0.0.1:5000/film').then(res => {
                    if (res.data.code == 100) {
                        this.filmList = res.data.results
                    } else {
                        alert(res.data.msg)
                    }
                })
            }
        }
    })
</script>
</html>