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

100
历届学生/fontendsix/每日课程/2021-11-22/index.html Normal file
View File

@@ -0,0 +1,100 @@
<!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>
<h2 v-once>{{ test }}</h2>
<img :src="imgSrc" alt="">
<ul>
<li v-for="v,i in newList" :key="i" @click="LiClick(i)">{{ i }} | {{ v.title }}</li>
</ul>
<input type="text" placeholder="输入用户名" v-model="userName">
{{ userName }}
<div class="" v-show="isVip">vip查看的内容</div>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<h2>{{ hello }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// vue 如何实现双向数据绑定的？？？
// vue 指令 （标签的属性 全局属性）
// v-bind: 将变量绑定到标签的属性上
// 简写 :
// v-for 循环 必须加 :key="" 数值一般是下标
// v-html 将字符串显示成网页
// v-text 所有内容显示成为本
// v-model 用来获取输入框用户输入的数值 修饰符 .trim
// v-on 绑定点击事件 v-on:事件类型="事件处理函数"
// 简写 @事件类型="事件处理函数"
// v-show
// v-if v-else v-if-else
// v-slot 留坑，插槽的时候再说
var vm = new Vue({
el: '.app',
data: {
type: 'C',
userName: '',
test: '你好',
imgSrc: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
newList: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
],
html: "<h2>测试html</h2>",
isVip: false
},
// vue中的所有方法
methods: {
LiClick(index) {
console.log("你点击了li标签: ", this.newList[index]);
}
},
watch: {
test(newValue, oldValue) {
console.log(newValue, oldValue);
}
},
computed: {
hello() {
return "111111"
}
}
})
</script>
</html>

70
历届学生/fontendsix/每日课程/2021-11-22/swiper.html Normal file
View File

@@ -0,0 +1,70 @@
<!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">
<swiper :list="imgList">
<template v-slot:default="{ data: a }">
<img :src="a" alt="">
</template>
</swiper>
<hr>
<swiper :list="newsList">
<template v-slot:default="{ data: a }">
<p>{{ a.title }}</p>
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component("swiper", {
template: `
<div class="swiper">
<div class="swiper-silder" v-for="(item,index) in list" :key="index">
<slot :data="item"></slot>
</div>
</div>
`,
props: {
list: {
type: Array,
default: () => []
}
},
data() {
return {
}
},
methods: {
}
});
new Vue({
el: '.app',
data: {
imgList: [
'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
],
newsList: [
{ id: 1, title: '热点1' },
{ id: 2, title: '热点2' },
{ id: 3, title: '热点3' },
]
},
methods: {
}
})
</script>
</html>

114
历届学生/fontendsix/每日课程/2021-11-22/tabs.html Normal file
View File

@@ -0,0 +1,114 @@
<!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;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 20px;
}
.title_active {
color: red;
}
.tabs_content div {
display: none;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<!-- <li :class=" index == currentIndex ? 'title_active' : '' " -->
<li :class="{ title_active: index == currentIndex }"
@click="currentIndex = index"
v-for="(item,index) in tabsList" :key="index">
{{ item.title }}
</li>
</ul>
<div class="tabs_content">
<div :class="index == currentIndex ? 'content_active' : '' " v-for="(item,index) in tabsList" :key="index">
<p v-for="(v,i) in item.content" :key="i">
{{ v.text }}
</p>
</div>
</div>
</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,
tabsList: [
{
id: 1,
title: '精选',
content: [
{ text: '精选的内容1' },
{ text: '精选的内容2' },
{ text: '精选的内容3' },
]
},
{
id: 2,
title: '美食',
content: [
{ text: '美食的内容1' },
{ text: '美食的内容2' },
{ text: '美食的内容3' },
]
},
{
id: 3,
title: '百货',
content: [
{ text: '百货的内容1' },
{ text: '百货的内容2' },
{ text: '百货的内容3' },
]
},
{
id: 4,
title: '个护',
content: [
{ text: '个护的内容1' },
{ text: '个护的内容2' },
{ text: '个护的内容3' },
]
},
]
},
methods: {
changeActive(index) {
this.currentIndex = index;
}
}
})
</script>
</html>

75
历届学生/fontendsix/每日课程/2021-11-22/笔记.txt Normal file
View File

@@ -0,0 +1,75 @@
angular react vue 尤雨溪
m（model ajax获取到的数据） v（view 页面） vm（view and model） 模块
// dom操作
// 去dom 化
m（model）v（view）c（controller）模式 纯服务端渲染的网站开发
laravel
vue 1.x
vue 2.x
option api vue 不适合做大型项目开发
60%
class api 过渡阶段 语法
5%
@Componect
class Home extends Vue {
}
vue3.x nodejs + typescript
composition api 35%
setup() {
var test = function() {
}
return {
test
}
}
vue 优势：
数据双向（view and model）绑定 & 响应式
组件系统
计算属性和侦听器
组件
混入 mixins this 指向
更合理的代码封装（解决this指向问题）
自定义指令
过滤器
vue-router
vue第二种用法 （详细的介绍第二种用法的文件结构和规范注意事项）
demo
封装vue脚手架
做项目........
vue cli 脚手架
vue 2.x
vuecli 2.x 自己的文件夹结构
vue 3.x
vuecli 3.x 4.x 5.x 文件结构变化很大

149
历届学生/fontendsix/每日课程/2021-11-22/组件.html Normal file
View File

@@ -0,0 +1,149 @@
<!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">
<lb-header :title="str"></lb-header>
<lb-button @more="alertOne"></lb-button>
<h2 ref="nihao">测试标签</h2>
<lb-button @more="alertTwo"></lb-button>
<lb-header title="详情页的头部">
<template v-slot:left>
<i>我是图标left</i>
</template>
<template v-slot:right>
<i>我是图标right</i>
</template>
</lb-header>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件
// 生命周期
//
// 全局组件 在项目的任何一个页面都可以随意使用
// ref
// 局部组件 只有某个页面可以使用
// 1 定义局部组件
var button_a = {
template: `
<div>局部组件 </div>
`,
data() {
return {
}
},
methods: {},
}
Vue.component('lb-header', {
template: `
<div>
<div class="left">
<slot name="left"></slot>
</div>
<h2>{{ title }}</h2>
<div class="right">
<slot name="right"></slot>
</div>
</div>
`,
// props: [ 'title' ],
props: {
title: {
type: String,
default: '默认标题'
}
},
data() {
return {
headerText: '我的公共头部'
}
},
methods: {
}
})
Vue.component('lb-button', {
template: `
<button @click="but_click">
点我
<lb-c></lb-c>
</button>
`,
data() {
return {
aaa: '11111'
}
},
methods: {
but_click() {
// 2
console.log(this.$root.$children[3].$props.title="哈哈是受到很多很多很好的");
this.$emit("more", "1111")
}
},
// 2 注册局部组件
components: {
"lb-c":button_a
}
});
// 父子组件的数据传递
// 父 --> 子 props provide / inject
// 子 --> 父 $emit
// 传html 用插槽
// 别名插槽
// 作用域插槽 (搞不明白没关系)
// 兄弟关系
// 1: 子1 $emit 提交数据给父组件，然后父组件通过props传给子2
// 2: this.$parent $root 等实现
// 3: provide / inject
new Vue({
el: '.app',
data: {
str: '',
},
beforeCreate() {
console.log(this);
},
created() {
this.getIndex();
console.log(this.$refs.nihao);
},
methods: {
alertOne(res){
console.log(res);
this.str = res;
alert(1)
},
alertTwo(res){
console.log(res);
alert(2)
},
getIndex() {
console.log("getIndex");
}
}
})
</script>
</html>