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

177
历届学生/fontendseven/每天课程/2021-12-13/index.html Normal file
View File

@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2 ref="demos">{{ hello | shengflh }}</h2>
<a :href="href">vue官网</a>
<ul>
<li v-for="(item,index) in list" :key="index">
<a :href=" './info.html?id='+item.id ">{{ item.text }}</a>
</li>
</ul>
<ul>
<li v-for="(value,key) in test">
{{ value }} | {{ key }}
</li>
</ul>
<input type="text" placeholder="输入用户名" v-model.trim="userName">
<p v-once>你输入的用户名：{{ userName }}</p>
<p>你输入的用户名2：{{ userName }}</p>
<hr>
<div v-html="h2Demo"></div>
<div v-text="h2Demo"></div>
<hr>
<div class="test">
<div v-if="type == '1' ">群主</div>
<div v-else-if="type == '2' ">管理员</div>
<div v-else>群成员</div>
</div>
<div v-show="isShow">v-show的使用</div>
<button @click="hahah('1111')">点我</button>
<hr>
<div class="1">{{ total }}</div>
<div class="2">{{ total }}</div>
<div v-lb="ffff"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var loadMore = {
data() {
return {
page: 1,
totalPage: 0,
ffff: '哈哈哈哈哈哈哈'
}
},
methods: {
load() {
console.log("滚动加载...");
}
}
}
var vm = new Vue({
el: '.app',
mixins: [loadMore],
// 定义变量的地方
// 指令 （标签的属性）
// v-bind 将变量绑定到 标签的属性上
// 简写： :
// v-for 用来遍历数组 或 对象的
// v-model 专门给输入框用 <input> <select> <textarea>
// v-html 把变量中保存的html渲染到网页上
// v-text 把变量中保存的html显示到网页上
// v-if 根据条件的true false 对元素进行显示隐藏
// 不符合条件的html元素会被删除
// 1: 条件较多的时候
// v-else
// v-if v-else-if ..... v-else
// v-show 根据条件的true false 对元素进行显示隐藏
// 不符合条件的html会被display: none;
// 2: 数据量较大的时候，需要提高性能的时候
// v-on 绑定事件（）
// 简写： @
// 混入 用于代码封装 解决this指向问题
// 生命周期 created mounted
// ref
data: {
hello: '你好啊，Vue.js！！',
href: 'https://cn.vuejs.org/',
userName: "刘兵",
list: [
{ id: 1, text: '新闻1' },
{ id: 2, text: '新闻2' },
{ id: 3, text: '新闻3' },
],
test: {
id: 1,
text: '新闻1'
},
h2Demo: '<h2>哈哈哈哈哈</h2>',
type: '1', // 1 2 3
isShow: false
},
// 发送ajax请求
filters: {
shengflh(val) {
return val.substring(0, 3) + "..."
}
},
directives: {
lb: {
// 指令的定义
inserted: function (el, binding) {
// console.log("=========:",el, binding.value);
document.title = binding.value
}
}
},
created() {
console.log(this.page);
console.log(this.load());
console.log(this.$refs.demos);
},
mounted() {
console.log(this.$refs.demos);
},
updated() {
console.log("监听到页面改变");
},
// 定义方法
methods: {
hahah(num) {
console.log('你点了我，哈哈 ', num);
this.testss()
},
testss() {
console.log(this.userName);
}
},
computed: {
total() {
console.log("total....");
return 1 + 1
}
},
watch: {
userName(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
})
</script>
</html>