Vue基础（2）

fetch与axios请求数据

　　fetch基本语法：

fetch(url，{parmas}).then(res=>
　　res.json()  //返回promise对象
).then(data=>{
　　return data     //返回真正数据
}).catch(err=>{
　　throw new Error(err)
})

　　get请求:

        <script type="text/javascript">
            fetch("./test.json").then(res=>res.json()).then(res=>{
                console.log(res)
            })
        </script>

　

axios请求

　　引入axios：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

　　axios执行GET

//参数在url中
　　　　<script type="text/javascript">
            axios.get('/user?ID=12345')
            .then(res=>{
　　　　　　　　　　console.log(res);
　　　　　　　})
            .catch(error=>{
                console.log(error);
            })
        </script>
        
　　　　//带参数形式
        <script type="text/javascript">
            axios.get('/user', {
                params: {
                    ID: 12345
                }
            })

.then(res=>{
　　　　　　　　　　console.log(res);
　　　　　　　})
            .catch(error=>{
                console.log(error);
            })

</script>

　　axios执行POST

        <script type="text/javascript">
            axios.post('/user', {
                firstName: 'Fred',
                lastName: 'Flintstone'
            })
            .then(function(response){
                console.log(response);
            })
            .catch(function(error){
                console.log(error);
            })
        </script>

计算属性

　　计算属性定义到 computed 里面，如:

        <script type="text/javascript">
            var vm = new Vue({
                el:"#box",
                data:{
                    myname: "xiaoming"
                },
                computed:{
                    getMyname(){
                        return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1)
                    } //依赖的状态改变了,计算属性会重新计算一遍
                }
            })

        </script>

这段代码的作用是将myname的第一个字符改成大写，getMyname是一个计算属性方法，需要定义到computed里面，调用的时候直接调用 getMyname，如: {{ getMyname }}  后面不用加小括号，计算属性方法当依赖的状态改变了，计算属性会重新计算一遍。

计算属性跟计算方法的区别

　　计算属性效率更高，计算属性调用过第一次后会存有缓存，第二次会直接使用缓存中的结果进行返回，当依赖的状态改变时才重新计算。

　　计算方法每次调用都会重新执行一遍函数，这样效率会降低。

组件化开发

　　为什么要使用组件？比如我们在一个页面中做好了轮播图效果，现在需要在另一个页面中也使用同样的轮播图，这时就需要复制大量代码

　　组件就是类似把这些dom结构css样式,逻辑封装成一个盒子或者说模板， 在需要使用重复的地方调用这个组件就能效果。

全局组件

　　使用 Vue.component定义全局组件，如:

Vue.component("navbar",{
    template:`
        <div>
            <button>返回</button>
            navbar
            <button>主页</button>
        </div>
    `
})

　　Vue.component的第一个参数是组件名，template 的值是html结构的标签

　　调用组件: <组件名></组件名>,如 <navbar></navbar> 这样就能调用定义好的组件了，在浏览器中 组件标签 会自动被替换成 template中的结构数据

　　Vue.component的结构跟Vue的结构差不多,也可以定义methods属性 ，

局部组件

　　说到局部组件，其实当我们创建一个vue实例时，他就是一个root(根)组件，el:命中的元素中就是root组件的模板，根组件可以包含子组件。

　　局部组件是定义在组件内部的组件，使用components属性，如:

<script type="text/javascript">
        Vue.component("navbar",{
            template:`
                <div>
                    <button>返回</button>
                    navbar
                    <button>主页</button>
                    <navbarchild></navbarchild>
                </div>
            `,
            components:{
                navbarchild:{
                    template:`<div>navbarchild</div>`
                }
            }
        })

        new Vue({
            el:"#box"
        })
    </script>

　　这段代码在navbar组件中定义了一个局部组件 navbarchild，这个组件只能被 navbar 使用，根(root)组件是使用不了的。

　　如果需要定义一个组件要能够给所有组件使用，就需要定义成全局组件。

组件编写方式与Vue实例的区别

　　自定义组件需要有一个root element

　　　　一个组件必须有他的根节点，不能有两个根节点，如：

Vue.component("navbar",{
    template:`
        <div>
            <button>返回</button>
            navbar
            <button>主页</button>
            <navbarchild></navbarchild>
        </div>

        <div>111</div>
    `
})

　　　　这个navbar组件有两个同级的根节点，根节点只能有一个，所以这段代码会报错。要解决这个需要在最外层添加一个标签，这个标签可以是h1、p、nav.. 等

　　父节点的data是无法共享的

　　组件可以有data，methods，computed....，但是data 必须是一个函数

　　组件中 data必须是以函数形式写，如:

　　　　

    <script type="text/javascript">
        Vue.component("navbar",{
            template:`
                <div>
                    <button>返回</button>
                    {{ navbarname }}
                    <button>主页</button>
                </div>
            `,
            data(){
                return {
                    navbarname: "nav"
                }
            }
        })

        new Vue({
            el:"#box"
        })
    </script>

　　　　data()函数返回一个对象，这个对象是 data状态。

组件属性传递（父传子）

　　如果要组件中使用父组件中的属性，就 需要组件之间的属性传递，栗子：

　　

        <div id="app">
          <navbar myname='home'></navbar>
          <navbar myname='list'></navbar>
          <navbar myname='shopcar'></navbar>
        </div>

        <script>
            Vue.component("navbar", {
                template:`
                    <div>
                        <button>返回</button>
                        navbar ----- {{ myname }}
                        <button>首页</button>
                    </div>
                `,
                props:['myname']     //接收父组件传来的属性
            })
          const app = new Vue({
            el: "#app",
            data: {
                parentname: 'dict'
            }
          })
        </script>

代码中定义了一个组件 navbar ，同时在 navbar 中设置了 props 属性，该属性值是数组类型，表示需要接收父组件传来的属性，可以接收多个，如: props:['a', 'b', 'c']，这些属性通过父组件传递过来后在自己模板中可以之间使用。

父组件在调用 navbar 时定义了一个属性 myname（这个属性名可以随便起，要跟 navbar 中要接收的属性名一样）,然后把需要传递的值赋给 myname，再通过 myname 属性将值传给子组件。

上面写的属性值传递都是固定的，如果我们需要动态的传递属性值，就需要用到 v-bind ，将myname设置成动态绑定，如：

        <div id="app">
          <navbar :myname='parentname'></navbar>
        </div>

        <script>
            Vue.component("navbar", {
                template:`
                    <div>
                        <button>返回</button>
                        navbar ----- {{ myname }}
                        <button>首页</button>
                    </div>`,
                props:['myname']     //接收父组件传来的属性
            })
          const app = new Vue({
            el: "#app",
            data: {
                parentname: 'list'
            }
          })
        </script>

通过 v-bind 为 myname 动态绑定一个属性 parentname

属性验证

　　有时候在使用组件时，我需要接收一个布尔类型的值，但是调用的时候不小心传了一个字符串类型的值，这样就会造成我们的组件达不到预期的效果

　　怎么解决这问题呢？我们需要用到属性验证：
　　前面我们在 navbar 中设置 props的值时数组类型，这样不会存在属性验证，我们需要将 props的值设置成对象类型 如:

props:{
    myname: String,
    myshow: Boolean
}

props 属性的值是一个对象，对象属性 myname限制的类型是String、myshow是boolen，这样在父组件先子组件传递该属性时，会先验证一下类型是否匹配。

组件属性传递（子传父）

　　父传子是通过属性，子传父需要通过事件来进行传值，栗子：

        <div id="app">
            <child @myevent="handleEvent($event)"></child>
        </div>

        <script type="text/javascript">
            Vue.component("child", {
                template:`
                    <div><button @click="childClick()">将值传给父组件</button>
                    </div>
                `,
                methods:{
                    childClick(){
                        this.$emit("myevent", 1000)
                    }
                }
            });
            const vm = new Vue({
                el: "#app",
                methods:{
                    handleEvent(event){
                        console.log("父组件", event)
                    }
                }
            })
        </script>

　　先来分析 child 组件，在child组件定义了一个childClick()方法，方法中有一行代码 this.$emit("myevent", 1000)，$emit 这个方法用来调用父组件传过来的事件执行方法，第一个参数是事件名 (这个事件名是从父组件传递过来的)，第二个参数是在调用父类事件方法的时候需要传参过去的值（后面还可以跟多个参数）。

　　父组件在调用 child 组件时设置了一个事件 @myevent(事件名自己可以任意定义) 为这个事件绑定了方法 handleEvent 它接收一个参数，当子组件执行 this.$emit("myevent", 1000)  这行代码时，子组件就会调用父组件传递过来的事件方法执行 handleEvent这个方法，并且会将值1000传参给handleEvent执行，这样就实现了组件子传父。