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

81
历届学生/18课程/class18/课程/2020-11-09/back.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景切换</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul,
li,
body {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
float: left;
margin-right: 10px;
}
li img {
width: 80px;
}
body,
html,
.back {
width: 100%;
height: 100%;
}
.back {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
</style>
</head>
<body>
<div id="app">
<div class="back" :style="{ background: cuurenUrl }"></div>
<ul>
<li v-for="(item,index) in BackImg" :key="index">
<img :src="item.url" alt="" @click="changeUrl(index)">
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
// 发送ajax请求
created() {
this.cuurenUrl = `url('${this.BackImg[this.currentIndex].url}')`;
},
data: {
currentIndex: 0,
cuurenUrl: '',
BackImg: [
{ title: '11', url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=289489236,794389348&fm=26&gp=0.jpg' },
{ title: '222', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604920693646&di=f67f827ecdb0d1905a267b08f94a782a&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F21%2F20161221112706_dfjEa.jpeg' },
]
},
methods: {
changeUrl(index) {
this.currentIndex = index;
this.cuurenUrl = `url('${this.BackImg[this.currentIndex].url}')`;
}
}
})
</script>
</html>

111
历届学生/18课程/class18/课程/2020-11-09/index.html Normal file
View File

@@ -0,0 +1,111 @@
<!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>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- view -->
<div class="test" v-cloak>
<div v-cloak>
{{ message }}
</div>
<p>{{list}}</p>
<img :src="img" :alt="hello">
<div v-html="h1"></div>
<p v-show="isVip">只有vip才能看的内容</p>
<button @click="HelloTest('11111')">充钱</button>
<ul>
<li v-if="isShow == 1">vip1</li>
<li v-else-if="isShow == 2 ">vip2</li>
<li v-else-if="isShow == 3 ">vip3</li>
<li v-else-if="isShow == 4 ">vip4</li>
<li v-else-if="isShow == 5 ">vip5</li>
<li v-else>普通用户</li>
</ul>
<ul>
<li v-for="(v,i) in list" :key="i">
{{ i+1 }} : {{ v.name }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '.test',
// 存放程序运行中定义的所有变量 model
data: {
hello: '这是测试文字',
dd: 'asdasfasf',
img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
list: [
{ id: 1,name: '哈哈哈1' },
{ id: 2,name: '哈哈哈2' }
],
h1: "<h1>这是h1</h1>",
isVip: true,
isShow: 1,
UserName: '',
message: 'ewdewde'
},
created () {
},
// vue 中所有的方法都在这写
methods: {
HelloTest(d) {
console.log(d);
this.test2()
this.isVip = !this.isVip
},
test2() {
console.log("test2");
}
},
watch: {
message: function(newVal,OldVal) {
console.log("newVal: ", newVal);
console.log("OldVal: ", OldVal);
}
},
computed: {
test2() {
console.log("test2");
}
}
})
// 指令 将数据渲染到页面上的方式
// v-bind 将变量绑定到标签的属性上 简写 :
// v-html 渲染html v-text 渲染纯文本
// v-show 根据一个变量的true flase 决定元素的显示和隐藏，它是对元素设置 display
// v-if 根据一个变量的true flase 决定元素的显示和隐藏, 它是对元素进行删除来显示隐藏的
// 实际情况用谁？
// 他们两个有什么优缺点？
// v-on:事件类型="方法" @
// v-model 一般只能用于输入框
// v-slot 插槽
// computed 对比methods ，他的计算结果会被缓存起来
//
// computed methods
</script>
</html>

68
历届学生/18课程/class18/课程/2020-11-09/tabs.html Normal file
View File

@@ -0,0 +1,68 @@
<!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,
body {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
float: left;
margin-right: 10px;
}
.active {
color: red;
}
</style>
</head>
<body>
<!-- view -->
<div class="test">
<ul>
<li v-for="(v,i) in Tabs" :key="i" @click="TabsClick(i)" :class="i == activeIndex ? 'active' : '' ">{{ v.text }}</li>
</ul>
<div class="content">
{{ Tabs[activeIndex].content }}
</div>
</div>
</body>
<script>
new Vue({
el: '.test',
data: {
activeIndex: 0,
Tabs: [
{ text: '社会', content: '社会的内容' },
{ text: '军事', content: '军事的内容' },
{ text: '体育', content: '体育的内容' },
{ text: '财经', content: '财经的内容' },
]
},
methods: {
TabsClick(index) {
this.activeIndex = index;
console.log( this.activeIndex)
}
}
})
</script>
</html>

52
历届学生/18课程/class18/课程/2020-11-09/任务.txt Normal file
View File

@@ -0,0 +1,52 @@
1: 插槽 https://cn.vuejs.org/v2/guide/components-slots.html
2：混入 https://cn.vuejs.org/v2/guide/mixins.html
3：自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html
4：过滤器 https://cn.vuejs.org/v2/guide/filters.html
5：vue-router https://router.vuejs.org/zh/
vue 1.0
vue 2.x
typescript nodejs(deno.js ) + typescript VueOptionApi VueClassApi
Vue 3.x
typescript
vue composition Api
laravel
metor
class Home extend Vue {
public msg:string = "111"
crated() {
}
test() {
}
}
setup({
let react = {
msg: 0
}
created() {
}
let a = () => {
}
return react
})

21
历届学生/18课程/class18/课程/2020-11-09/笔记.txt Normal file
View File

@@ -0,0 +1,21 @@
js + jquery dom操作的年代
Vue.js react.js angular.js 小程序 虚拟dom年代(mvvm)
mvc
m model
v view
c controller
mvvm
m model
v view
vm view model
数据双向绑定
生命周期

106
历届学生/18课程/class18/课程/2020-11-09/组件.html Normal file
View File

@@ -0,0 +1,106 @@
<!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>
</head>
<body>
<!-- view -->
<div class="test">
<lb_header :text="title" @fefrefre="ddddddddd" user-name="1"></lb_header>
<div class="content">
中间内容
</div>
<lb_footer></lb_footer>
<jubua></jubua>
</div>
</body>
<script>
var a = 1
// 组件？ 将网页拆分为一个个小零件（组件），需要用到的时候进行引用
// 全局组件
// 局部组件
// 父子组件
// 父 ---> 子 传递数据 props
// 子 ---> 父 传递数据 $emit
Vue.component("lb_header", {
// props: ['text'],
props: {
text: {
type: String,
default: '哈哈哈哈默认数值'
},
userName: {
type: String,
default: '用户名'
}
},
data() {
return {
aaaa: '我是lb_header组件传递给父亲的数据'
}
},
methods: {
demos() {
this.$emit("fefrefre", this.aaaa)
}
},
template: `
<h2 @click="demos">{{ text }} | {{ userName }}</h2>
`
})
Vue.component("lb_footer", {
data() {
return {
text: '我是app的底部导航'
}
},
methods: {
Text() {
alert(1)
}
},
template: `
<h2 @click="Text">{{ text }}</h2>
`
})
// 局部组件
var JuBuA = {
data(){
return {
}
},
methods: {},
template: `<p>我是局部注册的组件</p>`
}
var vm = new Vue({
el: '.test',
data: {
title: '0'
},
methods: {
ddddddddd(res) {
console.log(res);
}
},
components: {
'jubua': JuBuA
}
})
</script>
</html>