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

113
历届学生/front-end-team-10/每天课程/2023-03-21/component.html Normal file
View File

@@ -0,0 +1,113 @@
<!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>component</title>
</head>
<body>
<div class="app">
<v_header :t="header_title" @change="getChildren"></v_header>
<div class="content">
<swiper></swiper>
这是vue组件
</div>
<v_footer>
<template v-slot:back>
<h3 >哈哈哈</h3>
</template>
<template v-slot:icon>
<a href="">测试</a>
</template>
</v_footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var swiper = {
template: `
<div class="swiper">
公共轮播图
</div>
`,
data() {
return {}
},
methods: {
}
}
// 为什么组件内部的data必须是一个方法？？
// 组件名称 即 标签名
// 注意：组件名不能和html的标签名一样
Vue.component('v_header', {
template: `
<div class="header">
<h1 @click="test">我是公共头部: {{ t }}</h1>
</div>
`,
// props: ["t"],
props: {
t: {
default: '默认数值',
type: String
}
},
data() {
return {
text: '子组件给父组件的数据'
}
},
methods: {
test() {
console.log("头部被点击");
this.$emit('change', this.text)
}
},
components: {
// swiper: swiperComponent
swiper
}
});
Vue.component('v_footer', {
template: `
<div class="footer">
<slot name="back"></slot>
<h1>{{ text }}</h1>
<slot name="icon"></slot>
</div>
`,
data() {
return {
text: '我是公共底部'
}
},
methods: {}
});
new Vue({
el: '.app',
data: {
header_title: '父组件传给子组件的标题'
},
methods: {
getChildren(res) {
console.log(res);
}
},
components: {
// swiper: swiperComponent
swiper
}
})
</script>
</html>

129
历届学生/front-end-team-10/每天课程/2023-03-21/index.html Normal file
View File

@@ -0,0 +1,129 @@
<!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.js</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h1 ref="fff">测试 {{ demos }}</h1>
<h2> {{ message }} </h2>
<a :href="aParams.href"> {{ aParams.title }} </a>
<ul>
<li v-for="v,i in newsList" :key="i" v-text="v.content">
</li>
</ul>
<div v-show="isVip"> 广告 </div>
<div v-if="vip == 0">普通</div>
<div v-else-if="vip == 1">会员</div>
<div v-else>超级会员</div>
<input v-model="userName" type="text" placeholder="输入用户名">
<input v-model="userPwd" type="password" placeholder="输入密码">
<div @click="Login">
<div class="test" @click.stop.right="test">登录</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// data 是用来存放变量
// el
// 指令（vue自定义标签属性，全局）
// v-bind: 简写 :
// v-for
// 注意：循环需要加key，来标注 唯一性
// v-show 结果为true显示，为false因此
// v-if
// 区别：v-show不符合条件不会删除元素，只是对元素进行 display none
// v-if 把不符合条件的元素直接删除
// v-html v-text
// v-model 只能用户输入框，input textarea section
// v-on 简写 @
// created ajax 请求
// mounted 用来获取或者操作网页元素的
// computed 会进行计算缓存
var vm = new Vue({
el: '.app',
beforeCreate() {
console.log("beforeCreate: ", this.message);
},
created() {
console.log("created: ", this.message);
console.log("created: ", this.$refs.fff);
},
mounted() {
console.log("mounted: ", this.message);
console.log("created: ", this.$refs.fff);
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
destroyed() {
alert("destroyed")
},
data: {
message: '我的第一个vue程序',
vip: 0, // 0普通 1会员 2超级会员
isVip: false,
userPwd: '',
userName: '',
aParams: {
title: '点击我',
href: 'https://www.baidu.com/'
},
newsList: [
{ id: 1, title: '新闻1', content: '<h2>你好1</h2>' },
{ id: 2, title: '新闻3', content: '<h2>你好2</h2>' },
{ id: 3, title: '新闻4', content: '<h2>你好3</h2>' }
]
},
watch: {
// aParams() {},
aParams: {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
deep: true
}
},
methods: {
Login() {
console.log("登录");
// console.log("用户登录:", this.userPwd, this.userName);
},
test() {
console.log("test");
}
},
computed: {
demos() {
return 1 + 2
}
}
})
</script>
</html>

84
历届学生/front-end-team-10/每天课程/2023-03-21/swiper.html Normal file
View File

@@ -0,0 +1,84 @@
<!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">
<swiper :arr="swiper" @change="goInfo">
<template v-slot:default="{ item }">
<img :src="item.img" alt="">
</template>
</swiper>
<h2>父组件</h2>
<swiper :arr="swiper" @change="fangda">
<template v-slot:default="{ item }">
<p>{{ item.id }}</p>
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var swiper = {
template: `
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item,index in arr" @click="typeClick(item,index)">
<slot :item="item"></slot>
</div>
</div>
</div>
`,
props: {
arr: {
default: () => [],
type: Array
}
},
data() {
return {}
},
methods: {
typeClick(item,index) {
item.index = index;
this.$emit("change", item)
}
}
}
new Vue({
el: '.app',
data: {
swiper: [
{ id: 1, img: 'https://img.alicdn.com/imgextra/i4/6000000000247/O1CN016OonHt1DhAeHc2POy_!!6000000000247-2-octopus.png' },
{ id: 2, img: 'https://img.alicdn.com/imgextra/i4/6000000004607/O1CN01iyHGBo1ju3Ueo5MZr_!!6000000004607-0-octopus.jpg' },
{ id: 3, img: 'https://img.alicdn.com/imgextra/i1/6000000002571/O1CN011s3nON1UrZ6i7EyPo_!!6000000002571-0-octopus.jpg' },
]
},
methods: {
goInfo(res) {
console.log("进详情：",res);
},
fangda(res) {
console.log("放大：",res);
}
},
components: {
// swiper: swiperComponent
swiper
}
})
</script>
</html>

86
历届学生/front-end-team-10/每天课程/2023-03-21/tabs_vue.html Normal file
View File

@@ -0,0 +1,86 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<div class="app">
<ul class="title">
<li v-for="v,i in tabList"
:class=" i == index ? 'active' : '' "
@click=" index = i "
>{{ v.title }}</li>
</ul>
<ul class="content">
<li v-for="v,i in tabList" :class="i == index ? 'active' : '' ">{{ v.content }}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
index: 0,
tabList: [
{
title: '社会',
content: "社会 的内容"
},
{
title: '体育',
content: "体育 的内容"
},
{
title: '军事',
content: "军事 的内容"
},
{
title: '科技',
content: "科技 的内容"
},
]
},
methods: {
// changeActive(index) {
// this.index = index
// }
}
})
</script>
</html>

131
历届学生/front-end-team-10/每天课程/2023-03-21/tabs_vue_2.html Normal file
View File

@@ -0,0 +1,131 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<div class="app">
<ul class="title">
<li v-for="v,i in tabList"
:class=" i == index ? 'active' : '' "
@click=" index = i "
>{{ v.title }}</li>
</ul>
<ul class="content">
<li v-for="v,i in tabList" :class="i == index ? 'active' : '' ">
<p v-for="val,idx in v.content">{{ val.title }}</p>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
index: 0,
tabList: [
{
title: '社会',
content: [
{
title: '社会新闻1',
time: '2023',
text: '主体内容部分'
},
]
},
{
title: '娱乐',
content: [
{
title: '娱乐新闻1',
time: '2023',
text: '主体内容部分'
},
{
title: '娱乐新闻2',
time: '2023',
text: '主体内容部分'
},
]
},
{
title: '体育',
content: [
{
title: '体育新闻1',
time: '2023',
text: '主体内容部分'
}
]
},
{
title: '军事',
content: [
{
title: '军事新闻1',
time: '2023',
text: '主体内容部分'
},
{
title: '军事新闻2',
time: '2023',
text: '主体内容部分'
},
{
title: '军事新闻3',
time: '2023',
text: '主体内容部分'
},
]
},
{
title: '科技',
content: [
{
title: '科技新闻1',
time: '2023',
text: '主体内容部分'
}
]
},
]
}
})
</script>
</html>

183
历届学生/front-end-team-10/每天课程/2023-03-21/vueRouter.html Normal file
View File

@@ -0,0 +1,183 @@
<!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>VueRouter</title>
<style>
.router-link-exact-active {
color: red;
}
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter,
.slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */
{
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/car">购物车</router-link>
<router-link to="/my">我的</router-link>
</p>
<transition name="slide-fade">
<router-view></router-view>
</transition>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<script>
const Home = {
template: `
<div class="home">
<ul>
<li v-for="item,index in newList"
@click="enterInfo(item.id)"
:key="index">
{{ item.title }}
</li>
</ul>
</div>
`,
data() {
return {
newList: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
]
}
},
methods: {
enterInfo(id) {
this.$router.push({
name: 'info',
query: { page: 2, id: id }
})
}
}
}
const Info = {
template: `
<div class="info">详情</div>
`,
data() {
return {
id: null
}
},
created() {
this.id = this.$route.query.id
this.getData();
},
methods: {
async getData() {
console.log("使用参数：", this.id, " 发送ajax请求获取数据");
}
}
}
const My = {
template: `
<div class="my">我的</div>
`
}
const Car = {
template: `
<div class="car">购物车</div>
`
}
const Login = {
template: `
<div class="login" @click="login">
登录页面
</div>
`,
methods: {
async login() {
localStorage.setItem("token", "wjdhfbiwebv")
if (this.$route.query.hasOwnProperty("source")) {
this.$router.replace({ path: this.$route.query.source })
} else {
this.$router.replace({ path: "/" })
}
}
}
}
// my
const routes = [
{ path: '/', name: 'home', component: Home, meta: { isLogin: false } },
{ path: '/info', name: 'info', component: Info, meta: { isLogin: false } },
{ path: '/my', name: 'my', component: My, meta: { isLogin: true } },
{ path: '/car', name: 'car', component: Car, meta: { isLogin: true } },
{
path: '/login', name: 'login', component: Login, meta: { isLogin: false },
beforeEnter: (to, from, next) => {
console.log(to);
if (localStorage.getItem("token") != null) {
router.back()
} else {
next()
}
}
},
]
const router = new VueRouter({
// mode: 'history',
routes
});
router.beforeEach((to, from, next) => {
if (to.meta.isLogin) {
if (localStorage.getItem("token") != null) {
next()
} else {
next({
path: '/login',
query: {
source: to.fullPath
}
})
}
} else {
next()
}
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

97
历届学生/front-end-team-10/每天课程/2023-03-21/vueRouter老代码.html Normal file
View File

@@ -0,0 +1,97 @@
<!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>VueRouter</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/my">我的</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<script>
const Home = {
template: `
<div class="home">
<ul>
<router-link
tag="li"
v-for="item,index in newList"
:key="index"
:to="{ path: '/info', query: { id: item.id } }">
{{ item.title }}
</router-link>
</ul>
</div>
`,
data() {
return {
newList: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
]
}
},
}
const Info = {
template: `
<div class="info">详情</div>
`,
data() {
return {
id: null
}
},
created() {
this.id = this.$route.query.id
this.getData();
},
methods: {
async getData() {
console.log("使用参数：",this.id," 发送ajax请求获取数据");
}
}
}
const My = {
template: `
<div class="my">我的</div>
`
}
const routes = [
{ path: '/', component: Home },
{ path: '/info', component: Info },
{ path: '/my', component: My },
]
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

61
历届学生/front-end-team-10/每天课程/2023-03-21/混入.html Normal file
View File

@@ -0,0 +1,61 @@
<!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>混入</title>
</head>
<body>
<div class="app">
<input type="text" autofocus="true" placeholder="输入账户名">
<button @click="load">加载更多</button>
<p>{{text | slh}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var loadMore = {
data() {
return {
page: 0,
totalPage: 0
}
},
methods: {
load() {
console.log("加载更多...");
}
}
}
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
new Vue({
el: '.app',
mixins: [loadMore],
data: {
text: '你好这是测试的文字，哈哈哈'
},
created() {
console.log(this.page);
},
methods: {
},
filters: {
slh(val) {
return val.substring(0,4) + '...'
}
}
})
</script>
</html>

161
历届学生/front-end-team-10/每天课程/2023-03-21/笔记.txt Normal file
View File

@@ -0,0 +1,161 @@
m（model 数据）v（view 页面）c（controller 控制器 ）
vue
原生js阶段
jquery 对原生js进行二次封装
nodejs
m（model 数据）v（view 页面） vm （view and model）
angular
react
vue
使用js链接
基于nodejs来使用
vue 1.x
vue 2.x 全球 60% ~ 70%
option api （选项式api）
typescript
class api （类 api）
vue 3.x 30% ~ 40%
composition api（组合式api） (function api)
vue 4.x 网传筹备
核心：
组件系统
数据双向绑定，响应式（数据）
生命周期
计算属性
侦听器
https://v2.cn.vuejs.org/v2/guide/class-and-style.html
组件
什么叫组件？
把公共，或者通用的布局拆分成独立的文件，提高页面的复用率
全局组件
局部组件
父组件 向 子组件 传递数据
props
子组件 向 父组件 传递数据
$emit
动态组件
插槽
别名插槽
作用域插槽
干什么用的？
混入
自定义指令
过滤器
指令
生命周期
组件全部
vue-cli
vuex
vue-router
4.x 和 vue3.x 版本组合的
3.x 和 vue2.x 版本组合的
路由：访问网址，页面跳转 的综合(很多功能)插件
原生js阶段：a 或者js
解决a标签的问题：使用ajax请求页面的代码，然后innerHTML到当前页面上，并完全遮住上一个页面
传参：
query
www.baidu.com?id=1&page=3
:to="{ path (name？？): '/info', query: { id: item.id } }"
this.$route.query.xxx
params
www.baidu.com/1/3
:to="{ name: 'info', params: { page: 2, id: item.id } }"
{ path: '/info/:id/:page', name: 'info', component: Info },
this.$route.params.xxx
注意：
this.$route 是获取地址，参数这些东西
this.$router 是获取 new VueRouter 实例的
vue-router 实现原理
hash（#）
www.baidu.com#/info?id=2
www.baidu.com#/my
file:///C:/Users/bmy/Desktop/fontend10/每天课程/2023-03-21/vueRouter.html#/car
http://127.0.0.1:5500/每天课程/2023-03-21/vueRouter.html
http://127.0.0.1:5500/car
file:///C:/Users/bmy/Desktop/fontend10/my
http://127.0.0.1:5500 ---> file:///C:/Users/bmy/Desktop/fontend10/每天课程/2023-03-21/vueRouter.html
history
www.baidu.com/car
www.baidu.com/info?id=2
file:///C/car
导航守卫:
全局守卫
前置
后置
路由独享的守卫
组件内的守卫
todo 路由懒加载