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

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

@@ -0,0 +1,111 @@
<!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>component 组件</title>
</head>
<body>
<div class="app">
<h2>app 父组件</h2>
<lb-test></lb-test>
<item :list-data="newsList" @tap="goToInfo"></item>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件 封装html代码的一种方案
// 全局组件 导入 注册 使用
// 局部组件 导入 注册 使用
// 组件通讯（数据传递）
// 父组件 ---> 子组件
// props
// 子组件 ---> 父组件
// $emit
// 兄弟组件 ---> 兄弟组件
// 插槽
// vue-router
// 组件名 html标签名称
// 全局组件
Vue.component('item', {
// props: [ 'list' ],
props: {
listData: {
type: Array,
default: () => []
}
},
data() {
return {
title: '全局组件 - 底部导航组件'
}
},
template: `
<div class="footer">
<ul>
<li v-for="(item,index) in listData" :key="index" @click="change(index)">
{{ item.title }}
</li>
</ul>
</div>
`,
methods: {
change(i) {
this.$emit("tap", i)
}
}
})
var a = {
data() {
return {
title: '局部组件 - 测试',
list: [
{ id: 1, title: '社会1' },
{ id: 2, title: '社会2' },
{ id: 3, title: '社会3' },
{ id: 4, title: '社会4' },
]
}
},
template: `
<div class="test">
<p>{{ title }}</p>
<item :list-data="list" @tap="priimg"></item>
</div>
`,
methods: {
priimg(index) {
console.log("显示图片预览：", index);
}
}
}
var vm = new Vue({
el: '.app',
data: {
newsList: [
{ id: 1, title: '首页1' },
{ id: 2, title: '首页2' },
{ id: 3, title: '首页3' },
{ id: 4, title: '首页4' },
]
},
methods: {
goToInfo(index) {
console.log("goToInfo 进详情: ", index);
}
},
components: {
'lb-test': a
}
})
</script>
</html>

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>

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

@@ -0,0 +1,99 @@
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 15px;
}
.tabs_title .active {
color: red;
}
.tabs_content li {
display: none;
}
.tabs_content .active {
display: inline-block !important;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<li :class=" index == currentIndex ? 'active' : '' "
v-for="item,index in tabs"
@click="change(index)"
:key="index">
{{ item.text }}
</li>
</ul>
<ul class="tabs_content">
<li :class=" index == currentIndex ? 'active' : '' "
v-for="item,index in tabs"
:key="index">
<p v-for="v,i in item.content" :key="i">{{ v.text }}</p>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '.app',
data: {
currentIndex: 0,
tabs: [
{
id: 1,
text: '军事',
content: [
{ text: '军事的内容1' },
{ text: '军事的内容2' },
{ text: '军事的内容3' },
]
},
{
id: 2,
text: '社会',
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' },
{ text: '社会的内容3' },
]
},
{
id: 3,
text: '体育',
content: [
{ text: '体育的内容1' },
{ text: '体育的内容2' },
{ text: '体育的内容3' },
]
}
]
},
methods: {
change(i) {
this.currentIndex = i
}
}
})
</script>
</html>

37
历届学生/fontendseven/每天课程/2021-12-13/笔记.txt Normal file
View File

@@ -0,0 +1,37 @@
vue.js 是一个 mvvm 框架
mvc ： model（数据 数据库） view（页面） controller（控制器）
mvvm： model（数据 ajax） view（页面 原生js，vue） view and model
view and model
数据双向绑定
组件系统
dom 原生js，jq
去dom操作
前端三大框架：
angular.js 最早出来
react.js 偏向前端新语法
php laravel
vue.js 尤雨溪
vue 1.x
typescript 强类型的javascript语法
vue 2.x
option api 语法 60%
this 指向
class api 语法
vue 3.x ++ 基于 typescript 开发
Composition API 40%