三种方式向后端发送请求、Vue全局/局部组件、组件之父传子、计算属性、 （监视器没讲）

day85 Vue(5)

1 与后端交互的几种方式

  • 1.1 发送axios请求
# 一种是重写_this = this, 使用一个变量代替this 的用法，因为this在function函数中指代的是当前函数，而不是当前对象
​
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
​
        methods:{
                get_axios(){
​
                    let _this=this   // 这里重写this,在function函数中指代的是函数，而不是当前对象
                    axios({
                       method:'get',
                        url:'/book1/'
                    }).then(function(res){
                     //   console.log(res.data)
                       _this.book_obj = res.data
                     //   console.log(_this.book_obj)
                    });
                }
        }
​
# 另一种是是用箭头函数的写法，就不需要重写this
methods:{
    get_axios(){
            axios({
                    method:'get',
                    url:'/book1/'
            }).then(res => {
                this.xx = res.data
            })
    }
}
​
​
#
  • 1.2 发送ajax请求
# 使用箭头函数
        methods:{
                get_ajax(){
                    $.ajax({
                       type:'get',
                       url:'/book1/',
                       success:res=>{
                           this.book_obj = res
                        }
                    })
                },
        }
​
# 
methods:{
    get_axios(){
    let _this=this
            $ajax({
                method:'get',
                url:'/book1/'
                success:function(){
                    _this.xx = res
                }   
    }
}
​
  • 使用fetch发送请求
methods:{
                get_fetch() {
                //发送请求
                fetch("/book1/").then(res => res.json()).then(res => {
                    console.log(res)
                    this.book_obj = res
                })
​
            }
        }

2 计算属性

写在 computed :{
    
}, 中
​
<!--    计算属性优点--><!--    1 在同一个页面中使用多次计算属性，不会多次执行--><!--    2 不需要加括号，直接使用-->
eg:
<script src="./js/vue.js"></script>
​
<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>

3 虚拟dom和diff算法

​

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

4.1全局组件
<!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 >我是全局组件:{{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 >我是全局组件:{{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 组件通信之父传子

  • 关键参数

  • 验证属性

// 属性验证
props:{
myname:String,
myshow:Boolean
},
<!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 >我是全局组件:{{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>



posted @ 2021-07-15 19:01  代码歌  阅读(419)  评论(0)    收藏  举报