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

163
历届学生/逯帅帅/每日课程/2021-03-23/component.html Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="app">
<h3>{{ '哈哈哈哈哈' | spl }}</h3>
<button @click="a">哈哈哈</button>
<lb-hello>
<template v-slot:back>
<h1>返回按钮</h1>
</template>
<template v-slot:action>
<h1>喜欢 和 分享</h1>
</template>
</lb-hello>
<lb-swiper @sclick="getData"></lb-swiper>
<h2>qdqwdwq</h2>
<lb-footer ref="footer" :footer-arr="tabs"></lb-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 组件？
// 就是使用频率搞的html代码块 js function
// 全局组件
// 局部组件
// 父子组件之间的数据传递
// 父 ---> 子 props
// 子 ---> 父 $emit
// 父 访问 子 的方法 $refs
// 反过来？ 和 兄弟之间的相互访问 $parent $root
// 生命周期
Vue.component('lb-hello', {
template: `
<div>
<div class="back">
<slot name="back"></slot>
</div>
<h2>全局组件</h2>
<div class="action">
<slot name="action"></slot>
</div>
</div>
`,
data() {
return {}
},
methods: {}
})
var footer = {
template: `
<div>
<p>{{test}}</p>
<lb-hello></lb-hello>
<ul>
<li v-for="(item,index) in footerArr || footer">{{item.title}}</li>
</ul>
</div>
`,
props: {
footerArr: {
type: Array,
default: () => []
},
test: {
type: String,
default: '这默认数值'
}
},
data () {
return {
footer: [
{ title: '商城' },
{ title: '购物车' },
{ title: '订单' },
{ title: '返回首页' },
]
}
},
created() {
// console.log("======: ",this.$parent.$data.tabs)
console.log(this.$parent.$children[1])
},
methods: {
footertest() {
console.log("footer 子组件的方法")
}
}
};
var swiper = {
template: `
<button @click="setSata">点我</button>
`,
data() {
return {
arr: 'swiper的数据'
}
},
methods: {
setSata() {
this.$emit('sclick', this.arr)
}
}
}
// 代码片段
var mix = {
data () {
return {
page: 0,
totalPage: 100
}
},
methods: {
}
};
new Vue({
el: '.app',
mixins: [mix],
data: {
tabs: [
{ title: '首页' },
{ title: '门店' },
{ title: '商城' },
{ title: '我的' },
]
},
created() {
console.log(this.page)
},
methods: {
getData(res) {
console.log(res)
},
testf(res) {
console.log(res)
},
a () {
this.$refs.footer.footertest()
}
},
filters: {
spl(val) {
return val.substr(0,1)
}
},
components: {
'lb-footer':footer,
'lb-swiper':swiper,
}
})
</script>
</html>

87
历届学生/逯帅帅/每日课程/2021-03-23/index.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="main" v-cloak>
<h2>{{ hello }}</h2>
<ul v-once>
<li v-for="(item,index) in list">{{ index }} {{ item.name }}</li>
</ul>
<ul>
<li v-for="(value,key) in obj">{{ key }} {{ value }}</li>
</ul>
<img :src="img" alt=""/>
<p v-if="isLogin == '1' ">1</p>
<p v-else-if="isLogin == '2'">2</p>
<p v-else-if="isLogin == '3'">3</p>
<p v-else>都不满足</p>
<h2 v-show="isShow">v-show</h2>
<div v-html="content"></div>
<input type="text" v-model="userName" placeholder="请输入账户">
{{userName}}
<button @click="test">点我</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// vue 指令 就是一堆用在标签上的属性
// v-for 循环数据到页面上的
// v-bind 绑定标签的属性 简写 :
// v-if 根据条件的真假，决定div是显示
// v-show 根据条件的真假，决定div是显示
// 差别1：v-if会删除dom元素 v-show 是display 进行隐藏
// 差别2：v-if不适合用在数据量大的场景，
// v-html 把html渲染到页面上
// v-text 把内容渲染到页面上
// v-model 用在输入框上
// v-on 绑定事件 @
// watch 用来实现对 变量的监听
// computed 用来实现计算缓存的
var vm = new Vue({
el: '.main',
data: {
hello: '这是第一个vue项目',
img: 'https://www.baidu.com/img/dong_47f08bb2dd6546c9a788f71d7463ce48.gif',
isLogin: '5',
userName: '张三',
isShow: false,
content: '<h2>这是测试标题</h2>',
list: [
{id:1,name: '哈哈哈1'},
{id:2,name: '哈哈哈2'},
{id:3,name: '哈哈哈3'},
],
obj: {
id: 1,
name: 222
}
},
methods: {
test() {
this.test2();
},
test2() {
alert(this.userName)
}
}
});
</script>
</html>

70
历届学生/逯帅帅/每日课程/2021-03-23/tabs.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title {
color: red;
}
.content li {
display: none;
}
.content-active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<ul>
<li v-for="(item,index) in tabs"
:class="index == currentIndex ? 'title': ''"
@click="tabChange(index)">
{{item.title}}
</li>
</ul>
<ul class="content">
<li v-for="(item,index) in tabs"
:class="index == currentIndex ? 'content-active': ''">
{{item.content}}
</li>
</ul>
<h2>{{dddd}}</h2>
<h3>{{dddd}}</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tabs: [
{ title: '社会', content: '社会的内容' },
{ title: '社会1', content: '社会的内容1' },
{ title: '社会2', content: '社会的内容2' },
]
},
watch: {
currentIndex (newval,oldval) {
console.log("newval: ", newval)
console.log("oldval: ", oldval)
}
},
methods: {
tabChange(i) {
this.currentIndex = i;
}
},
computed: {
dddd() {
console.log(11111)
return this.currentIndex
}
}
})
</script>
</html>

166
历届学生/逯帅帅/每日课程/2021-03-23/vue-router.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.router-link-exact-active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/index">首页</router-link>
<router-link to="/about">我的</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<div class="content">
<router-view></router-view>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Index = {
template: `
<div>
<ul>
<router-link tag="li" :to="{ path: '/info', query: { id: item.id } }" v-for="item in newsList" >
{{item.title}}
</router-link>
</ul>
</div>
`,
data() {
return {
newsList: [
{ id: 1, title: '哈哈'},
{ id: 2, title: '哈哈'},
{ id: 3, title: '哈哈'},
]
}
},
methods: {
goInfo(id) {
this.$router.push({
path: '/info',
query: {
id: id
}
})
}
}
}
const About = {template: '<div>我的</div>'};
const Login = {
template: '<div @click="LoginSub">登录</div>',
methods: {
LoginSub() {
localStorage.setItem("token","W3456754567UIUYTFRDGFHNGRE7")
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
}
}
}
};
const Info = () => {
return {
template: `
<div>
详情 {{ $route.query.id }}
</div>
`,
created() {
console.log(this.$route.query.id)
}
}
};
const routes = [
{
path: '/index',
component: Index,
meta: {
title: '首页',
isLogin: false
}
},
{
path: '/about',
component: About,
meta: {
title: '我的',
isLogin: true
}
},
{
path: '/login',
component: Login,
meta: {
title: '登录',
isLogin: false
}
},
{
path: '/info',
component: Info(),
name: 'info',
meta: {
title: '详情页',
isLogin: false
}
},
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes
});
router.beforeEach((to, from, next) => {
document.title = to.meta.title;
if (to.meta.isLogin) {
// 是否登录
if (localStorage.getItem("token") != null) {
next()
} else {
next({
path: '/login',
query: {
from: to.path
}
})
}
} else {
next()
}
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router,
el: '#app',
});
</script>
</html>

3146
历届学生/逯帅帅/每日课程/2021-03-23/vue-router.js Normal file
View File

File diff suppressed because it is too large Load Diff

75
历届学生/逯帅帅/每日课程/2021-03-23/笔记.txt Normal file
View File

@@ -0,0 +1,75 @@
前端发展三个阶段
1：第一阶段（后端渲染）
2：mvc 化前端开发
nodejs
3：mvvm 年代（去dom化的年代）
mvvm： vue.js jsx react.js angular.js
尤雨溪
php laravel thinkphp yii
m（model 数据）v（view 页面）c（controller 控制器）：
/home.php (controller)
m(model 数据) v(view 视图) vm（view model）：
model ajax请求到的数据
|
|
vm
|
|
view 你写的html页面
vue.js 发展史
vue 1.x
vue 2.x
1: option api 5
typescript
2: class api 对 typescript 的一次兼容
2
vue 3.x 基于 typescript 重写的一些vue版本
3: Composition API
3
vue-router 专门负责页面跳转和切换的
spa 单页web应用
hash
http://www.a.com/#/index
http://www.a.com/#/about
history
http://www.a.com/index
http://www.a.com/about
两种传参方式：
query
http://www.a.com/#/index?id=1&page=2
this.$route.query
params
http://www.a.com/#/index/1/2
this.$route.params
this.$route 路由参数信息
this.$router 路由实例