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

157
历届学生/韩一伟/每天课程/2021-08-11/component.html Normal file
View File

@@ -0,0 +1,157 @@
<!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 header-title="首页的标题" @send="home" :arr="list">
<template v-slot:back>
<i >返回图标</i>
</template>
<template v-slot:like>
<i >喜欢图标</i>
</template>
</lb-header>
<div class="content">中间内容</div>
<v-footer :arr="swiperImg">
<template v-slot:default="pop">
<img height="100px" :src="pop.item" alt="">
</template>
</v-footer>
<v-footer :arr="list">
<template v-slot:default="pop">
<h2>{{ pop.item.title }}</h2>
</template>
</v-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件 实现封装使用率较高的页面
// 全局组件
Vue.component('lb-header', {
data() {
return {
title: '公共头部的标题',
test: '子组件数据'
}
},
props: {
headerTitle: {
type: String,
default: "默认标题"
},
arr: {
type: Array,
default: () => []
}
},
created() {
},
methods: {
send() {
this.$emit("send", this.test)
}
},
template: `
<div class="header">
<div class="back">
<slot name="back"></slot>
</div>
{{ headerTitle }}
<ul>
<li v-for="(v,i) in arr">{{ v.title }}</li>
</ul>
<button @click="send">点我</button>
<div class="right">
<slot name="like"></slot>
</div>
</div>
`
});
// 局部组件
var footer = {
data() {
return {}
},
props: {
arr: {
type: Array,
default: () => []
}
},
created() {
this.$parent.$children[0].$data.test = "测试修改"
console.log();
},
methods: {
},
template: `
<div class="footer">
底部
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(v,i) in arr">
<slot :item="v"></slot>
</div>
</div>
</div>
</div>
`
}
// 组件间数据传递
// 父 ---> 子 props
// 子 ---> 父 $emit 触发提交个事件，把数据抛出去
// 兄弟组件
// 插槽
//
var vm = new Vue({
el: '.app',
data: {
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
],
swiperImg: [
'https://st-cn.meishij.net/p2/20190613/20190613181442_145.jpg',
'https://st-cn.meishij.net/p2/20190613/20190613181953_808.jpg'
]
},
methods: {
home(val) {
console.log(val);
console.log("进入详情");
},
info() {
console.log("显示图片预览");
},
getData(val) {
console.log(val);
}
},
components: {
"v-footer": footer
}
})
</script>
</html>

94
历届学生/韩一伟/每天课程/2021-08-11/index.html Normal file
View File

@@ -0,0 +1,94 @@
<!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>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2>{{ hello }}</h2>
<ul>
<li v-for="(item,index) in list" @click="EnterInfo(item)">
{{ index }} | {{ item.title }}
</li>
</ul>
<img :src="src" alt="">
<ul>
<li v-for="(value,key) in obj">{{ key }} | {{ value }}</li>
</ul>
<div v-text="content"></div>
<div v-html="content"></div>
<div v-show="isShow" v-once>v-show 购物车有数据</div>
<div v-if="vip == 0">普通用户</div>
<div v-else-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-if="isShow">购物车有数据</div>
<div v-else>购物车没有数据</div>
<input type="text" placeholder="请输入用户名" v-model="userName" />
<input type="password" placeholder="请输入密码" v-model="userPwd" />
<button @click="Login">登 录</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// vue 指令（html属性）
// v-for 循环显示数据 key 必须要加
// v-bind 将变量绑定到标签的属性上 简写 :
// v-on 绑定点击事件 v-on:事件类型="事件处理函数" 简写：@
// v-html
// v-show 是使用display:none 来控制元素显示隐藏
// v-if v-else v-if-else 会把不符合条件的html直接删除
// v-model 只能用在输入框上，获取输入框的数值的
var vm = new Vue({
el: '.app',
data: {
userName: "",
userPwd: "",
vip: 1,
isShow: true,
hello: '你好这是测试',
src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
],
content: "<h2>测试v-html</h2>",
obj: {
age: 18,
name: '刘兵'
}
},
methods: {
Login() {
console.log(this.userName);
console.log(this.userPwd);
},
EnterInfo(item) {
console.log(item);
}
}
})
</script>
</html>

77
历届学生/韩一伟/每天课程/2021-08-11/index2.html Normal file
View File

@@ -0,0 +1,77 @@
<!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">我是h2</h2>
<h1>{{ msg | shenglh }}</h1>
<h3>{{ test }}</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 计算属性 computed
// 侦听器 watch
// 混入 mixins 封装相同代码，减少冗余
var mix = {
data () {
return {
page: 0,
totalPage: 10
}
},
methods: {
bottom () {
}
}
};
var vm = new Vue({
el: '.app',
mixins: [ mix ],
data: {
msg: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'
},
watch: {
msg (newVal, oldVal) {
console.log(newVal, oldVal);
}
},
created () {
console.log(this.page);
console.log("created");
},
mounted () {
console.log("mounted");
console.log(this.$refs.test);
},
filters: {
shenglh(val) {
return val.substring(0,3)+"..."
}
},
methods: {
test2() {
return "test2"
}
},
computed: {
test () {
return "test"
}
}
})
</script>
</html>

97
历届学生/韩一伟/每天课程/2021-08-11/tabs.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>Document</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.tabs_title_active {
color: red;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<li :class=" index == currentIndex ? 'tabs_title_active' : '' "
@click="currentIndex = index"
v-for="(item,index) in tabsList">
{{ item.title }}
</li>
</ul>
<div class="tabs_conetnt">
<div class="" v-for="(item,index) in tabsList">
<div v-if="index == currentIndex">
<p v-for="(v,i) in item.content">{{ v.text }}</p>
</div>
</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' },
]
},
]
},
created() {
},
methods: {
changeTitle(i) {
this.currentIndex = i
}
}
})
</script>
</html>

42
历届学生/韩一伟/每天课程/2021-08-11/笔记.txt Normal file
View File

@@ -0,0 +1,42 @@
前端阶段：
1：html，css，js，jq
2：m（model）v（view）c（controller）
http://www.xxx.com/index
Nodejs
3：m（model）v（view） vm （view and model）
Angular.js React.js Vue.js ( 尤雨溪 )
https://cn.vuejs.org/
vue 2.x
基于原生js开发
option api 80%
new Vue({
data: {}
})
vue clas api 5%
class Home extends Vue {
}
Vue 3.x (vue next) typescript
Composition API 15%
setup() {
}
生命周期