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

97
历届学生/font-end-nine/每天上课/2022-07-09/index.html Normal file
View File

@@ -0,0 +1,97 @@
<!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学习</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2 v-once>{{ text }}</h2>
<div v-text="message"></div>
<ul>
<li v-for="v,i in news" :key="i" @click="enterInfo(v)">{{ i }} | {{ v.title }}</li>
</ul>
<ul>
<li v-for="v,k in obj">{{ k }} | {{ v }}</li>
</ul>
<img :src="imgSrc" :alt="text">
<div v-if=" type == 0 ">未开vip</div>
<div v-else-if=" type == 1 ">普通vip</div>
<div v-else-if=" type == 2 ">超级vip</div>
<div v-else-if=" type == 3 ">至尊vip</div>
<div v-else>请登录</div>
<div v-show="isShow">show true</div>
<input type="text" placeholder="输入用户名" v-model="userName">
<button @click="UserLogin">登 录</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
// m v vm
// vue 指令 就是一些特殊的 html 标签属性
// v-text 没啥用
// v-html 把内容渲染中html结构
// v-for 循环数组 & 对象
// 一定要加 key
// v-bind 帮变量绑定到标签的属性上
// 简写 ：
// v-if 根据条件，来显示隐藏元素（不符合条件的html将被删除）
// v-show
// v-model 一般给输入框使用的，来获取输入框用户输入的值
// v-on
// 简写 @
var vm = new Vue({
el: '.app',
// 所有的变量都定义在data中（数据的）
data: {
text: '我是测试的文字',
message: `<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">`,
news: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
{ id: 4, title: '新闻4' },
],
obj: { id: 1, title: '新闻1' },
imgSrc: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
type: 0,
isShow: true,
userName: ''
},
// 存放所有的方法
methods: {
UserLogin() {
console.log("UserLogin: ", this.userName);
this.test();
},
test() {
console.log("test");
},
enterInfo(v) {
console.log(v);
}
}
})
</script>
</html>

0
历届学生/font-end-nine/每天上课/2022-07-09/item.html Normal file
View File

243
历届学生/font-end-nine/每天上课/2022-07-09/router.html Normal file
View File

@@ -0,0 +1,243 @@
<!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-router 路由管理</title>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<transition name="slide-fade">
<router-view></router-view>
</transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// TODO 嵌套路由 在管理后台的项目里面讲解
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Index = {
data() {
return {
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
{ id: 4, title: '新闻4' },
]
}
},
template: `
<div class="index">
首页
<ul>
<li @click="enterInfo(item)" v-for="item,index in list" :key="index">{{ item.title }}</li>
</ul>
</div>
`,
methods: {
enterInfo(item) {
this.$router.push({
name: 'info',
query: {
id: item.id,
page: 1
}
})
}
}
}
const Bar = { template: '<div>bar</div>' }
const info = {
template: `
<div>详情页面 {{ $route.query.id }}</div>
`,
data() {
return {
// id: 0
}
},
created() {
// this.id = this.$route.query.id
console.log(this.$route.query.id);
},
methods: {
}
}
const login = {
template: `
<div @click="login">登录页面</div>
`,
data() {
return {
// id: 0
}
},
methods: {
login() {
//
localStorage.setItem("token", "11111")
if(this.$route.query.hasOwnProperty("to")) {
this.$router.push({
path: this.$route.query.to
})
} else {
this.$router.push("/")
}
}
}
}
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{
path: '/',
redirect: '/index',
meta: {
isLogin: false
}
},
{
name: 'index',
path: '/index',
component: Index,
meta: {
isLogin: false
}
},
{
name: 'bar',
path: '/bar',
component: Bar,
meta: {
isLogin: false
}
},
{
name: 'info',
path: '/info',
component: info,
meta: {
isLogin: true
}
},
{
name: 'login',
path: '/login',
component: login,
meta: {
isLogin: false
}
},
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
mode: 'hash',
routes // (缩写) 相当于 routes: routes
})
router.beforeEach((to, from, next) => {
console.log(to);
// 你访问的页面需要登录
if (to.meta.isLogin) {
// 未登录
if (localStorage.getItem("token") == null ) {
next({
name: 'login',
query: {
to: to.fullPath
}
})
} else {
next()
}
} else {
next()
}
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 两种 路由模式
// TODO 路由模式的原理（面试）
// hash
// http://www.a.com/#/about?id=1
// history
// http://www.a.com/about
// vue-router 两种页面跳转方式
// router-link
// 使用js来跳转
// 传参方式：
// query
// http://www.a.com?id=1&page=2
// params
// http://www.a.com/1/2
// this.$route 用来获取路由信息的（地址，参数这些信息）
// this.$router 用来获取路由跳转方法的
// 导航守卫 就是拦路虎
// 一般 实现 登录拦截，权限拦截等功能..
// 全局导航守卫
// 路由配置中的 导航守卫
// 组件内部的 导航守卫
</script>
</html>

111
历届学生/font-end-nine/每天上课/2022-07-09/tab.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>tab</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<div class="app">
<ul class="title">
<li :class=" i == index ? 'active' : '' "
v-for="v,i in arr"
@click="index = i"
:key="i">
{{ v.title }}
</li>
</ul>
<ul class="content">
<li :class=" i == index ? 'active' : '' " v-for="v,i in arr" :key="i">
<p v-for="item,index in v.content">{{ item.text }}</p>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
new Vue({
el: '.app',
data: {
index: 0,
arr: [
{
title: '首页',
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
{ text: '首页的内容4' },
{ text: '首页的内容5' },
]
},
{
title: '社会',
content: [
{ text: '社会 的内容1' },
{ text: '社会 的内容2' },
{ text: '社会 的内容3' },
]
},
{
title: '军事',
content: [
{ text: '军事 的内容1' },
{ text: '军事 的内容2' },
{ text: '军事 的内容3' },
]
},
{
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
]
},
methods: {
change(index) {
this.index = index
}
}
})
</script>
</html>

66
历届学生/font-end-nine/每天上课/2022-07-09/其他.html Normal file
View File

@@ -0,0 +1,66 @@
<!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>
</head>
<body>
<div class="app">
<h2 v-title="test">{{ test | filTest }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
// 混入
// 官方提供的封装方案，可以解决this指向的问题
var more = {
data () {
return {
page: 1,
totalPage: 0
}
},
methods: {
getMore() {
console.log("getMore：", this.test);
}
}
};
new Vue({
el: '.app',
data: {
test: '你好你好你好你好你好你好你好'
},
created() {
console.log(this.page);
this.getMore()
},
mixins: [ more ],
methods: {
},
directives: {
title: {
bind(el,binding) {
document.title = binding.value
console.log("bind: ",el,binding);
},
inserted (el,binding) {
console.log("inserted: ",el,binding);
},
update(el,binding) {
}
}
},
filters: {
filTest(val) {
return val.substring(0,4) + '...'
}
}
})
</script>
</html>

61
历届学生/font-end-nine/每天上课/2022-07-09/生命周期.html Normal file
View File

@@ -0,0 +1,61 @@
<!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生命周期</title>
</head>
<body>
<div class="app">
<h2 ref="test">{{ test }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
// TODO activated 需要说明
var vm = new Vue({
el: '.app',
data: {
test: '你好'
},
// 发送ajax请求
created() {
console.log(this.$refs.test);
// console.log(document.querySelector("h2"));
},
// 也可以发送ajax请求
mounted() {
this.getTest
console.log(this.getHello);
console.log(this.$refs.test);
},
updated() {
console.log("数据更新了");
},
methods: {
getTest() {
console.log("getTest");
}
},
// computed 写法上和 methods 是一样的，
// 会做缓存
computed: {
getHello() {
console.log("getHello");
return 1
}
},
// 使用watch 监听数据的修改，触发一些其他操作
watch: {
test(newVal, oldVal) {
console.log("newVal: ", newVal);
console.log("oldVal: ", oldVal);
}
}
});
</script>
</html>

62
历届学生/font-end-nine/每天上课/2022-07-09/笔记.txt Normal file
View File

@@ -0,0 +1,62 @@
原生 js + jquery
1 原生 js jquery
2 m（model 数据）v（view 视图）c（controller 控制器）
3 m（model 数据 存储的是ajax的返回数据）v（view 视图）vm（view and model）
双向数据绑定
去dom化
angular.js
react.js
vue.js 1.x ~ 2.x 过渡版本 3.x
单页(spa) web应用
单页 : 只有一个html文件，其他页面其实就是 组件，被浏览器运行的时候其实就是 js 对象
vue-router
[
{
path: '/about',
component: aaaa
}
]
www.abc.com/about
php Laravel
vue.js html 引入js
vue.js nodejs
混入
自定义指令
过滤器
组件系统
vue-router
vue-cli vue 脚手架 帮你创建vue项目，运行项目使用的
2.x
vue init webpack test
3.x

102
历届学生/font-end-nine/每天上课/2022-07-09/组件.html Normal file
View File

@@ -0,0 +1,102 @@
<!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>
</head>
<body>
<div class="app">
<v-header @change="getData" :title=" '2' "></v-header>
测试文字
<aaaa></aaaa>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件？？？？
// 以html为核心的代码封装
// 局部组件
//
var aaaa = {
template: `
<div>
<v-header></v-header>
<h3>{{ title }}</h3>
</div>
`,
data() {
return {
title: '公共底部'
}
},
created() {}
}
// 全局组件
// 组件名：组件名其实就是html的标签名称，不可以用默认标签的名字
Vue.component('v-header',{
template: `
<div>
<h2 @click="submit">{{ title }}</h2>
</div>
`,
// props: ['title'],
props: {
title: {
default: "这是默认标题",
type: String
}
},
data() {
return {
list: "这是子组件的数据"
}
},
created() {
console.log("公共的头部 的生命周期：", this);
console.log(this.$parent.$data.text);
},
methods: {
submit() {
this.$emit("change", this.list)
}
},
components: {
aaaa
}
})
// 父组件 ---> 子组件 传数据
// props
// 子组件 ---> 父组件
// $emit 借助事件，把数据抛出去
var vm = new Vue({
el: '.app',
data: {
text: 'jvbjkhbjhbjhbjhb'
},
mounted() {
console.log(this.$children[1]);
},
methods: {
getData(val) {
console.log("父组件收到的数据：", val);
}
},
components: {
// "f": footer
aaaa
}
})
</script>
</html>