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

50
历届学生/front-end-team-11/每天上课/2023-06-15/hash.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#/one">1</a>
<a href="#/two">2</a>
<div class="router-view">
</div>
</body>
<script>
var onePage = {
template: `<h1>one</h1>`
}
var twoPage = {
template: `<h1>two</h1>`
}
var link = [
{ path: '/one', page: onePage },
{ path: '/two', page: twoPage },
]
window.onhashchange = function () {
let path = window.location.hash.replace("#", "")
let cName = path.replace("/", "")
console.log(path);
let currentPath = link.filter(v => {
if (v.path == path) {
return v
}
})
$(".router-view").innerHTML += `
<div class="${cName}"></div>
`
$(`.router-view .${cName}`).innerHTML = currentPath[0].page.template
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

132
历届学生/front-end-team-11/每天上课/2023-06-15/index.html Normal file
View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2 ref="testh2" @click="alertH2()" v-once>{{message}}</h2>
<h3 >{{text}}</h3>
<div v-html="html"></div>
<div v-if="isLike">喜欢</div>
<div v-else>不喜欢</div>
<p v-show="isShow">显示</p>
<ul>
<li v-for="item,index in tabs" :key="index">{{ item.title }}</li>
</ul>
<ul>
<li :key="key" v-for="value, key in item">{{ key }} | {{ value }}</li>
</ul>
<a :href=" href ">百度</a>
<input type="text" placeholder="输入用户名" v-model="user_name">
{{ user_name }}
<hr>
<h1>{{ testsss("张三") }}</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// data 定义变量的地方
// methods 定义方法的地方
// 指令：vue提供的一些标签属性，可是实现各种功能
// v-on 绑定点击事件
// 简写 @事件类型
// v-text
// v-html 将html字符串，渲染成真的dom
// v-if 根据条件选择显示什么东西
// v-show 根据条件选择显示什么东西
// v-for 循环显示
// v-bind 将变量绑定到标签的属性上
// 简写 :
// v-model 获取输入框的值
// TODO activated
// computed 会进行结果的缓存
let vm = new Vue({
el: ".app",
data: {
user_name: '',
message: "我的vue学习",
text: "我是v-text",
html: ` <ul> <li>你好</li> </ul>`,
isLike: true,
isShow: true,
href: 'https://www.baidu.com/',
tabs: [
{ id: 1, title: '社会' },
{ id: 2, title: '军事' },
{ id: 3, title: '体育' },
],
item: { id: 1, title: '社会' }
},
beforeCreate() {
console.log(this.message);
},
created() {
// ajax请求
console.log(this.message);
console.log(this.$refs.testh2);
},
mounted() {
console.log("mounted: ",this.$refs.testh2);
},
updated() {
console.log("updated: ");
},
methods: {
alertH2() {
alert(this.message)
this.alertH2_2()
},
alertH2_2() {
alert("点我了2")
}
},
computed: {
testsss() {
return (name) => {
console.log(name);
return name + this.message
}
}
},
watch: {
user_name: {
handler: (value, oldvalue) => {
console.log("watch: ",value, oldvalue);
},
immediate: true
}
}
})
console.log(vm);
</script>
</html>

160
历届学生/front-end-team-11/每天上课/2023-06-15/router.html Normal file
View File

@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
<script>
const Index = {
data() {
return {
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
]
}
},
template: `<div class="index">
<ul>
<router-link tag="li" :to="{ name: 'info', query: { id: item.id } }" v-for="item,index in list" :key="index">
{{ item.title }}
</router-link>
</ul>
</div>`,
methods: {
goInfo(id) {
this.$router.push({
name: 'info',
params: {
// id: id,
id
}
})
}
}
}
const Info = {
template: `<div class="info">详情</div>` ,
created() {
console.log(this.$route.query.id);
},
}
const Car = {
template: `<div class="info">购物车</div>` ,
created() {
},
}
const Login = {
template: `<div class="info">
登录页面
<button @click="login">登录</button>
</div>` ,
created() {
},
methods: {
login() {
localStorage.setItem("token", "effdasfgfdasgfnbfddg")
if (this.$route.query.from) {
this.$router.push(this.$route.query.from)
} else {
this.$router.push("/")
}
}
}
}
const Error = {
template: `<div class="error">404 页面不存在</div>` ,
created() {
},
}
const Layout = {
template: `<div class="Layout">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Foo</router-link>
<router-link to="/info">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>` ,
created() {
},
}
const routes = [
{ path: '*', component: Error},
{
path: '/',
name: 'layout',
component: Layout,
children: [
{ path: 'login', name: 'login', component: Login, meta: { requiresAuth: false, title: '登录' } },
{ path: 'car', name: 'car', component: Car, meta: { requiresAuth: true, title: '购物车' } },
{ path: '/', name: 'index', component: Index, meta: { requiresAuth: false, title: '首页' } },
{ path: 'info', name: 'info', component: Info, meta: { requiresAuth: false, title: '详情' } }
]
}
]
const router = new VueRouter({
linkExactActiveClass: "active",
routes
})
// 登录状态检查
router.beforeEach((to, from, next) => {
document.title = to.meta.title;
// 未登录
if (localStorage.getItem("token") == null) {
// 你访问的页面还需要登录
if (to.meta.requiresAuth) {
next({
name: 'login',
query: {
from: to.fullPath
}
})
} else {
next()
}
} else {
next()
}
})
const app = new Vue({
el: "#app",
router
})
// 对比原生js，为什么需要 vue-router 这样的插件来实现页面跳转
//
</script>
</html>

79
历届学生/front-end-team-11/每天上课/2023-06-15/swiper.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<h2>我是父组件</h2>
<hr>
<span>1 点击 进入详情 id</span>
<swiper :data="lunbo">
<template v-slot:default="{ item }">
<img @click="info(item)" :src="item.url" alt="">
</template>
</swiper>
<hr>
<span>2 点击 显示图片预览 url</span>
<swiper :data="lunbo">
<template v-slot:default="{ item }">
<span @click="showImg(item)">{{ item.id }}</span>
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('swiper', {
props: {
data: {
type: Array,
default: () => []
}
},
data() {
return {
}
},
template: `
<div class="header">
<ul>
<li v-for="item,index in data" :key="index">
<slot :item="item"></slot>
</li>
</ul>
</div>
`
});
let vm = new Vue({
el: ".app",
data: {
lunbo: [
{ id: 1, url: 'https://img.alicdn.com/imgextra/i2/O1CN01jH9w4F1sEDtCgpH3r_!!6000000005734-0-tps-846-472.jpg' },
{ id: 2, url: 'https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png' },
{ id: 3, url: 'https://img.alicdn.com/imgextra/i4/O1CN01LHWdyp1yvAidcNMDR_!!6000000006640-0-tps-846-472.jpg' },
]
},
methods: {
info({ id, url }) {
console.log("进入详情: ", id);
},
showImg({ id, url }) {
console.log("显示大图: ", url);
}
}
})
</script>
</html>

113
历届学生/front-end-team-11/每天上课/2023-06-15/tabs.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>tabs切换</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 15px;
cursor: pointer;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<ul class="title">
<li :class=" index == currentIndex ? 'active' : '' "
@click=" currentIndex = index"
v-for="item,index in tabs" :key="index">
{{ item.title }}
</li>
</ul>
<ul class="content">
<li v-for="item,index in tabs" :key="index"
:class=" index == currentIndex ? 'active' : '' ">
<p v-for="v,i in item.content">{{ v.text }}</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: {
currentIndex: 0,
tabs: [
{
id: 1,
title: '社会',
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' },
{ text: '社会的内容3' }
]
},
{
id: 2,
title: '经济',
content: [
{ text: '经济 的内容1' },
{ text: '经济 的内容2' },
{ text: '经济 的内容3' },
{ text: '经济 的内容4' },
]
},
{
id: 3,
title: '体育',
content: [
{ text: '体育 的内容1' },
{ text: '体育 的内容2' }
]
},
{
id: 4,
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
]
},
methods: {
changeActive(index) {
this.currentIndex = index
}
}
})
</script>
</html>

117
历届学生/front-end-team-11/每天上课/2023-06-15/笔记.txt Normal file
View File

@@ -0,0 +1,117 @@
html css 写在html
也没有div + css
table + css(选择器)
js 发展
div + css
jquery 操作dom的
|
|
nodejs
|
|
过渡年代：前端 m（数据）v（视图）c（控制器） 年代
前端三大框架 m（数据）v（视图） vm（视图和模型） 框架
spa (框架)单页web应用
操作虚拟dom diff 组件化开发
angular.js
react.js
vue.js
vue 1.x php laravel 作者
vue 2.x 进入国内（全球） vue-router 3.x
es5 语法的 js写的
|
|
typescript
|
|
vue 3.x(next) vue-router 4.x
vue.js 三套语法风格：
vue 1.x vue 2.x options api 选项式
{
data: {}
methods: {}
}
过渡：vue2 支持 ts 语法的 插件包 （很多）
class api
vue3.x composition(function) api 组合式
基于 html 来用
基于 nodejs 来用
vue-router
hash
#地址名字
#/about
history
/about
$router 访问 vue-router 内置方法
$route 访问 vue-router 的地址信息
页面跳转
标签跳转 router-link
方法跳转 this.$router.xxx
参数传递：
query传参
http://www.baidu.com/index?id=1&page=2
params
http://www.baidu.com/index/1/2
注意：
params 传参一定不能用 path 进行跳转
导航守卫
全局守卫
全局前置守卫
全局后置钩子
路由独享的守卫
组件内的守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
vue
vue-cli 脚手架 （帮我做好了所有基本的事情和准备）
2.x
3.x
vue-cli 2 + vue 2
vue cli 3 + vue 3

173
历届学生/front-end-team-11/每天上课/2023-06-15/组件.html Normal file
View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
{{ message }}
<lb_header>
<template v-slot:one>
<h2>测试 one</h2>
</template>
<template v-slot:two>
<h2>测试 two</h2>
</template>
</lb_header>
<lb_footer v-demo="1" @send="getData"></lb_footer>
<h2>{{ tips | copyright }}</h2>
<h2>{{ message }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 组件
// 全局组件 Vue.component
// 局部组件
// 父 --> 子 props
// 子 --> 父 $emit 事件来回传数据
// 插槽 默认插槽
// 别名插槽
// 作用域插槽
// 可以把数据从子组件抛出去给父组件
// 同一个组件在不同地方使用，响应事件的处理方式不一样
// 状态过渡
// 混入 代码封装
// 自定义指令
// 过滤器
// 路由 地址
// vuecli2.x 3.x （不写项目）
// 封装脚手架
// vue 3.x vite Pinia ts 博客 状态管理 vuex
// linux部署(选配)
// 电商(ts)
// react
//
// uniapp flutter ( ts+js+java = dart )
// 小程序
var loadMore = {
data() {
return {
page: 1,
totalPage: 0
}
},
created() {
},
methods: {
load: function () {
console.log('hello from mixin!: ')
}
}
}
Vue.directive('demo', {
bind: function (el, binding, vnode) {
console.log("el: ", el);
console.log("binding: ", binding);
console.log("vnode: ", vnode);
}
})
// 定义局部组件
var footers = {
data() {
return {
text: '公共底部',
children: "我是footer子组件的数据"
}
},
mounted() {
this.$emit("send", this.children)
},
methods: {
// ddd() {
// this.$emit("send", this.children)
// }
},
template: `
<div class="footer">
<h2 >底部 {{ text }}</h2>
</div>
`
}
Vue.component('lb_header', {
// props: ['msg'],
mixins: [loadMore],
props: {
msg: {
type: String,
default: "默认值"
}
},
data() {
return {
text: 1
}
},
created() {
this.load()
},
template: `
<div class="header">
<h2>头部 {{ msg }}</h2>
<hr/>
<slot name="one"></slot>
<hr/>
<slot name="two"></slot>
</div>
`
});
let vm = new Vue({
el: ".app",
mixins: [loadMore],
data: {
message: '父组件',
tips: "我是数据"
},
created() {
this.load()
},
// 注册局部组件
components: {
'lb_footer': footers
},
methods: {
getData(res) {
console.log(res);
}
},
filters: {
copyright(value){
return value + ' --- 版权来自bmy'
}
}
})
</script>
</html>