2021-07-15与后端交互的几种方式计算属性虚拟dom 组件介绍组件通信

最新推荐文章于 2024-10-17 08:00:29 发布

m0_56274379

最新推荐文章于 2024-10-17 08:00:29 发布

阅读量76

点赞数

分类专栏： vue 文章标签： vue python

本文链接：https://blog.csdn.net/m0_56274379/article/details/118759123

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了前端与后端交互的三种方式：jQuery的ajax、原生fetch和axios，并展示了在Vue中如何使用。接着，探讨了Vue的计算属性及其优势。最后，讲解了Vue组件的概念，包括全局组件和局部组件，以及父子组件间的数据传递。通过实例演示了如何定义和使用这些组件。

摘要由CSDN通过智能技术生成

1 与后端交互的几种方式

1 向后端发送ajax请求

2 三种方式
    -之前学过jq的ajax函数
        $.ajax({})
    - fetch：原生的
    -axios：vue中用的最多的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
   <div v-for="data in data_list">
       <h3>{{data.name}}</h3>
       <img :src="data.poster" alt="">
       <h5>导演：{{data.director}}</h5>
   </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            data_list: []
        },
        methods: {
            get_data() {
                //发送请求
                // let _this=this
                $.ajax({
                    url: 'http://127.0.0.1:5000/',
                    type: 'get',
                    success: (data) => {
                        let data_obj=JSON.parse(data)
                        // console.log(typeof data_obj)
                        this.data_list = data_obj.data.films
                    }
                    // success: function (data) {
                    //     // console.log(data)
                    //     _this.data_list = data
                    // }
                })
            }
        },
        mounted() {
            this.get_data()
        },
    })
</script>
</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">
    <div v-for="data in data_list">
        <h3>{{data.name}}</h3>
        <img :src="data.poster" alt="">
        <h5>导演：{{data.director}}</h5>
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            data_list: []
        },
        methods: {
            get_data() {
                //发送请求
                fetch("http://127.0.0.1:5000/").then(res => res.json()).then(res => {
                    console.log(res.data.films)
                    this.data_list = res.data.films
                })

            }
        },
        mounted() {
            this.get_data()
        },
    })
</script>
</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">
    <div v-for="data in data_list">
        <h3>{{data.name}}</h3>
        <img :src="data.poster" alt="">
        <h5>导演：{{data.director}}</h5>
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            data_list: []
        },
        methods: {
            get_data() {
                //发送请求
                // axios.get('http://127.0.0.1:5000/').then(res => {
                //     // res.data才是真正后端返回的响应体中的内容
                //         console.log(res.status)
                //     this.data_list = res.data.data.films
                //
                // })
                axios({
                    url: 'http://127.0.0.1:5000/',
                    methods: 'get',

                }).then(res => {
                    // res.data才是真正后端返回的响应体中的内容
                    console.log(res.status)
                    this.data_list = res.data.data.films

                })

            }
        },
        mounted() {
            this.get_data()
        },
    })
</script>
</html>

2 计算属性

<!--    计算属性优点-->
<!--    1 在同一个页面中使用多次计算属性，不会多次执行-->
<!--    2 不需要加括号，直接使用-->

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

<div id="app">
    <input type="text" v-model='name'>
    <br>
    您输入的是：{{get_name()}}
    <br>
    您输入的是2：{{get_name()}}

    <hr>
<!--    您输入的是：{{name.substring(0,1).toUpperCase()+name.substring(1)}}-->
<!--    计算属性优点-->
<!--    1 在同一个页面中使用多次计算属性，不会多次执行-->
<!--    2 不需要加括号，直接使用-->


    <br>
     计算属性：您输入的是：{{upper_name}}
    <br>
     计算属性2：您输入的是：{{upper_name}}
     计算属性2：您输入的是：{{upper_name}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name:''
        },
        computed:{

            upper_name(){
                console.log('计算属性我执行了')
                return this.name.substring(0,1).toUpperCase()+this.name.substring(1)
            },
        },
        methods:{
            get_name(){
                console.log('get_name我执行了')
                return this.name.substring(0,1).toUpperCase()+this.name.substring(1)
            },
        }

    })
</script>
</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">
    <input type="text" v-model='search'>
    <div v-for="data in new_list">
        {{data}}
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            data_list: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac']
        },
        computed: {
            new_list() {
                return this.data_list.filter(item => {
                    return item.indexOf(this.search) > -1
                })


            }


        },
        methods: {}

    })
</script>
</html>

3 虚拟dom和diff算法

4 组件介绍，全局组件，局部组件

1 组件的作用
扩展 HTML 元素，封装可重用的代码，目的是复用
	-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
	-组件把js，css，html放到一起，有逻辑，有样式，有html
    
2 组件分类：局部组件和全局组件

4.1 全局组件

//没有代码提示，语法检查，目前这么用
//后面会使用webpack打包，直接定义成 xx.vue文件，通过webpack打包

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

<div id="app">

    <myheader></myheader>

    <div>我是div</div>

    <myheader></myheader>

</div>
</body>
<script>


    // 定义一个全局组件
    //组件可以有data，methods,computed....,但是data 必须是一个函数

    Vue.component('myheader', {
        template: `
         <div>
            <h1 style="background-color: greenyellow">我是全局组件:{{name}}</h1>
            <button @click="handleClick">点我弹出美女</button>

        </div>
        `,
        data(){
            return {
                name:'lqz'
            }
        },
        methods:{
            handleClick(){
                alert('美女')
            }
        },
        mounted(){},
        computed:{

        }


    })

    var vm = new Vue({
        el: '#app',
        data: {},

    })
</script>
</html>

4.2 局部组件

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

<div id="app">

    <myheader></myheader>

    <div>我是div</div>

    <myheader></myheader>

    <div></div>


</div>
</body>
<script>


    // 定义一个全局组件
    //组件可以有data，methods,computed....,但是data 必须是一个函数

    Vue.component('myheader', {
        template: `
         <div>
            <h1 style="background-color: greenyellow">我是全局组件:{{name}}</h1>
            <button @click="handleClick">点我弹出美女</button>
            <hr>
            <child></child>

        </div>
        `,
        data(){
            return {
                name:'lqz'
            }
        },
        methods:{
            handleClick(){
                alert('美女')
            }
        },
        mounted(){},
        computed:{

        },
        components:{
            child:{
                template: `<div>
                            <span>{{age}}</span>
                            </div>`,
                data(){
                    return {
                        age:19
                    }
                },
                methods:{

                }
            }
        }


    })

    var vm = new Vue({
        el: '#app',
        data: {},

    })
</script>
</html>

5 组件通信之父传子

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

<div id="app">


    <myheader :myname="name" :myshow="false"></myheader>

    {{obj.length}}



</div>
</body>
<script>


    // 定义一个全局组件
    //组件可以有data，methods,computed....,但是data 必须是一个函数

    Vue.component('myheader', {
        template: `
         <div>
            <h1 style="background-color: greenyellow">我是全局组件:{{myname}}</h1>
            <button @click="handleClick">点我弹出美女</button>
            <br>
            {{myshow}}
            <hr>
            <child v-if=""></child>

        </div>
        `,
        data(){
            return {
                name:'lqz'
            }
        },
        methods:{
            handleClick(){
                alert('美女')
            }
        },
        mounted(){},
        computed:{

        },
        components:{
            child:{
                template: `<div>
                            <span>{{age}}</span>
                            </div>`,
                data(){
                    return {
                        age:19
                    }
                },
                methods:{

                }
            }
        },
        // props:['myname'] , //注册一下

        // 属性验证
        props:{
            myname:String,
            myshow:Boolean
        },


    })

    var vm = new Vue({
        el: '#app',
        data: {
            name:'egon'
        },

    })
</script>
</html>