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

46
历届学生/罗朝/2019-05-15/demo.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue 天气预报</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in futureList">{{item.temperature}}</li>
</ul>
</div>
<script>
//
new Vue({
el: '#app',
mounted() {
this.getData()
},
data:{
ajaxUrl : 'http://103.91.219.160:3000/getWeather',
futureList: []
},
methods: {
getData() {
this.$http.get(this.ajaxUrl, {
params: {
cityname: '合肥'
}
})
.then( function(success) {
this.futureList = success.data.result.future
},function(error) {
console.log(error)
})
}
},
})
</script>
</body>
</html>

57
历届学生/罗朝/2019-05-15/index.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入便签内容" v-model="UserMessage">
<button @click="addList">提交</button>
<div v-if="listData.length==0">
暂无便签内容...
</div>
<ul v-else>
<li v-for="(item,index) in listData">
{{ index+1 }} : {{item}}
<span @click="deleteList(index)"> x </span>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
listData: [],
UserMessage: null
},
mounted () {
this.listData = this.getLocalStorage("localData")
},
methods: {
addList () {
this.listData.push(this.UserMessage)
this.setLocalStorage(this.listData)
this.UserMessage = null
},
deleteList(index) {
this.listData.splice(index,1)
this.setLocalStorage(this.listData)
},
getLocalStorage(key) {
return JSON.parse(localStorage.getItem(key))
},
setLocalStorage(value) {
localStorage.setItem("localData",JSON.stringify(value))
}
},
})
</script>
</body>
</html>

67
历届学生/罗朝/2019-05-15/样式绑定.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>样式绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
body,ul{
margin: 0;
padding: 0;
}
body,html,#app,.main {
width: 100%;
height: 100%;
}
ul li {
list-style: none;
}
.onActive {
color: red;
}
.weight {
font-weight: bolder
}
</style>
</head>
<body>
<div id="app">
<div class="main" :style="{background: `url(${currents})`}">
<ul>
<li v-for="item in imgList">
<img :src="item.url" alt="" @click="changeImg(item.url)">
</li>
</ul>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
currents: 'https://yanxuan.nosdn.127.net/43c9272008bd5af7d259eb9afdcf9c68.jpg?imageView&thumbnail=420x420',
imgList: [
{ url: 'https://yanxuan.nosdn.127.net/43c9272008bd5af7d259eb9afdcf9c68.jpg?imageView&thumbnail=420x420' },
{ url: 'https://yanxuan.nosdn.127.net/3e95a7c4c5d78f9ad6e925d8a3248af0.jpg?imageView&quality=95&thumbnail=420x420' },
{ url: 'https://yanxuan.nosdn.127.net/a4f49393001daef6c1ae9d9dcb2614c9.jpg?imageView&quality=95&thumbnail=420x420' }
]
},
methods: {
changeImg(imgurl) {
this.currents = imgurl
this.changeHEllo()
}
},
computed: { // computed 会缓存计算结果，下次再被调用的时候不需要重新计算，一般用在一些计算上，例如购物车商品总价的计算
changeHEllo() {
console.log("changeHEllo")
}
},
})
</script>
</body>
</html>

110
历届学生/罗朝/2019-05-15/组件.html Normal file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<lb-children @father-enent="fatherClick" :wdfewefe="msg"></lb-children>
<div class="content">主体内容</div>
<lb-footer></lb-footer>
</div>
<script>
// 父组件可以向子组件通过 props传递数据
// 但是 反过来 子组件 没有办法直接访问或者修改父组件里面的任何数据
// 子组件需要通过事件向父组件提交数据
// 1：局部注册组件
// 1 先定义
// 2: 在Vue里面挂载一下
var children = {
props: [ "wdfewefe" ],
template: `
<div class="footer">
<ul>
<li v-for="item in wdfewefe">
<img :src="item.url" alt="">
<p>{{ item.title }}</p>
</li>
</ul>
<button @click="submit()">点我</button>
</div>`,
data() {
return {
titlejubu: '局部注册组件'
}
},
methods: {
alerts() {
alert("局部注册")
},
submit() {
this.$emit("father-enent","我是子组件")
}
},
}
// // 2: 全局注册组件
// Vue.component("lb-footer",{
// data () {
// return {
// list: [
// { url: './img/book.png',title: '书架' },
// { url: './img/chat.png',title: '书城' },
// { url: './img/man.png',title: '' },
// { url: './img/music.png',title: '轻音乐' },
// { url: './img/user.png',title: '我的' }
// ]
// }
// },
// template: `<div class="footer">
// <ul>
// <li v-for="item in list">
// <img :src="item.url" alt="">
// <p>{{ item.title }}</p>
// </li>
// </ul>
// </div>`
// })
new Vue({
el: '#app',
data: {
msg: [
{ url: './img/book.png',title: '书架' },
{ url: './img/chat.png',title: '书城' },
{ url: './img/man.png',title: '' },
{ url: './img/music.png',title: '轻音乐' },
{ url: './img/user.png',title: '我的' }
]
},
methods: {
fatherClick(res) {
console.log(res)
}
},
components : {
'lb-children': children
}
})
</script>
</body>
</html>