Axios:网络通信

<script>

    var vm =new vue({

        el:"#app",

        data（）{

        return{

        info:{

        //返回的数据必须和json的数据一样

    	name:null,

        city:null

    }

    }

        },

        mouted(){

            axios.get('../data.json').then(response=>(console.log(this.info=response.data)));

        }

    })

</script>

axios：网络请求库

axios.get(地址).then(function(response){},function(err){})
axios.get(地址?查询字符串&).then(function(response){},function(err){})
axios.post(地址，{name:"我的"}).then(function(response){},function(err){})

请求的例子：https://autumnfish.cn/api/joke/list?num=10

Vue的组件

component
- props
- template

<div id="app">

    <zujian v-for="item in item" v-bind:qin="item"></zujian>

</div>

<script>

//定义一个Vue组件

    Vue.component("zujian",{

      props:['qin'],

	template:'<li>{{qin}}</li>'

    });

    var vm =new Vue({

        el:"#app",

        data:{

            item:["java","linus","前端"]

        }

    })

</script>

Vue生命周期

钩子函数

先加载模版--再加载数据

new vue()--实例化Vue对象
init()--初始化事件和生命走起Event&Lifecycle
- 创建实例执行钩子函数 beforeCreate
init--初始化注入 injections&reactivity
- 实例化创建完成后执行钩子Create

计算属性

计算属性的重点在属性上，首先它是个属性，其次这个属性要有计算的能力，这里的计算是一个函数。它就是一个能够将计算结果缓存起来的属性（将行为转化为静态的属性）可以想象缓存

不经常变化的computed
常用的变化的methods

<div id="app">

    <zujian v-for="item in item" v-bind:qin="item"></zujian>

</div>

<script>

//定义一个Vue组件

    Vue.component("zujian",{

      props:['qin'],

	template:'<li>{{qin}}</li>'

    });

    var vm =new Vue({

        el:"#app",

       data:{

	},

        methods:{

		currentTime:function(){

			return Date.now();

        },

            computed:{//计算属性的方法不能和methods名字重复

                currentTime:function(){

                    return Date.now();

                }

            }

        }

    })

</script>

Slot插槽

把简单的html变成我看不懂的

<div id="app">

    <todo>

    	<todo-title slot="todo-title" :title="title"></todo-title>

        <todo-item slot="todo-item" v-for="item in todoItems" :item="item"></todo-item>

    </todo>

</div>

<script>

    Vue.components("todo",{

        template:

                "<div>\

                    <slot name="todo-title"></slot>\

                    <ul>\

                        <slot name="todo-item"></slot>\

                    </ul>\

                </div>"

    }),

        Vue.compoent("todo-title",{

        props:["title"],

        template:'<div>{{title}}</div>'

    }),

        Vue.compoent("todo-item",{

        props:['item']

        template:'<li>{{item}}</li>'

    })

    var vm =new Vue({

        el:"#app",

        data:{

            title:'郝泾钊'，

            todoItems:['JAVA','Linux','前端']

        }

    })

</script>

自定义事件

组件中的组件只能调用组件的方法，但是如何删除Vue实例中的数据呢？用到了vue的参数传递和事件分发

this,$emit(‘自定义事件’，参数)；

<div id="app">

    <todo>

    	<todo-title slot="todo-title" :title="title"></todo-title>

        <todo-item slot="todo-item" v-for="(item,index) in todoItems" :item="item" :index="index" @remove="removeItem(index)" @key="index"></todo-item>

    </todo>

</div>

<script>

    Vue.components("todo",{

        template:

                "<div>\

                    <slot name="todo-title"></slot>\

                    <ul>\

                        <slot name="todo-item"></slot>\

                    </ul>\

                </div>"

    }),

        Vue.compoent("todo-title",{

        props:["title"],

        template:'<div>{{title}}</div>'

    }),

        Vue.compoent("todo-item",{

        props:['item','index']

        template:'<li>{{index}}----{{item}}<button @click=""remove">删除</button></li>',

        methods:{

        remove:function(index){

       this.$emit('remove',index);

    }

    }

    })

    var vm =new Vue({

        el:"#app",

        data:{

            title:'郝泾钊'，

            todoItems:['JAVA','Linux','前端']

        },

        methods:{

            removeItem:function(index){

                this.todoItems.splice(index,1);

            }

        }

    })

</script>

Vue-rooter

index.js:

import Vue from 'vue'

import VueRouter from 'vue-router'

import HomeView from '../views/HomeView.vue'

import Test from "../views/Test";

import Index from "../views/index"

import Update from "@/views/update";

//安装路由

Vue.use(VueRouter)

//配置导出路由

const routes = [

  {

    path: '/update',

    name: 'Update',

    component: Update

  },

  {

    path: '/index',

    name: 'Index',

    component: Index

  },

  {

    path: '/test',

    name: 'Test',

    component: Test

  },

  {

    path: '/',

    name: 'home',

    component: HomeView

  },

  {

    path: '/about',

    name: 'about',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

  }

]

const router = new VueRouter({

  mode: 'history',

  base: process.env.BASE_URL,

  routes

})

//配置导出路由

export default router

main.js:

import Vue from 'vue'

import './plugins/axios'

import App from './App.vue'

import router from './router'

import store from './store'

import './plugins/element.js'

Vue.config.productionTip = false

new Vue({

  //配置路由

  router,

  store,

  render: h => h(App)

}).$mount('#app')

跳转：

<router-link to="/main">首页</router-link>

<router-view></router-view>

嵌套路由

配置：

{

    path:'/login',

    component:Login,

    children:[

        {

            path:"/user/profile",component:UserProfile

        },

         {

            path:"/user/list",component:Userlist

        }

    ]

}

参数传递及重定向

<router-link v-bind:to="{name:'UserProfile',params:{id:1}}"></router-link>

{

    path:'/login',

    component:Login,

    children:[

        {

            path:"/user/profile/:id",name：UserProfile,component:UserProfile，props:true

        },

         {

            path:"/user/list",component:Userlist

        }

    ]

}

//所有元素必须不能再根节点下

<div>

 {{$route.params.id}}

    {{id}}

</div>

....

<script>

    export default{

        props:["id"]

    }

</script>

//重定向

{

path:"/gohome",

redirect:"/main"

}

钩子函数

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', '销毁前');

		clearInterval(this.interID)

	},

	destroyed() {

		console.log('Destroy', '销毁完成');

	}

一个组件从创建到销毁会经历一系列的特殊过程，把执行过程叫做组件的生命周期

每个生命周期都会执行特殊的函数，把这些函数称为生命钩子函数
vue生命周期4组8个常用创建前后，挂载前后︰更新前后，销毁前后

常用的钩子函数

created 创建完成 可以获取this ajax加载 开启定时器

mounted 挂载完成（内容以及渲染完毕） 可以获取dom节点

beforeDestroy 销毁前 清除定时器 移除监听事件

vue父子组件生命周期执行顺序

加载渲染过程：父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted

子组件更新过程：父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated

父组件更新过程：父beforeUpdate —> 父updated

销毁过程：父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed

<script>

    export default{

        props:["id"],

        name:"user",

        beforeRouteEnter:(to,from,next){

        next();

    },

        beforeRouteLeave:(to,from,next){

         next();

        }

    }

</script>

参数说明：

to:路由跳转的路径信息
from:路由跳转前的路由信息
next:路由的控制参数
- next()跳转到下一个页面
- next("/path")改变页面的跳转方向，使其跳转到另一个页面
- next(false)返回原来的页面
- next((vm)=>{})仅再beforeRouteEnter中可用，vm是组件的实例

Axios

特点：

语法：

发送get请求

axios({

url:’/posts’,

//url参数 对象

params:{

id: 1

},

})

.then(a=>{

console.log(a.data);

})

axios默认发get请求搜易不用定义 method属性

发送post请求

axios({

url:’/posts’,

method:‘POST’,

//请求体参数

data:{“title”: “json-server111”,“author111”: “typicode111”}

})

.then(a=>{

console.log(a.data);

})

这里定义method后面的请求形式最好是大写

问题：

1.解决闪烁问题：

白屏--模版

<style>

    [v-clock]{

        display:none;

    }

</style>

巴特西

Axios、Vue组件-生命周期、计算属性、Slot插槽、自定义事件、v-router、钩子函数