目录
Vue组件文件微微细剖
组件在view
文件中创建 如果需要用到其他小组件可以 在 component
文件中创建并导入
view
文件下:
<template>
<div class="home">
<Nav /> <!--从component中导入的小组件-->
<h1>主页</h1>
</div>
</template>
<!--template标签负责组件的html结构:有且只有一个根标签-->
export default
// script标签负责组件的js逻辑:逻辑固定导出 export default {组件内容}(外界才可以导入)
import Nav from '../components/Nav' // 导入 组件 并且注册
export default {
data(){ // 组件化
return {
back_data: ''
}
},
methods: {},
components: {
Nav, // 注册
},}
scoped
<!--style标签负责组件的css样式:scoped保证样式的组件化 - 样式只在该组件内部起作用-->
<style scoped>
pass
</style>
Vue组件生命周期钩子
* 1)一个组件从创建到销毁的众多时间节点回调的方法
* 2)这些方法都是vue组件实例的成员
* 3)生命周期钩子的作用就是满足在不同时间节点需要完成的事
例子:
// 直接写在export default 里面
beforeCreate() {
console.log('Home组件要创建了');
console.log(this.back_data);
},
created() { // 重要方法:在该钩子中完成后台数据的请求 *****
console.log('Home组件创建成功了');
// 前后台开发时,是从后台请求数据
console.log(this.back_data);
},
beforeMount() {
console.log('Home组件准备加载')
},
mounted() { // 特别耗时的数据请求,可以延后到组件初步加载成功后,再慢慢请求
console.log('Home组件加载完成')
},
destroyed() {
console.log('Home组件销毁成功了')
}
Vue路由
1.touter下的index.js
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
例如我们想要添加一条路由指向一个子组件 那么我们就可以 1.导入 2.写入 案例:
import Course from '../views/Course' // 导入组件
const routes = [
path:'/course',
name:'course',
component:Course // 路由/course指向Course
]
2.路由重定向
{
path: '/home',
redirect: '/', // 路由的重定向
},
3.路由传参数
{
// 第一种路由传参
path: '/course/:pk/detail',
name: 'course-detail',
component: CourseDetail
}
// 第二种路由传参 拼接参数
<router-link :to="`/course/detail?pk=${course.id}`"> </router-link>
补充:全局样式导入
require
// 前台逻辑中加载静态资源采用require!!!!!!!!!!
// 补充:导入的注意事项
// 配置全局样式:@就代表src文件夹的绝对路径,官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css');
img: require('@/assets/img/002.jpg'),
// 同时 只要是导入都适用@为绝对路径
路由跳转
1. router-view标签
<!--App.vue中 适用router-view实现了不同页面的渲染跳转-->
<template>
<div id="app">
<!--页面组件占位符-->
<router-view></router-view>
</div>
</template>
2. router-link标签
<!--可以用 <router-link to="/user">用户页</router-link>完成标签跳转-->
<router-link to="/">主页</router-link>
<!--或者使用name来指定 router中写的name-->
<router-link :to="{name: 'course'}">课程页</router-link>
3.逻辑跳转
this.$router 控制路由跳转
this.$router.push('/'); // 往下再跳转一页
this.$router.push({name:"router中起的name"}); // 解析router中的name并跳转
携带参数:
this.$router.push({name: '路由名', query: {xxx:'xxx'}}); // 添加 ?xxx=xxx参数
this.$router.push({name: '路由名', params: {xxx:'xxx'}}); // 添加 分组传参
this.$router.go(2); // go是历史记录前进后退,正为前进,负为后退,数字为步数
this.$route 控制路由数据
this.$route.path; // 获取当前路径
this.$route.query; // 获取?xxx=xxx后携带的参数
/course/detail?pk=2
this.$route.params; // 获取分组后的参数
/course/:pk/detail