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

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>
posted on 2022-06-23 22:34  Steam残酷  阅读(84)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3