组件axios 封装ajax 用promise封装\ axios.get("url",{}).then(res=>{})

axios 封装ajax 用promise封装\

axios.get("url",{}).then(res=>{}) .catch(err=>{})
vue 项目使用axios请求但是axios不一定要在vue中使用

2.axios({
url:"",
methods:"post/get",
params:{}, //请求需要传递的参数
headers:{cookie tooken Content-Type}
})

请求方式 get post option

数据传递方式
form Data form表单请求方式
Query String 地址栏拼接 axios({})
request post传参 axios.get请求默认传递的是request

数据格式
字符串 JSON JSON.parse() JSON.stringify()

2.创建组件

// 组件化单页面应用/单页面编程
// 单页面应用的优缺点？
// .vue 文件
// 全局私有
// 1.使用vue.component()创建全局组件自定义指令/filter/mixin
// 2.用components:{}创建私有组件
// 3.组件名驼峰式 aB => a-b
// 4.组件名以标签形式放入html中

Vue.component('myTip', {
        // template 创建组件的内容  必须要有一个根标签
        template:`<div @click="a">
            听说web21有个海王，他的名字叫{{name1}}
            <mytip1></mytip1>
            </div>`,
        data(){
            return{
                name1:"张成"
            }
        },
        methods: {
            a(){
                console.log("他一定很帅");
            }
        },
        components:{
            mytip1:{
                template:`<div>Jandy很美！</div>`,
            }
        }
    })

    Vue.component('mytip2', {
        template:"#comp",
        data(){
            return{
                name5:24
            }
        },

    })

    let compzi1 = {
        template:`<div>听说有个大儿子,他的名字叫{{name3}}<compsun1></compsun1></div>`,
        data(){
            return{
                name3:"马跃磊"
            }
        },
        components:{
            compsun1:{
                template:`<div>听说有个大孙子,他的名字叫{{name4}}</div>`,
            data(){
                return{
                    name4:"马士洋"
                }
            }
            }
        }
    }

  new Vue({
    el: '#app',
    data() {
     return{
        name2:"彭忠杰"
     }
    },
    components:{
        compzi1
    }
  });

  new Vue({
    el: '#app1',
    data() {
     return{
     }
    },
  });

3 父子组件之间兄弟之间传值

通过v-bind 声明一个变量接收父级传来的值
子组件通过属性props:[""]来接子组件可以直接用该变量
子组件通过props来接,接收父级传来的参数
this. $emit 触发父级的方法，$ emit("自定义事件名","需要传的实参")

1.父组件传值给子组件通过属性绑定 v-bind 子组件通过属性props:[""]来接子组件可以直接用该变量
2.父组件方法传给子组件通过绑定机制用v-on绑定子组件用 $emit 接收\ 1.子组件值传给父组件通过绑定机制用v-on绑定 this.$ emit方法传方法
2.子组件方法传给父组件 refs获取dom元素子组件绑定ref this.$refs获取方法以及值

兄弟传值

先传给父级再传子级
数据共享中心中间件传值 bus

let bus = new Vue()
发送方: bus. $emit("变量名",参数)\ 接收方： bus.$ on("变量名",fun(){})

4 生命周期

页面的生命周期 html(dom) css 静态资源docoment.ready window.onload

js生命周期 var funcition 从上至下执行同步异步事件关闭页面

vue 生命周期(11个) 挂载顺序钩子函数

1.beforeCreate()
刚刚创建vm 没有创建 view 和 model   dom没有加载 data也没有加载

2.created()
vm初始化结束,data数据加载完毕,dom没有
methods中的函数  放在这里可以直接执行

3.beforeMount()
加载完dom元素  但是数据没有渲染

4. mounted()
加载dom完成  数据挂载结束
虚拟dom加载完成

5.beforeUpdate()
修改数据是触发
数据已经修改  但是页面没有重新渲染

6. updated()
数据修改完 页面也重新渲染完

7.beforeDestroy()
销毁之前

8. destroyed() 
销毁完成之后   销毁所有指令  销毁view视图与数据之间的关系

从组件a跳转组件b 触发6个钩子前一个钩子的销毁前后后一个钩子的创建前后挂载前后

5 分页组件

当父组件传给子组件的值子组件需要将这个值抛给父组件时
1.在当前组件上加 v-model=“变量”
2.子组件用props:["vlaue"]接受
3.子组件用this.$emit("input","实参")抛出