bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
历届学生/fontendseven/每天课程/2021-12-14/demo.html Normal file
View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<div>首页的轮播图</div>
<swiper :list="homeSwiper">
<template v-slot:default="{ item }">
<a :href=" 'info.html?id='+ item.id">
<img :src="item.img" alt="">
</a>
</template>
</swiper>
<hr>
<div>详情页的轮播图</div>
<swiper :list="infoSwiper">
<template v-slot:default="{ item }">
<img :src="item" alt="">
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 作用域插槽
Vue.component('swiper', {
data() {
return {
}
},
props: {
list: {
type: Array,
default: () => []
}
},
template: `
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item,index in list" :key="index">
<slot :item="item"></slot>
</div>
</div>
</div>
`,
methods: {
clickData() {
}
}
});
new Vue({
el: '.app',
data:{
homeSwiper: [
{ id: 1, img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4fd0e71e2ba1dac1a3b685417393e52c.jpg?thumb=1&w=720&h=360' },
{ id: 2, img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b2fe8572343d83cd84aa6d0c04b8390.jpg?thumb=1&w=720&h=360' },
],
infoSwiper: [
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6ff526b9d75342f0995778b56060b85.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/beac5a54f4f4d93cb3f680a097b4f644.jpg?f=webp&w=1080&h=660&bg=F5F5F5'
]
},
methods:{
getChange(data) {
this.text = data
}
}
})
</script>
</html>

89
历届学生/fontendseven/每天课程/2021-12-14/index.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<item1 @change="getChange">
<template v-slot:back>
<i class="iconfont test"></i>
<span>返回</span>
</template>
<template v-slot:icon>
<i class="iconfont test"></i>
<i class="iconfont test"></i>
</template>
</item1>
<item2 :demo="text"></item2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 作用域插槽
Vue.component('item1', {
data() {
return {
title: 'item1',
test: 'item1 test data'
}
},
template: `
<div class="item1" @click="clickData">
<div class="back">
<slot name="back"></slot>
</div>
<div class="icon">
<slot name="icon"></slot>
</div>
</div>
`,
methods: {
clickData() {
this.$emit("change", this.test)
}
}
});
Vue.component('item2', {
props: {
demo: {
type: String,
default: ''
}
},
data() {
return {
title: 'item2'
}
},
created() {
console.log(this.$parent.$children[0].$data.test);
},
watch: {
demo(n,o) {
console.log(n,o);
}
},
template: `
<div class="item2">item2</div>
`
});
new Vue({
el: '.app',
data:{
text: ''
},
methods:{
getChange(data) {
this.text = data
}
}
})
</script>
</html>

257
历届学生/fontendseven/每天课程/2021-12-14/vue-router.html Normal file
View File

@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> vue-router</title>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<p>
<router-link to="/home">首页</router-link>
<router-link to="/type">分类</router-link>
<router-link to="/car">购物车</router-link>
<router-link to="/me">我的</router-link>
</p>
<div class="content">
<transition name="bounce">
<router-view></router-view>
</transition>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// vue-router 路由管理工具 管理页面地址，你输入什么地址看到什么页面
// 路由？
// 你输入一个地址，看到对应页面
// router-link 标签（组件） 页面跳转（a）
// 两种路由模式
// hash 路由
// http://www.bmy.com/#/about
// http://www.bmy.com/#/index
// http://www.bmy.com/#/info?id=3
// window.location.hash 和 hashchange 事件 来实现
// history 路由
// http://www.bmy.com/about
// http://www.bmy.com/index
// history.pushState 和 history.replaceState 和 onpopstate 事件 来实现
// query
// http://www.bmy.com/#/about?id=1&page=1
// params
// http://www.bmy.com/#/about/1/1
// $router 获取路由跳转的各个方法
// $route 获取路由访问的地址信息
// 导航守卫
// 全局守卫
// 路由独享的守卫
// 组件独享的守卫
const Home = {
data() {
return {
list: [
{ id: 1, title: '商品1' },
{ id: 2, title: '商品2' },
{ id: 3, title: '商品3' },
{ id: 4, title: '商品4' },
]
}
},
template: `
<div class="home">
<ul>
<li v-for="(item,index) in list" :key="index" @click="goInfo(index)">
{{ item.title }}
</li>
</ul>
</div>
`,
methods: {
goInfo(index) {
this.$router.push({
name: 'info',
query: {
id: this.list[index].id,
title: this.list[index].title,
}
})
}
}
}
const Type = {
template: '<div>分类</div>'
}
const Car = {
template: '<div>购物车</div>'
}
const Me = {
template: `
<div >
我的
</div>`
}
const Info = {
template: `
<div class="info">详情</div>
`,
created() {
console.log(this.$route.query.id);
console.log(this.$route.query.title);
}
}
const Login = {
template: `
<div class="login">
登录页面
<button @click="UserLogin">点击登录</button>
</div>
`,
methods: {
UserLogin() {
// 调用ajax 拿到token，保存到本地
localStorage.setItem("token", "wqewqrr")
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
} else {
this.$router.replace("/")
}
}
}
}
const routes = [
{
path: '/',
redirect: '/home',
meta: {
isLogin: false
}
},
{
path: '/home',
component: Home,
meta: {
isLogin: false
}
},
{
path: '/type',
component: Type,
meta: {
isLogin: false
}
},
{
path: '/car',
component: Car,
meta: {
isLogin: true
}
},
{
path: '/me',
component: Me,
meta: {
isLogin: true
}
},
{
path: '/info',
name: 'info',
component: Info,
meta: {
isLogin: false
}
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
isLogin: false
}
},
]
const router = new VueRouter({
mode: 'hash',
routes
});
// 登录拦截
router.beforeEach((to, from, next) => {
// 表示未登录
if (localStorage.getItem("token") == null) {
// 需要登录才可以查看的页面
if (to.meta.isLogin) {
next({
path: "/login",
query: {
from: to.fullPath
}
})
// 不需要登录就可以查看的页面
} else {
next()
}
// 表示登录过了
} else {
next()
}
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

13
历届学生/fontendseven/每天课程/2021-12-14/笔记.txt Normal file
View File

@@ -0,0 +1,13 @@
// 兄弟组件 ---> 兄弟组件
// 插槽
// vue-router
vue cli
vue 2.x
vue cli 2.x
vue 3.x
vue cli 3.x