Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
App.vue
<template>
<div>123</div>
<hello>自定义标签</hello>
<OneOne></OneOne>
<!-- <two></two> -->
<!-- 3组件传值 -->
<OneOne title="热门课程"></OneOne>
<!-- 4、 动态绑定 增加冒号可以动态传值,值可以动态绑定 -->
<OneOne :title="title"></OneOne>
<!-- 4.2 多个传值 - 传值的 key {title arr}-> -->
<OneOne :title="title" :arr="arr"></OneOne>
<hr>
<!-- 组件向页面传值 -->
<!-- fun5 跟引入组件事件名称一致 -->
<three @fun5 = "fun4"></three>
<div>{{sc_sum}}</div>
<hr>
<!-- 多组件 多层相互访问 -->
<!-- <four></four> -->
<two>哈哈</two>
<hr>
<five>
<a href="http://www.baidu.com">跳转页面</a>
</five>
<five>
<img style="width:200px;" src="https://img1.baidu.com/it/u=2218815005,3124653454&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
</five>
<five>
<template #img>
<img src="https://img1.baidu.com/it/u=2204132179,643663242&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" alt="">
</template>
</five>
<five>
<!-- v-slot:img2 语法糖 #img2 -->
<template #img2>
<a href="http://www.baidu.com">你好</a>
</template>
</five>
</template>
<script>
// 组件导入。哪个页面使用哪个页面导入
// import from 格式
// 名称 路径
// import moduleName from 'module';
// import HelloWorld from './components/HelloWorld.vue'
import hello from "./components/HelloWorld";
// import One from './components/One.vue';
import OneOne from "./components/OneOne";
import Two from "./components/Two.vue"
// import Three from './components/Three.vue';
// import two from './components/Two.vue';
import three from "./components/Three.vue";
// import Four from "./components/Four.vue";
import Five from "./components/Five.vue";
import Four from './components/Four.vue';
export default {
components: {
// 后面的值是引入的文件
// 前面的lkey是给这个文件下标的名称
hello: hello,
OneOne: OneOne,
three:three,
Two:Two,
Five:Five,
Four,
// Four:Four,
// two:two
},
data() {
return {
arr :{
lh : "小蛇",
hui : "小龙",
},
titel : "www.baidu.com",
sc_sum:0,
php:"百度",
}
},
methods: {
fun4(e){
this.sc_sum =this.sc_sum+ 2;
},
fun3(){
console.log("这是方法三");
},
fun5(){
console.log("这是方法5");
},
},
beforeCreate() {
console.log("1在创建组件之前调用");
},
created() {
console.log("2组件创建完成调用");
},
beforeMount() {
console.log("3模版挂载之前调用");
},
mounted() {
console.log("4模版挂载完成调用");
},
// name: 'App',
// components: {
// HelloWorld
// }
};
</script>
<style scoped >
/* scoped 防止样式穿透 */
div {
color: aqua;
}
</style>
components/OneOne.vue
<template>
<div>
<div style="font-size:30px;color:red;">{{title}}</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- <two></two> -->
<ul>
<!-- 4、v-for 循环,有红色的波浪纹,是因为没有key,唯一标识 -->
<!-- key 的值,要不一样,直接输入字符串,它还是一样的,把它变成变量 -->
<li v-for="(v,key,index) in arr ">{{v}}</li>
<!-- 所以 -->
<li v-for="(v,key,index) in arr" :key="key">{{v}}</li>
<li v-for="(v,key,index) in arr" :key="index">{{v}}</li>
</ul>
</div>
</template>
<script>
// 2、引入组件
// import two from "./Two.vue";
export default {
comments: {
// two
},
data() {
return {
}
},
// 3、组件传值 组件数据交互
// 3.3 组件接收传值的时候,接收的是key的值
// props:["title","arr"]
// 5可以配置传值的数据
props : {
title:{
type :String,
required : true,
default : "www.baidu.com"
},
arr : {
type : Array,
}
},
methods: {
one (){
}
},
};
</script>
<style></style>
components/Two.vue
<template>
<four></four>
</template>
<script>
import Four from "./Four.vue";
export default {
components: {
Four:Four,
},
}
</script>
components/Three.vue
<template>
<button @click="add()">增加余额</button>
</template>
<script>
export default {
methods: {
add(){
// 使用 $emit 方法,调用父文件的方法(https://v3.cn.vuejs.org/api/instance-methods.html#emit)
// 所有子传父,都是通过事件传过去的 click传到add add到fun5 fun5 传到@fun5 fun5到fun4 1传 到e
this.$emit('fun5',1);
}
},
}
</script>
components/Four.vue
<template>
<!-- <button @click="fun">执行方法引入上一层</button> -->
<button @click="fun2">执行方法引入上一层</button>
</template>
<script>
export default {
methods: {
fun () {
// 代表上一层 子组件调用父组件的方法:$parent
this.$parent.fun3();
},
fun2(){
代表上一层
this.$parent.$parent.fun5();
}
},
}
</script>
components/Five.vue
<template>
<!-- 插槽 slot -->
<div>
<ul>
<li>样式穿透</li>
</ul>
<slot></slot>
<!-- 到这里可以是其他的模块,图片,文本,需要自定义,因为每个用组件的地方,可能不一样 -->
<!-- 插槽可以实现组件的扩展性,抽取共性,保留不同
插槽就相当于函数的传值
官网:https://v3.cn.vuejs.org/guide/component-slots.html -->
<!-- <slot></slot> -->
<!-- <slot></slot> -->
<!-- 如果2个插槽没有名字,传一次值,这2个插槽都要显示 -->
<slot name="img"></slot>
<slot name="img2" :php ="php"></slot>
</div>
</template>
<script>
export default {
php:"百度",
}
</script>
<style scoped>
div{
color: brown;
}
</style>
App.vue
<template>
<!-- app.vue页面没有刷新,刷新的是router-view 标签里的内容 -->
<router-view></router-view>
<router-link to="/">我是首页</router-link>|
<router-link to="/lists">我是列表</router-link>|
<router-link to="/course">我是课程</router-link>|
<router-link to="/user">我是用户</router-link>|
</template>
<script>
export default {
}
</script>
router/index
// hash模式:createWebHashHistory
// import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
// 我们要想给页面 增加路由管理,就需要把页面引入进来
// import 引入页面文件,也可以用方法来引入
// / 代表根目录,根页面
import HomeView from '../views/HomeView.vue'
import Index from '../views/Index.vue'
import User from '../views/User.vue'
import Course from '../views/Course.vue'
import Lists from '../views/Lists.vue'
const routes = [
// {
// 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')
// },
{
path: '/', // 路由地址配置,就是浏览器上的url
name: 'index', // 是页面的名称,自定义,但是不要重复
component: Index // 这个是页面文件的路径
},
{
path: '/lists', // 列表页面
name: 'lists', // 是页面的名称,自定义,但是不要重复
component: Lists // 这个是页面文件的路径
},
{
path: '/course', // 课程页面
name: 'course', // 是页面的名称,自定义,但是不要重复
component: Course // 这个是页面文件的路径
},
{
path: '/user', // 用户页面
name: 'user', // 是页面的名称,自定义,但是不要重复
component: User // 这个是页面文件的路径
}
]
const router = createRouter({
// hash模式:createWebHashHistory
// 访问路径就会多个#号 localhost:8080/#/user、localhost:8080/#/course
history: createWebHistory(process.env.BASE_URL),
routes
})
// 导出路由
export default router