vue之与后端交互、计算属性、监听属性、vue生命周期

最新推荐文章于 2024-06-01 15:46:07 发布

我每天都好饿

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量72

点赞数

分类专栏： vue 文章标签： vue.js 交互前端

本文链接：https://blog.csdn.net/qq_44779250/article/details/133013745

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

与后端交互三种方式

原生js，可以开启ajax，但是原生js开启，比较麻烦，需要做浏览器兼容，有坑(基本不写)
jq，写了个兼容所有浏览器的 $.ajax()，不仅仅有ajax，还封装了很多dom操作
如果vue中使用它，不合适
axios：第三方的ajax包（咱们用）
fetch：原生js发送ajax请求，有的浏览器也不兼容

jquery的ajax

<script>
	ajaxClick(){
	    $.ajax({
	        url:'http://127.0.0.1:8000/user/',
	        type:'get',
	        success:data =>{ m
	            console.log('成功')
	            this.ajaxData = data
	
	        }
	    })
	}
</script>

fetch

提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应

它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源

<script>
	ajaxClick(){
		fetch('http://127.0.0.1:8000/user/').then(res=>res.json()).then(res=>{
			this.ajaxData = res
		    })
	}
</script>

使用axios

① Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
② axios官网：http://www.axios-js.com/

使用axios需要导入
cdn导入：<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
ajaxClick(){
                axios('http://127.0.0.1:8000/user/').then(res=> {
                    console.log(res.data)
                    this.ajaxData = res.data
                })
            }
</script>

显示电影案例

数据网址：https://m.maizuo.com/v5/?co=mzmovie#/films/nowPlaying

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--    <script src="./js/vue.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="c1">
    <div class="text-center">
        <button type="button" class="btn btn-success" @click="ajaxClick">点击发送请求</button>
        <li v-for="item in ajaxData">
            <ul>电影：{{item.name}}</ul>
            <ul>导演：{{item.director}}</ul>
            <ul>简介：{{item.synopsis}}</ul>
            <img :src="item.poster" alt="">

        </li>
    </div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            ajaxData:''
        },
        methods: {
            ajaxClick(){
                axios('http://127.0.0.1:8000/films/').then(res=> {
                    this.ajaxData = res.data.data.films
                })
            }
        }
    })
</script>
</html>

后端视图类

解决跨域问题只要在返回给前端的数据，请求头中添加Access-Control-Allow-Origin' : '*'即可

class FilmsView(APIView):
    def get(self, request):
        print(1111)
        with open(f'app01/a.txt', 'rt', encoding='utf8') as f:
            data = json.load(f)
        res = Response(data=data)
        # 解决跨域问题
        res['Access-Control-Allow-Origin'] = '*'
        return res

计算属性

计算属性是基于它们的依赖变量进行缓存的
计算属性只有在它的相关依赖变量发生改变时才会重新求值，否则不会变（函数只要页面变化，就会重新运算）
计算属性就像Python中的property，可以把方法/函数伪装成属性
计算属性，必须有返回值

基本使用

计算属性写在computed中
将过滤案例改写成计算属性

<body>
<div id="c1">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center">
                    <h1>过滤案例</h1>
                    <p>输入：<input type="text" v-model="myText" @input="handleInput"></p>
                    <hr>
                    <p v-for="item in NewDataList">{{item}}</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            myText:'',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
        },
        methods:{},
        computed:{
            NewDataList(){
                return this.dataList.filter(itme => itme.indexOf(this.myText)>=0)
            }
        }

    })
</script>

监听属性

当变量发生变化时会被监听（监测到），然后执行函数，
需要再vue里定义一个对象watch，然后以变量名写一个方法，
可以自动传入两个参数，分别是变化后的和变化前的值

应用

<body>
<div id="c1">
    <h1>过滤案例</h1>
    <p>输入：<input type="text" v-model="myText" @input="handleInput"></p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            myText: '',
        },
        methods: {},
        computed: {},
        watch: {
            myText(newText, oldText) {
                // 执行体
            }
        }
    })
</script>

vue生命周期

new Vue()---->创建出来—》页面关闭—》被销毁掉----》整个整个过程经历了一个周期----》vue帮咱们提供了一些钩子函数[写了就会执行，不写就不执行]，到某个阶段，就会触发某个函数的执行

8 个生命周期钩子函数

组件	作用
beforeCreate	创建Vue实例之前调用
beforeMount	渲染DOM之前调用
mounted	渲染DOM之后调用
beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated	重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	销毁之后调用

8个声明周期钩子，什么情况会用到？

created:用的最多，变量初始化完成了(data中得数据)，在这里，我们发送ajax请求
beforeDestroy：组件销毁之前会执行
- 组件创建，就执行一个定时任务[每隔1s，打印一个helloworld]
- 组件销毁，定时任务要销毁，如果定时任务不销毁，会一直执行

<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            myText: '',
        },
        methods: {},
        
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            console.log('mounted')
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        },
    })
</script>