From e02720c3cbf8d7b9b83352d93b2355972ed28c56 Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Sun, 20 Jun 2021 18:04:34 +0800
Subject: [PATCH 1/7] =?UTF-8?q?2021.6.15-=E7=BB=84=E4=BB=B6=E5=9F=BA?=
=?UTF-8?q?=E7=A1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...04\344\273\266\345\237\272\347\241\200.md" | 299 ++++++++++++++++++
.../2021.6.2TestDemo.html" | 84 -----
.../2021.6.3-Component.html" | 54 ++--
.../shopping.html" | 118 -------
4 files changed, 334 insertions(+), 221 deletions(-)
create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.6.15-\347\273\204\344\273\266\345\237\272\347\241\200.md"
delete mode 100644 "\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html"
delete mode 100644 "\351\273\204\345\255\230\346\235\260/shopping.html"
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.15-\347\273\204\344\273\266\345\237\272\347\241\200.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.15-\347\273\204\344\273\266\345\237\272\347\241\200.md"
new file mode 100644
index 0000000..1302185
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.15-\347\273\204\344\273\266\345\237\272\347\241\200.md"
@@ -0,0 +1,299 @@
+# 2021.6.15
+
+## 初识组件
+什么是组件呢,我们人会把一件很困难的事情划分成几个步骤一步步完成,当每个步骤完成的时候那么这件很困难的事情也就完成了。而组件也就是这个思想,就比如说我们通常做一个页面比较困难,我们就把这一个页面当做是一件难事,我们就可以把页面划分成好几个块,这个块就是我们的组件,如果说我们在好几块中其中一块又出现一些比较难解决的问题,我们还可以把他们划分成几个小块,这样一步一步划分一些,组合起来就像一颗倒过来的树,所以我们可以叫他为组件树(vue官网可查看)。当我们把这些一块块的组件都完成后,拼接起来就变成了一个完整的页面,这一件困难的事也就解决了。
+
+## 如何使用组件
+
+1. 创建组件构造器
+```
+const myComponent = Vue.extend({
+ template:`
+
+ `
+})
+```
+2. 注册组件
+```
+// component 注册组关键字,并且是全局注册 自定义组件名:因为html不区分大小写,组件名全部小写不容易错
+Vue.component('自定义的组件名',创建的组件构造器(是一个对象))
+
+Vue.component('my-component',myComponent)
+```
+3. 使用组件
+```
+
+
+
+
+let app = new Vue({
+ el:'#app'
+})
+```
+
+## 组件模板分离
+
+因为我们在注册组件的时候会有一堆的html写在template属性内,所有就有了组件模板抽离的方法让代码更简洁,有两种写法。
+
+1. x-template
+```
+
+
+const myComponent = Vue.extend({
+ template = '#myText'
+})
+```
+2. template
+```
+
+
+
+
+const myComponent = Vue.extend({
+ template = '#myText'
+})
+```
+
+## 语法糖写法(语法糖？算吗？没深究)
+
+注册组件已经不需要先创建组件构造器了,而是在注册组件中一步完成了,就可以简写代码,但是本质上它还是调用了 Vue.extend()。
+
+```
+Vue.component('my-component',{
+ template:`
+
+ `
+})
+```
+等于
+```
+const myComponent = Vue.extend({
+ template:`
+
+ `
+})
+
+Vue.component('my-component',myComponent)
+```
+
+
+## 全局组件与局部组件
+
+```
+const cpnC = Vue.extend({
+ template: `
+
+ `
+})
+// 全局注册
+Vue.component('my-cpn1',cpnC)
+
+// 局部注册
+let app = new Vue({
+ el:'#app',
+ components:{
+ cnp:cpnC
+ }
+})
+```
+演示
+```
+
+ // 全局注册组件
+ // 渲染
+ // 局部注册组件
+ // 渲染
+
+
+// 全局注册组件
+ // 不渲染
+// 局部注册组件
+ // 不渲染
+
+
+ // 全局注册组件
+ // 渲染
+ // 局部注册组件
+ // 不渲染
+
+```
+这就是全局注册与局部注册的区别,全局注册组件可以在每个实例中使用,而局部注册组件只能在注册的实例中使用,不过我们一般都是使用局部注册。如果他们在实例外使用,浏览器只会把他们当成普通的标签元素,不管是局部组件还是全局组件。
+
+
+## 父组件与子组件
+
+```
+ // 子组件
+ const cpnC2 = Vue.extend({
+ template: `
+
+ `
+ })
+ // 父组件
+ const cpnC1 = Vue.extend({
+ template: `
+
+ `,
+ components: { // 局部注册
+ cpn: cpnC2
+ }
+ })
+
+ // 根实例
+ let app = new Vue({
+ el: '#app',
+ components: { // 局部注册
+ cpn1: cpnC1
+ }
+ })
+```
+演示
+```
+
+
+
+```
+
+## 父子组件通信
+
+1. 父传子 props
+```
+
+ // 如果要是用父组件的数据,需要使用v-bind进行值绑定,而这个值就是我们在子组件中props属性中定义的变量cmessage,我们要用到父组件中的值就可以这个变量进行值绑定,就可以使用到父组件中的值了。
+
+
+
+Vue.component('my-p', {
+ props: ['cmessage'], // 定义变量
+ template: `
+
+ `
+})
+let app = new Vue({
+ el: '#app',
+ data: {
+ message: '这里是内容'
+ }
+})
+
+```
+
+2. 子传父 $emit
+$emit('参数1:自定义事件名称','参数2:传递的参数')
+```
+ let mycounter = {
+ template: '#temp',
+ data() {
+ return {
+ counter: 0
+ }
+ },
+ methods: {
+ add() {
+ this.counter++;
+ this.$emit('btnadd', this.counter)
+ },
+ d() {
+ this.counter--;
+ this.$emit('btndelete', this.counter)
+ }
+ }
+ }
+ let app = new Vue({
+ el: '#app',
+ data: {
+ message: '这里是内容',
+ total: 0
+ },
+ components: {
+ mycounter
+ },
+ methods: {
+ changeTotal(counter){
+ this.total = counter
+ }
+ }
+ })
+```
+使用
+```
+
+ //btnadd btndelete 分别代表子组件中$emit中自定义事件名称,btnClick表示的是父组件中定义的方法。在事件中@click="xxx"不传递参数默认为event参数,而自定义事件默认不传就是我们自定义事件传递的参数
+
{{total}}
+
+```
+
+
+## prop 验证
+prop 可以传入一个对象,对象中可以有多个属性,对象属性中可以有多个选项,可以用来定义这个属性的的默认值、类型限制、必填选项
+
+```
+Vue.component("example", {
+ props: {
+ // 基础类型检测, null意味着任何类型都行
+ propA: Number,
+ // 多种类型
+ propB: [String, Number],
+ // 必传且是String
+ propC: {
+ type: String,
+ required: true
+ },
+ // 数字有默认值
+ propD: {
+ type: Number,
+ default: 101
+ },
+ // 对象、默认值是一个工厂函数返回对象
+ propE: {
+ type: Object,
+ default: function() {
+ console.log("propE default invoked.");
+ return { message: "I am from propE." };
+ }
+ },
+ // 数组、默认值是一个工厂函数返回数组
+ propF: {
+ type: Array,
+ default: function() {
+ return ["a","b"];
+ }
+ },
+ // 自定义验证函数
+ propG: {
+ isValid: function(value) {
+ return value > 100;
+ }
+ }
+ }
+});
+```
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html" "b/\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html"
deleted file mode 100644
index eba26a4..0000000
--- "a/\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html"
+++ /dev/null
@@ -1,84 +0,0 @@
-
-
-
-
-
-
- 课堂练习
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.3-Component.html" "b/\351\273\204\345\255\230\346\235\260/2021.6.3-Component.html"
index 0d39517..0066686 100644
--- "a/\351\273\204\345\255\230\346\235\260/2021.6.3-Component.html"
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.3-Component.html"
@@ -9,34 +9,50 @@
+
+
+
-
-
-
+
+
+
+
+
diff --git "a/\351\273\204\345\255\230\346\235\260/shopping.html" "b/\351\273\204\345\255\230\346\235\260/shopping.html"
deleted file mode 100644
index ef2b408..0000000
--- "a/\351\273\204\345\255\230\346\235\260/shopping.html"
+++ /dev/null
@@ -1,118 +0,0 @@
-
-
-
-
-
-
- 购物车列表
-
-
-
-
-
-
-
-
全选
-
总价: {{totalPrice}}
-
{{ checked }}
-
购物车为空
-
+ // 这两个组件是vue-router全局注册的组件
+ 去登录 // 会被渲染成a标签
+ // 决定组件显示的位置
+
+
+```
+
+
+## 安装
+如果你觉得手动安装路由太麻烦,你可以使用以下面的命令
+```
+vue add router
+```
+它会自动帮你编写好上面我们写好的代码,并且引用与挂载好,你只要配置映射关系就可以了。
\ No newline at end of file
--
Gitee
From 8810075545d792bc778f2ca4176471a1ecdd25c6 Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Mon, 21 Jun 2021 21:49:13 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../2021.6.20-\350\267\257\347\224\261.md" | 161 ++++++++++++++++++
1 file changed, 161 insertions(+)
create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.6.20-\350\267\257\347\224\261.md"
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.20-\350\267\257\347\224\261.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.20-\350\267\257\347\224\261.md"
new file mode 100644
index 0000000..a4e5abd
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.20-\350\267\257\347\224\261.md"
@@ -0,0 +1,161 @@
+# 2021.6.20
+
+## 标签属性
+1. to: 指定跳转的路由
+```
+登录
+```
+2. tag: 指定路由渲染成什么组价
+```
+登录 // 以按钮的样子渲染出来,不指定最终会是一个a标签
+```
+3. replace 使用replace属性不会留下浏览器的history记录
+```
+登录匹配成功时，会自动给这个组件添加上router-link-active 属性,active-class可以给这个属性重新命名
+```
+登录
+```
+或者在路由对象实例中添加linkActiveClass属性设置
+```
+const router = new VueRouter({
+ linkActiveClass:'active'
+})
+```
+
+## 动态路由匹配
+当我们需要一个用户id的时候我们可以使用动态路由匹配,可以在路由实例中这样定义:
+```
+const router = new VueRouter({
+ routes:[
+ {
+ path:'/user/:id'
+ component:User
+ }
+ ]
+})
+```
+可以使用 this.$route.params.id 的范式获取到参数
+
+```
+const router = new VueRouter({
+ routes:[
+ {
+ path:'/user'
+ component:User
+ }
+ ]
+})
+```
+如果你是用的是/uesr?id=xxx的形式传递参数的话,你的路由就不要/:id,正常定义路由就可以了,然后你需要使用 this.$route.query.id 的方式进行获取参数
+
+## 嵌套路由
+在配置路由下还可以有个chidren属性,它跟routes属性拥有一样的选项,在需要嵌套路由时使用,如:
+```
+const router = new VueRouter({
+ routes:[
+ {
+ path:'/user',
+ component:User,
+ children:[
+ {
+ path:'email',
+ component:Email
+ }
+ ]
+ }
+ ]
+})
+```
+注:在子路由中path路经可以不写,除非你需要在这个路径下在嵌套一层路由,/表示根路径
+
+## 编程式导航
+在实现路由切换的时候我们,使用的是的方式进行路由的切换,我们还可以使用代码的方式进行路由的切换。
+
+ = router.psuh()
+```
+// 可以传入一个路径字符串
+router.push('home')
+
+// 可以传入一个对象 path对象: 指定的路径
+router.push({ path: 'home' })
+
+// 动态传递参数 /user/:id 形式定义路由 需要给路由一个命名
+router.push({ name: 'user', params: { userId: '123' } })
+
+// 动态传递参数 /user 形式定义路由 可直接使用path指定路径
+router.push({ path: 'register', query: { plan: 'private' } })
+```
+注：
+```
+const userId = '123'
+router.push({ name: 'user', params: { userId } }) // -> /user/123
+router.push({ path: `/user/${userId}` }) // -> /user/123
+
+// 这样匹配不到路由
+router.push({ path: '/user', params: { userId } }) // -> /user
+```
+注: 在中也可以使用该写法。
+
+## 命令路线
+命令路线就是给当前配置好的路由给一个name属性
+```
+const router = new VueRouter({
+ routes:[
+ {
+ path:'/user',
+ name:'user',
+ component:User
+ }
+ ]
+})
+```
+## 命令视图
+ 用来设置当前路由组件的位置,它有一个name属性,可是设置如果有多个组件时,显示的是哪个组件。
+如:
+```
+const router = new VueRouter({
+ routes: [
+ {
+ path: '/user',
+ components: {
+ email:Email
+ profile:Profile
+ }
+ }
+ ]
+})
+```
+当你在路由中配置了多个组件你就是使用视图中的name属性来设置它显示哪个组件,name="组件属性名"
+```
+
+
+ // 显示Email组件内容
+ // 显示Profile组件内容
+
+
+```
+
+## 重定向和别名
+1. 重定向 redirect属性用于路由的重新指向
+```
+const router = new VueRouter({
+ routes: [
+ { path: '/a', redirect: '/b' }
+ ]
+})
+```
+
+2. 别名 alias属性用于设置路由的别名,当你写入别名时,也可以访问path设置的路径
+```
+const router = new VueRouter({
+ routes: [
+ { path: '/a', alias: '/b' }
+ ]
+})
+```
+
+
--
Gitee
From 064923475124faf5be76d7ba8a20b8280105e92c Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Tue, 22 Jun 2021 21:24:01 +0800
Subject: [PATCH 7/7] =?UTF-8?q?2021.6.22-dotnet=E5=91=BD=E4=BB=A4=E5=88=9B?=
=?UTF-8?q?=E5=BB=BAwebapi=E9=A1=B9=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...\273\272webapi\351\241\271\347\233\256.md" | 34 +++++++++++++++++++
1 file changed, 34 insertions(+)
create mode 100644 "\351\273\204\345\255\230\346\235\260/WebAPi/2021.6.22-\344\275\277\347\224\250dotnet\345\221\275\344\273\244\345\210\233\345\273\272webapi\351\241\271\347\233\256.md"
diff --git "a/\351\273\204\345\255\230\346\235\260/WebAPi/2021.6.22-\344\275\277\347\224\250dotnet\345\221\275\344\273\244\345\210\233\345\273\272webapi\351\241\271\347\233\256.md" "b/\351\273\204\345\255\230\346\235\260/WebAPi/2021.6.22-\344\275\277\347\224\250dotnet\345\221\275\344\273\244\345\210\233\345\273\272webapi\351\241\271\347\233\256.md"
new file mode 100644
index 0000000..4ee708e
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/WebAPi/2021.6.22-\344\275\277\347\224\250dotnet\345\221\275\344\273\244\345\210\233\345\273\272webapi\351\241\271\347\233\256.md"
@@ -0,0 +1,34 @@
+# 2021.6.22
+
+## 使用dotnet创建webapi项目
+
+```
+dotnet new 创建命令
+-n|-name 设置创建目录/文件 的名称
+add 将包或引用添加到 .NET 项目。
+sln 修改 Visual Studio 解决方案文件
+classlib 表示类库的模板
+--no-https 取消https协议
+```
+
++ 创建webapi项目
+```
+dotnet new webapi "Dream.webapi" //
+```
++ 创建解决方案,需要跟webapi项目同级。
+```
+dotnet new sln -n Drem
+```
++ 创建类库
+```
+dotnet new classlib -n Dream.Entity
+```
++ 将项目与类库添加到解决方案中,需要指定添加到哪个解决方案
+```
+dotnet sln Dream.sln add Dream.webapi
+dotnet sln Dream.sln add Dream.Entity
+```
++ 运行项目
+```
+dotnet run
+```
\ No newline at end of file
--
Gitee