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

118
历届学生/front-end-team/每天课程/2020-04-12/component.html Normal file
View File

@@ -0,0 +1,118 @@
<!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">
<lb-header text="测试" :list-arr="newsList" @type="getData">
<template #text>
<span>text</span>
</template>
<template #right>
<span>right</span>
</template>
</lb-header>
<div class="content">内容部分</div>
<lb-footer></lb-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// var a = require("./index.js")
// 父子关系
// 父组件 ——> 子组件
// 基本数据类型 props
// 传html props 插槽
// 别名插槽
// 作用域插槽
// 子组件 ——> 父组件
// $emit
// 组件？？？？
// 全局组件
Vue.component('lb-header', {
// 存放html代码
template: `
<div class="header">
<h2>{{text}}</h2>
<ul>
<li v-for="item,index in listArr" @click="liClick(item)">{{item.title}}</li>
</ul>
<div class="right">
<slot name="right"></slot>
</div>
<div class="text">
<slot name="text"></slot>
</div>
</div>
`,
// props: [ 'text' ],
props: {
text: {
default: '默认参数',
type: String,
required: true
},
listArr: {
default: () => [],
type: Array
}
},
data() {
return {
}
},
methods: {
liClick(item) {
this.$emit("type", item)
}
}
});
// 局部组件
var footer = {
template: `
<div class="footer">底部</div>
`,
data () {
return {}
},
methods: {
}
}
var vm = new Vue({
el: '.app',
data: {
test: '你好',
title: '首页',
newsList: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
]
},
mounted() {
console.log("mounted");
console.log(this.test);
},
methods: {
getData(item) {
console.log(item);
}
},
components: {
'lb-footer': footer
}
})
</script>
</html>

85
历届学生/front-end-team/每天课程/2020-04-12/demo.html Normal file
View File

@@ -0,0 +1,85 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<li :class="index == currentIndex ? 'active_title' : '' "
@click="changeActive(index)"
v-for="item,index in tabs">
{{ item.title }}
</li>
</ul>
<ul class="tabs_content">
<li :class="index == currentIndex ? 'active_content' : '' "
v-for="item,index in tabs">
{{ item.content }}
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tabs: [
{ id: 1, title: '首页', content: '首页 的内容' },
{ id: 2, title: '社会', content: '社会 的内容' },
{ id: 3, title: '财经', content: '财经 的内容' },
{ id: 4, title: '体育', content: '体育 的内容' },
]
},
methods: {
changeActive(index) {
console.log(index);
this.currentIndex = index
}
}
})
</script>
</html>

115
历届学生/front-end-team/每天课程/2020-04-12/index.html Normal file
View File

@@ -0,0 +1,115 @@
<!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 基础学习</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h1 v-once>{{ test }}</h1>
<h2>{{ hello }}</h2>
<a :href="baidu">baidu</a>
<img :src="img" alt="">
<ul>
<li v-for="item,index in newsList" @click.stop.prevent="demos(index)">
{{ item.title }}
</li>
</ul>
<ul>
<li v-for="value,key in list">{{ key }} {{ value }}</li>
</ul>
<div v-html="htmlTest"></div>
<div v-if="vip == 1">vip1</div>
<div v-else-if="vip == 2">vip2</div>
<div v-else-if="vip == 3">vip3</div>
<div v-else>等级非法</div>
<div v-show="islogin">登录才可以查看</div>
<input type="text" v-model.trim="userName">
<button @click="login">点我</button>
<div>{{ jil }}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// v-bind 将data中的变量绑定到标签的属性上
// 简写 :
// v-for 可以遍历数组和对象
// v-html 显示 html 到网页上
// v-text 显示纯文本
// v-if -v-else
// v-show
// v-if 和 v-show 区别
// v-if 多分支的复杂情况进行判断 把不符合条件的html删除
// v-show 只适合简单情况 把不符合条件的html进行 display:none
// v-on:事件类型="事件处理函数"
// 简写：@事件类型="事件处理函数" @click="test"
// v-model 给输入框用的
// v-pre 原样输出
// computed 计算属性 当参与计算的数值未发生变化，第二次调用不进行计算而是返回上一次的结果
// 实现 get（读） set（写） 监听
// methods 存放方法
// watch 侦听器（监视器）
var vm = new Vue({
el: '.app',
data: {
test: '你好，vue.js',
hello: '哈哈哈哈哈哈',
baidu: 'https://www.baidu.com/',
img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
newsList: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
],
list: { name: '刘兵', age: 18 },
htmlTest: '<h2><span>测试</span></h2>',
vip: 1, // 1 2 3
islogin: true,
userName: '',
},
methods: {
login() {
console.log(this.userName);
},
demos(index) {
console.log("demo 方法: ", index);
}
},
computed: {
jil() {
return 1000 * 100000000
}
},
watch: {
test(newvalue,oldvalue) {
console.log("oldvalue: ",oldvalue);
console.log("newvalue: ",newvalue);
}
}
})
</script>
</html>

189
历届学生/front-end-team/每天课程/2020-04-12/login.html Normal file
View File

@@ -0,0 +1,189 @@
<!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>
<style>
.router-link-active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/index">首页</router-link>
<router-link to="/car">购物车</router-link>
<router-link to="/about">我的</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.min.js"></script>
<script>
const index = {
template: `
<ul>
<li @click="enterInfo(item.id)"
v-for="item,index in newsList">{{ item.title }}</li>
</ul>
`,
data() {
return {
newsList: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
],
}
},
methods: {
enterInfo(id) {
this.$router.replace({
name: 'info',
query: {
id: id
}
})
}
}
}
const info = {
template: `<div>info {{ id }}</div>`,
data() {
return {
id: null
}
},
created() {
this.id = this.$route.query.id
}
}
const about = { template: '<div>about</div>' }
const car = { template: '<div>car</div>' }
const login = {
template: `<div>
<h2>登录</h2>
<button @click="Login">点我登录</button>
</div>`,
methods: {
Login() {
// 发送接口，后端返回token
var token = "sefwefewr345346456457657"
localStorage.setItem("token", token);
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
} else {
this.$router.replace({
path: "/index"
})
}
}
}
}
const routes = [
{
path: '/',
redirect: "/index",
meta: {
isLogin: false
}
},
{
path: '/index',
component: index,
meta: {
isLogin: false
}
},
{
path: '/info',
name: 'info',
component: info,
meta: {
isLogin: false
}
},
{
path: '/about',
component: about,
meta: {
isLogin: true
}
},
{
path: '/car',
component: car,
meta: {
isLogin: true
}
},
{
path: '/login',
component: login,
meta: {
isLogin: false
},
beforeEnter: (to, from, next) => {
if (localStorage.getItem("token") == null) {
next()
} else {
router.back()
next()
}
}
},
]
const router = new VueRouter({
routes,
// linkActiveClass: 'active'
})
router.beforeEach((to, from, next) => {
console.log("to: ", to);
// console.log("from: ", from);
// 表示需要登录
if (to.meta.isLogin) {
// 检查当前用户是否登录
// 已登录，放行
// 未登录，去登录
// 未登录，去登录
if (localStorage.getItem("token") == null) {
next({
path: '/login',
query: {
from: to.fullPath
}
})
} else {
next()
}
// 不需要登录
} else {
next();
}
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

84
历届学生/front-end-team/每天课程/2020-04-12/mixins.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>Vue 基础学习</title>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s;
}
.fade-enter,
.fade-leave-to
{
opacity: 0;
}
</style>
</head>
<body>
<div class="app">
<h2>{{ test | sl }}</h2>
<transition name="fade">
<div v-if="isShow">true</div>
</transition>
<button @click="isShow = !isShow ">点我</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var a = {
data() {
return {
page: 1,
totalpage: 1
}
},
methods: {
more() {
console.log("加载更多");
}
}
}
// 混入
// 作用：用一种不会影响this指向的方式去封装代码
var vm = new Vue({
el: '.app',
mixins: [a],
data: {
test: '自定义指令学习',
isShow: true
},
created() {
console.log(this.more());
},
methods: {
},
computed: {
},
filters: {
sl(val) {
return val.substring(0, 3) + '..'
},
},
watch: {
}
})
</script>
</html>

102
历届学生/front-end-team/每天课程/2020-04-12/router.html Normal file
View File

@@ -0,0 +1,102 @@
<!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>
<style>
.router-link-active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/index">首页</router-link>
<router-link to="/about">我的</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.min.js"></script>
<script>
const index = {
template: `
<ul>
<li @click="enterInfo(item.id)"
v-for="item,index in newsList">{{ item.title }}</li>
</ul>
`,
data() {
return {
newsList: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
],
}
},
methods: {
enterInfo(id) {
this.$router.replace({
name: 'info',
query: {
id: id
}
})
}
}
}
const info = {
template: `<div>info {{ id }}</div>`,
data() {
return {
id: null
}
},
created() {
this.id = this.$route.query.id
}
}
const about = { template: '<div>about</div>' }
const routes = [
{
path: '/',
redirect: "/index"
},
{ path: '/index', component: index },
{
path: '/info',
name: 'info',
component: info
},
{ path: '/about', component: about },
]
const router = new VueRouter({
routes,
// linkActiveClass: 'active'
})
router.beforeEach((to, from, next) => {
console.log("to: ", to);
console.log("from: ", from);
// next();
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

46
历届学生/front-end-team/每天课程/2020-04-12/smzq.html Normal file
View File

@@ -0,0 +1,46 @@
<!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">
<h2 ref="test">{{ test }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 生命周期
//
var vm = new Vue({
el: '.app',
data: {
test: '你好'
},
beforeCreate() {
console.log("beforeCreate");
console.log(this.test);
},
// 一般用来发送ajax
created() {
console.log("created");
console.log(this.test);
console.log(this.$refs.test);
},
mounted() {
console.log("mounted");
console.log(this.test);
console.log(this.$refs.test);
},
beforeUpdate() {
console.log("数据被更新了");
},
methods: {
}
})
</script>
</html>

78
历届学生/front-end-team/每天课程/2020-04-12/swiper.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>组件</title>
</head>
<body>
<div class="app">
<v-swiper :list="newsList">
<template #html="{ item }">
<img :src="item.src">
</template>
</v-swiper>
<v-swiper :list="dd">
<template #html="{ item }">
<a :href="item.href">{{ item.title }}</a>
</template>
</v-swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component('v-swiper', {
// 存放html代码
template: `
<div class="swiper">
<li v-for="item,index in list">
<slot name="html" v-bind:item="item"></slot>
</li>
</div>
`,
props: {
list: {
default: () => [],
type: Array
}
},
data() {
return {
}
}
});
// 局部组件
var vm = new Vue({
el: '.app',
data: {
newsList: [
{ id: 1, title: '新闻1', src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
{ id: 2, title: '新闻2', src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
{ id: 3, title: '新闻3', src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
],
dd: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com' },
{ id: 2, title: '新闻2', href: 'https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD' },
{ id: 3, title: '新闻3', href: 'https://www.bilibili.com/' },
]
},
mounted() {
},
methods: {
}
})
</script>
</html>

122
历届学生/front-end-team/每天课程/2020-04-12/笔记.txt Normal file
View File

@@ -0,0 +1,122 @@
原生js （jquery）
dom 操作
mvc
m（model 数据）v（view 视图）c（controller 控制器）
vue.js react.js angular.js
去 dom 操作
m（model 数据 ajax数据）v（view 页面） vm（view and model）
双向绑定
模块（组件）系统
插槽
选看
自定义指令
混入
过滤器
动画
Vue Router 路由
vue官方提供的 路由 管理工具
页面地址
www.baidu.com /index
www.baidu.com /about
路由模式：
路径变化的时候，页面不会刷新
hash
www.baidu.com/#/index?id=1
www.baidu.com/#/about
window.location.hash
onhashchange 监听地址栏的 hash 地址变化，然后拿到新的 hash地址，然后去映射表中找到这个地址对应
的页面，然后把页面显示到指定位置
history
www.baidu.com/index
www.baidu.com/about
pushState() 和 replaceState()
补发代码实现的网址
有两种页面跳转的方式
query
www.baidu.com/index?id=1&page=1
:to="{ name: '/info', query: { id:item.id } }"
取参数：this.$route.query.参数字段名
params
www.baidu.com/index/1/2
:to="{ name: '/info', params: { id:item.id } }"
取参数：this.$route.params.参数字段名
注意： path: '/info/:id/:name',
$router vue-router 提供的方法
$route 获取路由信息
this.$router.push 跳转后，可以返回之前页面
xxx.replace 不能返回
导航守卫
全局导航守卫
beforeEach
路由导航守卫
beforeEnter
页面导航守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
vue.js
2.x
3.x
this 指向
setup(){
}
vue-cli 脚手架 开箱即用
vue-cli 2.x
vue-cli 3.x 以上

45
历届学生/front-end-team/每天课程/2020-04-12/自定义指令.html Normal file
View File

@@ -0,0 +1,45 @@
<!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 基础学习</title>
</head>
<body>
<div class="app">
<div v-demo="test">你好</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
document.title = binding.value
console.log("el: ",el);
console.log("binding: ",binding);
console.log("vnode: ",vnode);
}
})
var vm = new Vue({
el: '.app',
data: {
test: '自定义指令学习',
},
methods: {
},
computed: {
},
watch: {
}
})
</script>
</html>