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

80
历届学生/陈一航/2020-04-21/in.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件间数据传递</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<quanju @aa="bb" :content="list"></quanju>
<v-jubu></v-jubu>
</div>
</body>
<script>
Vue.component('quanju', {
props:{
content: Array,
},
data(){
return {
abcd: '我是全局组件'
}
},
methods:{
submit() {
this.$emit("aa","4")
}
},
template: `
<div>
<buttom @click="submit">提交</buttom>
<ul>
<li v-for="(item,index) in content">{{item.id}}</li>
</ul>
</div>
`
});
var jubuzujian = {
data() {
return{
mesaage:'我是局部组件'
}
},
methods: {
setchilder() {
return "嘿嘿嘿"
}
},
template: `
<div>
<h2>{{mesaage}}</h2>
<h3>
<slot name="like"></slot>
</h3>
</div>
`
}
new Vue({
el: '#app',
data:{
list:[
{id:2},
{id:3},
{id:4}
]
},
components: {
'v-jubu': jubuzujian
},
methods:{
bb(val){
alert('登录'+val)
}
}
})
</script>
</html>

173
历届学生/陈一航/2020-04-21/index.html Normal file
View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2>{{getIndexData}}</h2>
<input v-model="phone" type="number" placeholder="输入手机号">
<h2 :class="{ red: isRed }">测试1</h2>
<h2 :class="isRed ? 'red' : '' ">测试2</h2>
<h2>仿照微信支付键盘</h2>
<h-header @dddd="FatherClick" :content="list" title="测试标题1"></h-header>
<!-- <h-header @dddd="FatherClickTwo" title="测试标题2"></h-header>-->
<!--3 使用局部组件-->
<v-jubu ref="hello">
<!-- <template v-slot:like>-->
<!-- 收藏-->
<!-- </template>-->
<div slot="like" class="like">收藏</div>
</v-jubu>
</div>
</body>
<script>
// watch 监听数据的变化，可以获得新数值和旧数值
// computed 计算属性 作用和 methods类似，计算结果会被缓存（变量没有发生改变）
// 组件 实现html的复用，类似于js的function函数
// 全局组件
// 局部组件
// 组件间数据传递
// 父组件 ---> 子组件
// props
// 子组件 ---> 父组件
// $emit
// 父子互调(数据的访问和修改，方法) $children $parent $root ， $refs
//
// 全局组件
Vue.component('h-header', {
// props: ['it'],
props: {
content: Array,
// content: {
// type: Array, // 这个变量 content 能存放的数据类型
// default: []
// },
title: {
type: String,
default: ""
}
},
data() {
return {
message: '我是组件 v-header'
}
},
methods: {
submit() {
this.$emit("dddd","3")
}
},
template: `
<div>
<button @click="submit">提交</button>
<h2>{{title}}</h2>
<ul>
<li v-for="(item,index) in content">{{item.id}}</li>
</ul>
</div>
`
});
// 局部组件 1：导入（定义）组件
var JuBuZuJian = {
data() {
return {
mesaage: '我是局部注册的组件'
}
},
methods: {
setChilder() {
return "哈哈哈哈"
}
},
template: `
<div>
<h2>{{mesaage}}</h2>
<h3>
<slot name="like"></slot>
</h3>
</div>
`
}
new Vue({
el: '#app',
data: {
message: 'dededede',
phone: '',
isRed: false,
list: [
{id:2},
{id:3},
{id:4}
]
},
// 局部组件 2： 注册局部组件
components: {
'v-jubu':JuBuZuJian
},
created() {
// this.getIndexData()
},
mounted() {
// console.log(this.message)
this.$children[1].$data.mesaage = "sddddd"
console.log(this.$children[1].setChilder())
console.log(this.$refs.hello.setChilder())
},
methods: {
FatherClick(it) {
alert("登录："+it)
},
FatherClickTwo(it) {
alert("注册："+it)
}
// 发送ajax请求数据
// getIndexData() {
// console.log("发送ajax请求数据")
// }
},
computed: {
getIndexData() {
return "hello"
}
},
watch: {
phone(newVal,oldVal) {
console.log("newVal:",newVal)
console.log("oldVal:",oldVal)
}
}
})
</script>
</html>

101
历届学生/陈一航/2020-04-21/keyword.html Normal file
View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body,ul,li,p,h1,h2,h3,h4 {
margin: 0;
padding: 0;
list-style: none;
}
input {
width: 100%;
height: 60px;
background: #e9e7e7;
font-size: 19px;
}
ul {
position: fixed;
width: 100%;
height: 230px;
bottom: 0;
left: 0;
background: #ededed;
display: flex;
justify-content: space-around;
text-align: center;
flex-wrap: wrap;
}
ul li {
width: 33%;
line-height: 57.5px;
}
.red {
background: red;
}
.green {
background: green;
}
.main {
}
</style>
</head>
<body>
<div class="main">
<input type="text" v-model="UserPhone" placeholder="付款金额">
<ul>
<li v-for="(item,index) in key"
:class="index === 9 ? 'red' : index === 11 ? 'green': '' "
@click="keyClick(item.text)">
{{item.text}}
<img v-if="index === 9" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/github.svg" alt="">
<img v-if="index === 11" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/github.svg" alt="">
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '.main',
data: {
UserPhone: '',
key: [
{ text: 1 },
{ text: 2 },
{ text: 3 },
{ text: 4 },
{ text: 5 },
{ text: 6 },
{ text: 7 },
{ text: 8 },
{ text: 9 },
{ text: '清空' },
{ text: 0 },
{ text: '删除' },
]
},
methods: {
keyClick(item) {
if (typeof item == "number") {
this.UserPhone += item
} else if (item === "清空") {
this.UserPhone = ""
} else if (item === "删除") {
this.UserPhone = this.UserPhone.slice(0,this.UserPhone.length - 1)
}
}
}
})
</script>
</html>

15
历届学生/陈一航/2020-04-21/笔记.txt Normal file
View File

@@ -0,0 +1,15 @@
1：混入 mixins
2：过滤器 filter
3：自定义指令 directives
axios 发送axios
vue 路由
vuex 全局数据存储
v-if
v-for
lb-isarray