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

122
历届学生/韩想/每日课程/2020-09-02/index.html Normal file
View File

@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div class="dd">
<h2>{{text}}</h2>
<a :href="href" :title="text">{{text}}</a>
<p v-text="test"></p>
<ul>
<li @click="testa(v.title)" v-for="v,i in list">
下标：{{i}} ： {{ v.title }}
</li>
</ul>
<ul>
<li v-for="v, k,index in obj">
index: {{index}} v: {{v}} k: {{k}}
</li>
</ul>
<p v-if="isShow">v-if 登录过 可以看</p>
<p v-else>没登录过 不能看</p>
<!-- <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> -->
<p v-show="showH">v-show</p>
<a href="" @click.prevent="testAlert">点我弹窗</a>
<div @click="f1(3)" style="width: 100px;height: 100px;background-color: aqua;">
<div @click.stop="c1" style="width: 50px;height: 50px;background-color: red;">
www
</div>
</div>
<input type="text" v-model="inputModel">
{{ inputModel }}
<span v-pre>{{ inputModel }}</span>
<div :class="{ active: false }">哈哈哈</div>
</div>
</body>
<script>
// 数据双向绑定
// vue的指令 vue自定义的一些html标签上的 属性
// v-bind 作用将变量绑定到标签的属性上 简写 :
// v-text
// v-html
// v-for
// v-if 如果为false 会将，dom删除，true 重新添加 数据量小的情况下
// v-show 数据量大的时候进行显示隐藏
// v-on 绑定事件 @
// v-model 给input用的
var vm = new Vue({
el: '.dd',
// 变量的定义，必须放到data内部
data: {
text: '哈哈哈哈',
href: 'http://www.baidu.com',
showH: false,
inputModel: 'inputModel',
list: [
{ id: 1,title: '测试1' },
{ id: 2,title: '测试2' },
{ id: 3,title: '测试3' },
],
isShow: false,
obj: {
name: 'lb',
age: 18,
id: 1
},
test: '<h2>v-text</h2>'
},
// 专门放方法
methods: {
testa(ti) {
alert(ti)
},
f1(name) {
alert("f1: "+name)
},
c1() {
alert("c1")
},
testAlert() {
alert("哈哈哈哈")
}
}
})
</script>
</html>

59
历届学生/韩想/每日课程/2020-09-02/tabs.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
overflow: hidden;
}
li {
float: left;
margin-right: 10px;
}
.active {
color: red;
}
</style>
</head>
<body>
<div class="app">
<ul>
<li v-for="item,index in tabs"
:class="index == ActiveIndex ? 'active' : '' "
@click="changeTabs(index)"
:key="index">
{{ item.title }}
</li>
</ul>
<div class="div">{{ tabs[ActiveIndex].content }}</div>
</div>
</body>
<script>
new Vue({
el: '.app',
data: {
ActiveIndex: 0,
tabs: [
{ id: 1, title: '热门', content: '热门内容' },
{ id: 2, title: '推荐', content: '推荐内容' },
{ id: 3, title: '军事', content: '军事内容' },
{ id: 4, title: '社会', content: '社会内容' },
]
},
methods: {
changeTabs(ix) {
this.ActiveIndex = ix;
}
}
})
</script>
</html>

83
历届学生/韩想/每日课程/2020-09-02/tabs2.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul,
.title {
list-style: none;
margin: 0;
padding: 0;
}
.title {
overflow: hidden;
}
.title p {
float: left;
margin-right: 10px;
}
.active {
color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="title">
<p v-for="item,index in tabs" :key="index" :class="index == ActiveIndex ? 'active' : '' "
@click="changeTabs(index)">
{{ item.title }}
</p>
</div>
<div class="content" v-show="index == ActiveIndex" v-for="z,index in tabs.length">
<p v-for="v,i in tabs[ActiveIndex].content">{{v.nr}}</p>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '.app',
data: {
ActiveIndex: 0,
tabs: [
{
id: 1, title: '热门', content: [
{ id: 1, nr: '333' },
{ id: 2, nr: '33' },
{ id: 3, nr: '44' },
]
},
{
id: 2, title: '推荐', content: [
{ id: 1, nr: 'dd' },
{ id: 2, nr: 'cc' },
{ id: 3, nr: '222' },
]
}
]
},
methods: {
changeTabs(ix) {
this.ActiveIndex = ix;
}
}
})
</script>
</html>

28
历届学生/韩想/每日课程/2020-09-02/笔记.txt Normal file
View File

@@ -0,0 +1,28 @@
- vue
- react
- angular
mvvm 前端框架
model view viewmodel
js jq：dom操作
三大框架：数据驱动页面
mvc
model 层 数据层
view 层 视图（页面）
controller 层 控制器
用户 --->controller--> vie and model
vie and model --> controller --> 浏览器 ---> 用户