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

92
历届学生/18课程/class18/课程/2020-11-11/index.html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img :src="hello | test" alt="">
<lb_header v-title="'首页'">
<template v-slot:selectinput>
<div class="aaaaa">管理后台查询条件的html</div>
</template>
<template v-slot:selectlist>
<div class="tsssssest">dfdddd</div>
</template>
<template v-slot:default="{ list }">
{{ list }}
</template>
</lb_header>
</div>
</body>
<script>
Vue.directive('title', {
inserted: function (el,binding,vnode) {
console.log(el);
console.log(binding.value);
console.log(vnode);
document.title = binding.value
}
});
Vue.component("lb_header", {
data() {
return {
text: '我是lb_header组件传递给父亲的数据',
list: [
1, 2, 3, 4, 5, 6
]
}
},
methods: {
demos() {
}
},
template: `
<h2 @click="demos">
{{ text }}
<div class="right">
<slot name="selectinput">
</slot>
<slot name="selectlist">
</slot>
<slot :list="list"></slot>
</div>
</h2>
`
})
new Vue({
el: '#app',
created() {
},
data: {
hello: '/img/PC_803382a656108089122dc9a79d2729e8.png'
},
methods: {
},
filters: {
test(v) {
return "https://www.baidu.com" + v
}
}
})
</script>
</html>

149
历届学生/18课程/class18/课程/2020-11-11/router.html Normal file
View File

@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">Go to Foo</router-link>
<router-link to="/me">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</body>
<script>
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Home = {
data() {
return {
list: [
{ id: 1, title: 'ssssss1' },
{ id: 2, title: 'ssssss2' },
{ id: 3, title: 'ssssss3' },
]
}
},
methods: {
GotoMe() {
this.$router.push("/me")
// this.$router.push({ name: 'info', params: { id: 1 } })
}
},
template: `
<div>
<p @click="GotoMe">点我跳转</p>
<ul>
<li v-for="item,index in list" :key="index">
<router-link :to="{ name: 'info', params: { id: item.id } }">{{ item.title }}</router-link>
</li>
</ul>
</div>
`
}
const Me = {
template: '<div>bar</div>'
}
const info = {
data() {
return {
}
},
methods: {
},
template: `<div>详情页：{{ this.$route.params.id }}</div>`
}
const Login = () => {
return {
data() {
return {
}
},
methods: {
UserLogin() {
localStorage.setItem("token", '11111')
if (this.$route.query.hasOwnProperty("source")) {
this.$router.push({
path: this.$route.query.source
})
} else {
this.$router.push("/home")
}
}
},
template: `<div @click="UserLogin">登录页面</div>`
}
}
// 2. 定义路由
const routes = [
{ path: '/home', component: Home, meta: { isLogin: false, title: '首页' } },
{ path: '/me', component: Me, meta: { isLogin: true, title: '我的' } },
{ path: '/login', component: Login, meta: { isLogin: false, title: '登录' } },
{ path: '/info/:id', component: info, name: 'info', meta: { isLogin: false, title: '详情页' } },
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
});
router.beforeEach((to, from, next) => {
document.title = to.meta.title
console.log("你要去的页面：", to);
console.log("你离开的页面", from);
// 判断你要访问的页面是否需要登录
if (to.meta.isLogin) {
// 再次判断用户是否已经登录了
// 如果没有登录，那么去登录页面
// 如果已经登录，正常访问页面
// 登录过了
if (localStorage.getItem("token") !== null) {
next()
} else {
next({
path: '/login',
query: {
source: from.path
}
})
}
} else {
next()
}
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
</script>
</html>

30
历届学生/18课程/class18/课程/2020-11-11/笔记.txt Normal file
View File

@@ -0,0 +1,30 @@
SPA 单页web应用
多页
index.html
其他页面的都是：js
作用：
params 传参
$route.params
http://127.0.0.1/home/1/10
name
实际项目中用的时候，打包上线需要后端做支持才可以正常使用
query 传参
$route.query
http://127.0.0.1/home?id=1&page=1
name
npm
https://cli.vuejs.org/zh/
vue-cli 2.x
vue-cli 3.x