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

91
历届学生/吴欣阳/每天课程/2021-07-16/vue/index.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h1>{{ test }}</h1>
<a :href="url">你好</a>
<div v-html="h2html"></div>
<div v-text="h2html"></div>
<ul>
<li v-for="(v,i) in newsList" :key="i">
{{ i }} ：{{ v.title }}
</li>
</ul>
<div v-show="isShow">
v-show 指令学习
</div>
<div v-if="vipLeave == 1">vip1</div>
<div v-else-if="vipLeave == 2">vip2</div>
<div v-else-if="vipLeave == 3">vip3</div>
<div v-else-if="vipLeave == 4">vip4</div>
<div v-else>暂无vip</div>
<input type="text" v-model="userName" placeholder="请输入用户名">
{{ userName }}
<div v-once>{{userName}}</div>
<button @click="hello(1)">登 录</button>
<span v-pre>{{ test }}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// vue 指令
// v-bind 将变量绑定到标签的属性上 简写 :
// v-html 将变量渲染为html
// v-text 将变量渲染为text文本
// v-for 遍历数组
// v-show 根据一个变量的true或false决定元素是否显示 只是对元素进行 display none 和 block 的设置
// v-if v-else 不符合条件的元素，不在代码里面显示，直接被删除
// v-model 获取输入框的内容
// v-on 绑定点击事件 @
var vm = new Vue({
el: ".app",
data: {
test: '你好我是vue',
url: "http://www.netbian.com/dongman/",
h2html: "<h2>我是h2</h2>",
newsList: [
{ title: '测试新闻1',id: 1 },
{ title: '测试新闻2',id: 2 },
{ title: '测试新闻3',id: 3 },
{ title: '测试新闻4',id: 4 },
{ title: '测试新闻5',id: 5 }
],
isShow: false,
vipLeave: 3,
userName: "张三"
},
methods: {
hello(a) {
console.log(a)
console.log(this.userName)
},
test2() {}
}
})
</script>
</html>

93
历届学生/吴欣阳/每天课程/2021-07-16/vue/tabs.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,li {
margin: 0;
padding: 0;
}
.tabs {
width: 300px;
margin: 10% auto;
}
.title {
display: flex;
align-items: center;
height: 45px;
justify-content: space-between;
}
.title .active {
color: red;
}
.tabs_content .c_item {
display: none;
}
.tabs_content .active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<div class="tabs">
<div class="title">
<div @click="changeTitle(i)" class="tabs_title"
:class="i == currentIndex ? 'active': '' "
v-for="(v,i) in tab">{{ v.title }}</div>
</div>
<div class="tabs_content">
<div class="c_item" :class="i == currentIndex ? 'active' : '' " v-for="(v, i) in tab">
<p v-for="item in v.content">{{ item.content }}</p>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tab: [
{
title: '社会',
content: [
{ content: '社会的内容1' },
{ content: '社会的内容2' },
{ content: '社会的内容3' },
]
},
{
title: '军事',
content: [
{ content: '军事的内容1' },
{ content: '军事的内容2' },
{ content: '军事的内容3' },
]
},
{
title: '财经',
content: [
{ content: '财经的内容1' },
{ content: '财经的内容2' },
{ content: '财经的内容3' },
]
}
]
},
methods: {
changeTitle(i) {
this.currentIndex = i
console.log(i)
}
}
})
</script>
</html>

35
历届学生/吴欣阳/每天课程/2021-07-16/vue/笔记.txt Normal file
View File

@@ -0,0 +1,35 @@
vue：mvvm框架
m（model）v（view）vm（modelview）
model 数据 ajax 数据
view 页面
vm：数据和页面
m（model）v（view）c（controller）
model：数据（数据库）
view：页面
controller：控制器
vue
版本变化
vue 2.x
vue 3.x
语法变化：
1：option api 60%
2：class api 10%
3：commposition api 30%
1: 组件基础 https://cn.vuejs.org/v2/guide/components.html
2：prop https://cn.vuejs.org/v2/guide/components-props.html
3：插槽 https://cn.vuejs.org/v2/guide/components-slots.html
4：过渡动画 https://cn.vuejs.org/v2/guide/transitions.html
5：路由：https://router.vuejs.org/zh/guide/
6：混入：https://cn.vuejs.org/v2/guide/mixins.html
7：自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html
8：过滤器 https://cn.vuejs.org/v2/guide/filters.html