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

109
历届学生/18课程/class18_2/课程/2021-01-07/component.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>component</title>
</head>
<body>
<div class="app">
<about ref="about" title="我是" @setdata="getdata" @getfather="getd"></about>
<love_p :test="geiLove"></love_p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局组件
// 局部组件
// 父组件 -> 子组件 传递数据 props
// 子组件 -> 父组件 传递数据 $emit提交一个事件，可以携带数据
// 全局组件
Vue.component('love_p', {
props: ['test'],
template: `
<div>
<h2>{{title}}</h2>
<p>{{ test }}</p>
</div>
`,
data() {
return {
title: '组件 love_p'
}
},
methods: {
}
});
// 局部组件
var about = {
// props: ['title'],
props: {
title: {
type: String,
default: '默认数值',
validator: function(val) {
return val.length < 3;
}
}
},
template: `
<div>
<div>{{title | checkTitle}}</div>
<h1 @click="hello">哈哈哈哈</h1>
</div>
`,
filters: {
checkTitle(res) {
return res + ' - 过滤后的数据';
}
},
data() {
return {
goLoveP: "我是需要给love_p的数据"
}
},
created() {
this.$emit("getfather", this.goLoveP);
},
mounted() {
console.log(this.$parent.$children[1].title = "偷偷修改lovep");
},
methods: {
ceshi() {
console.log("被父亲调用");
},
hello() {
this.$emit('setdata','子组件数据')
}
}
};
new Vue({
el: '.app',
data: {
geiLove: ""
},
mounted() {
this.$refs.about.ceshi()
},
methods: {
getd(val) {
console.log("val ===== ",val);
this.geiLove = val;
},
getdata(res) {
console.log(res);
}
},
components: {
// 'lb_about': about
about
}
})
</script>
</html>

113
历届学生/18课程/class18_2/课程/2021-01-07/index.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background: red;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2>{{msg}}</h2>
<img :src="img" alt="">
<ul>
<li v-for="v,index in list " :key="index">{{index}} | {{v.name}}</li>
</ul>
<ul>
<li v-for="val,key,i in obj" :key="i">{{i}} | {{key}} | {{val}}</li>
</ul>
<h2 v-if="isVip == 1">游客查看内容</h2>
<h2 v-else-if="isVip == 2">普通vip查看内容</h2>
<h2 v-else-if="isVip == 3">超级vip查看内容</h2>
<h2 v-else>错误页面</h2>
<h3 v-show="isShow">isShow</h3>
<div v-html="test"></div>
<div v-text="test"></div>
<button @click="hello('你好')">点我</button>
<div class="box" @click="father">
<button @click.stop.once="child">子元素点击</button>
</div>
<input type="text" v-model="UserName" placeholder="请输入用户名">
<!-- <p>{{UserName}}</p> -->
<span v-once>{{ UserName }}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// v-bind 将变量绑定到标签的属性上
// 简写 ：
// v-for
// v-if 会根据条件真假 对元素进行 增删
// v-show 会根据条件真假 对元素进行display设置
// v-on @
var vm = new Vue({
el: '.app',
data: {
test: '<h2>v-html</h2>',
msg: '这是vue',
img: 'https://www.baidu.com/img/bd_logo1.png',
UserName: '1111',
list: [
{id:1,name:'测试1'},
{id:2,name:'测试2'},
{id:3,name:'测试3'},
],
obj: {
name: '张三',
age: 18
},
isVip: 4,//1游客，2普通vip，3超级vip
isShow: false,
},
methods: {
father() {
alert("father")
},
child() {
alert("child")
},
hello(name) {
console.log(this.msg);
alert(name)
}
}
});
// var data = {
// age: 18,
// name: '张三'
// };
// document.querySelector("h2").innerText = data.name
// Object.defineProperty(data,"name", {
// get: function() {
// return "李四";
// },
// set: function(newValue) {
// console.log(newValue);
// document.querySelector("h2").innerText = newValue
// },
// })
// console.log(data.name);
</script>
</html>

114
历届学生/18课程/class18_2/课程/2021-01-07/tabs.html Normal file
View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tabstitle {
overflow: hidden;
}
.tabstitle li{
float: left;
margin-right: 20px;
list-style: none;
}
.active {
color: red;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabstitle">
<li v-for="item,index in Tabs"
@click="currentIndex = index"
:class="currentIndex == index ? 'active' : '' "
:key="index">
{{item.title}}
</li>
</ul>
<ul class="tabscontent">
<li v-for="item,index in Tabs[currentIndex].content"
:key="index">
{{ item.name }}
</li>
</ul>
<div class="sss" ref="sss">哈哈哈</div>
<div @click="test">点我 {{hello}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '.app',
data: {
currentIndex: 0,
Tabs: [
{
title: '社会',
content: [
{ name: '社会1' },
{ name: '社会1' }
]
},
{
title: '军事',
content: [
{ name: '军事1' },
{ name: '军事1' }
]
},
{
title: '财经',
content: [
{ name: '财经1' },
{ name: '财经1' }
]
}
]
},
beforeCreate() {
// console.log(document.querySelector(".sss"));
console.log(this.currentIndex);
},
watch: {
// Tabs(newVal,oldVal) {
// console.log("newVal: ", newVal);
// console.log("oldVal: ", oldVal);
// }
Tabs: {
handler(newVal,oldVal) {
console.log("newVal: ", newVal);
console.log("oldVal: ", oldVal);
},
deep: true
}
},
// 发送ajax请求
created() {
console.log(this.currentIndex);
},
// 一般需要和dom进行交互的操作放在这
mounted() {
console.log(this.$refs.sss);
},
beforeUpdate() {
console.log("beforeUpdate");
},
methods: {
test() {
alert("111")
}
},
computed: {
hello() {
return "qwdwqdwq"
}
}
})
</script>
</html>

23
历届学生/18课程/class18_2/课程/2021-01-07/任务.txt Normal file
View File

@@ -0,0 +1,23 @@
1：插槽 多
2：混入 实现公共代码的封装（可以解决this指向的问题，保障this始终指向当前实例） 多
3：自定义指令 少
4：过滤器 少
明天课程
vue-router
路由懒加载
路由分离打包
APP.JS 2kb 20MB
1.JS
2.JS
100.JS
babel
vuex

53
历届学生/18课程/class18_2/课程/2021-01-07/笔记.txt Normal file
View File

@@ -0,0 +1,53 @@
vue react angular
|
尤雨溪
m（model）v（view）vm（view and model）
m（model） v（view）c（controller）
vue option api (原生js) 2.x
Vue({
data: {
a: "1"
},
methods: {
getdata() {}
}
})
vue class api 2.x
主要是：为了临时实现对 typescript 的支持
class Home extend Vue {
public a: string = "1";
getdata() {
}
}
vue 3 composition api (vue-next vue3.x)
setup() {
var a = ref(1)
const getdata = () => {}
return {
a,
getdata
}
}
vue 优势？
组件系统
响应式系统 页面 <---> 数据
String a = "1";
js + node.js + typescript