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 0000000000000000000000000000000000000000..1302185e784ba969b131617fabe862fdd6fff263 --- /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: ` +
+

我是标题2

+

我是内容,嘿嘿嘿嘿

+
+ ` + }) + // 父组件 + const cpnC1 = Vue.extend({ + template: ` +
+

我是标题1

+

我是内容,哈哈哈哈哈

+ +
+ `, + 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: ` +
+

{{cmessage}}

// 使用值 +
+ ` +}) +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.16-\345\211\215\345\220\216\347\253\257\346\270\262\346\237\223\344\270\216\345\211\215\345\220\216\347\253\257\350\267\257\347\224\261.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.16-\345\211\215\345\220\216\347\253\257\346\270\262\346\237\223\344\270\216\345\211\215\345\220\216\347\253\257\350\267\257\347\224\261.md" new file mode 100644 index 0000000000000000000000000000000000000000..eafd77bc5c48a2dffd39e2f2b25e5530c1a6a2e7 --- /dev/null +++ "b/\351\273\204\345\255\230\346\235\260/2021.6.16-\345\211\215\345\220\216\347\253\257\346\270\262\346\237\223\344\270\216\345\211\215\345\220\216\347\253\257\350\267\257\347\224\261.md" @@ -0,0 +1,24 @@ +# 2021.6.16 + + +## 一.后端路由阶段 +#### 后端渲染 +jsp: java serve page + +后端渲染就是在服务端从数据库中获取到了数据并且把数据编写到html中然后在把完整的html返回给客服端,然后客户端就只要把页面显示就好了。这就是我理解的后端渲染。 + +#### 后端路由 +后端处理url和页面之间的映射关系的路由就叫后端路由。每个url对应着一个页面,并且这个页面是从后端已经渲染好的然后打包返回。每次请求都会刷新页面。 + + +## 二.前后端分离阶段 +后端只负责提供数据,不负责任何阶段的内容。 + +### 前端渲染 +通过ajax/axios请求进行,从后端获取数据库然后返回前端,然后在浏览器处理前端编写的js、jq代码进行动态渲染页面 + +## 三、SPA页面(单页面富应用) Single page web application +整个页面只有一个html页面 + +#### 前端路由 +后端返回整个页面全部的数据,每个url对应的是一个页面的数据,每当你点击一个按钮时,都会请求一个url,这个url,会从页面的全部数据中去查找当前url中的数据,然后渲染页面,返回最终的页面。只会请求一次数据,之后每次url请求都不会刷新页面。 \ No newline at end of file diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.18-html\347\232\204history\346\250\241\345\274\217.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.18-html\347\232\204history\346\250\241\345\274\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..ce5d19b712f7f695b8926d44582817af44c7329e --- /dev/null +++ "b/\351\273\204\345\255\230\346\235\260/2021.6.18-html\347\232\204history\346\250\241\345\274\217.md" @@ -0,0 +1,88 @@ +# 2021.6.18 + +## 路由模式 mode + +### URL的hash ++ URL的hash也就是锚点(#),本质上是改变window.location的href属性。 ++ 可以通过直接赋值location.hash来改变href,但是页面不会刷新。 ++ href hyper(超级) reference (引用) 超链接 +``` +改变前url: http://127.0.0.1:8080/user + +执行代码: location.hash = '/profile' + +改变后url: http://127.0.0.1:8080/profile +``` +你可以按f12查看资源加载,并没有出现资源的加载,这说明页面并没有刷新。 + ++ hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分） ++ "#" 代表网页中的一个位置。其右面的字符，就是该位置的标识符 +比如: +``` +url: http://127.0.0.1:8080/#/user +``` +浏览器就会读取#后的字符串,就如: +``` + +``` + +### HTML的history模式 (不会刷新页面) +1. pushState({data},'title','url') 添加,压入栈中 +``` +改变前url: http://127.0.0.1:8080/user + +执行代码: history.pushState({},'','/profile') + +改变后url: http://127.0.0.1:8080/profile +``` + +2. replaceState({data},'title','url') 替换 +``` +改变前url: http://127.0.0.1:8080/user + +执行代码: history.replaceState({},'','/profile') + +改变后url: http://127.0.0.1:8080/profile +``` +你会发现,替换了url,但是浏览器并不会有历史记录,你可以看浏览器的前进后退键并没有不能点击都是灰的。 + +3. back() 退后,从栈中弹出 +``` +改变前url: http://127.0.0.1:8080/user + +执行代码: history.pushState({},'','/profile') + +改变后url: http://127.0.0.1:8080/profile + +执行代码: history.back() + +退后后url: http://127.0.0.1:8080/user +``` + +4. forward() 前进,压入栈中 +``` +改变前url: http://127.0.0.1:8080/user + +执行代码: history.pushState({},'','/profile') + +改变后url: http://127.0.0.1:8080/profile + +执行代码: history.back() + +弹出后url: http://127.0.0.1:8080/user + +执行代码: history.forward() + +前进后url: http://127.0.0.1:8080/profile +``` + +5. go() +back()、forward()、go() 这三个方法会根据浏览器的历史记录做出一些事情。 +``` +history.go(-1) 等同于 history.back() +history.go(1) 等同于 history.forward() +``` + + +### URl的abstract模式 +适用于所有JavaScript环境，例如服务器端使用Node.js。如果没有浏览器API，路由器将自动被强制进入此模式。 \ No newline at end of file diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.19-\345\256\211\350\243\205\350\267\257\347\224\261\344\270\216\344\275\277\347\224\250.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.19-\345\256\211\350\243\205\350\267\257\347\224\261\344\270\216\344\275\277\347\224\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..0ba474b929e2a721f60d9db8e453bf868ed74f9b --- /dev/null +++ "b/\351\273\204\345\255\230\346\235\260/2021.6.19-\345\256\211\350\243\205\350\267\257\347\224\261\344\270\216\344\275\277\347\224\250.md" @@ -0,0 +1,62 @@ +# 2021.6.19 + +## 安装 +在当前项目的路径下执行代码安装路由 +``` +npm： +npm insatll vue-router + +yarn: +yarn add vue-router +``` +安装完在package.json问卷中的dependencies出现。 + +注：dependencies是生产模式下需要用到的插件。devDependencies是开发模式下需要用到的插件。 + +## 使用 +先在main.js文件引入插件 +``` +import VueRouter from 'vue-router' +``` +1. 安装插件(注册插件) +``` +Vue.use(VueRouter) +``` +2. 创建路由对象实例 +``` +import Login from './components/Login' +const router = new VueRouter({ + // 配置路由与组件之间的映射关系,一个path对应一个组件 + routes:[ + { + path:'/login' + component:Login + } + ] +}) +``` +3. 在Vue实例中挂载创建的路由对象实例 +``` +new Vue({ + router +}) +``` +4. 使用 +在app.vue中: +``` + +``` + + +## 安装 +如果你觉得手动安装路由太麻烦,你可以使用以下面的命令 +``` +vue add router +``` +它会自动帮你编写好上面我们写好的代码,并且引用与挂载好,你只要配置映射关系就可以了。 \ No newline at end of file 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 0000000000000000000000000000000000000000..a4e5abdb8157c75e63bd6e33574f73966efaad25 --- /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="组件属性名" +``` + +``` + +## 重定向和别名 +1. 重定向 redirect属性用于路由的重新指向 +``` +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: '/b' } + ] +}) +``` + +2. 别名 alias属性用于设置路由的别名,当你写入别名时,也可以访问path设置的路径 +``` +const router = new VueRouter({ + routes: [ + { path: '/a', alias: '/b' } + ] +}) +``` + + 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 eba26a4343f0c4f09cd48ad48e729f09490fb6ff..0000000000000000000000000000000000000000 --- "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 0d39517e4df4af2a867aa03ffa174cf3e811d88e..0066686b86ad5d341f06819c38e5ed4b05db67d1 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/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 0000000000000000000000000000000000000000..4ee708e75566a29b341a6469b792bae716da3f71 --- /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 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 ef2b40886b73d24e49daad1e5114c7a3e56f1196..0000000000000000000000000000000000000000 --- "a/\351\273\204\345\255\230\346\235\260/shopping.html" +++ /dev/null @@ -1,118 +0,0 @@ - - - - - - - 购物车列表 - - - - -
- - - - - - - - - - - - - - - - - - - - - -
    商品名称商品单价购买数量操  作
  {{ index + 1 }} {{ item.name }}{{ item.price }} - - {{ item.count }} - -
-
全选
-
总价: {{totalPrice}}
-
{{ checked }}
- -
- - - - - - \ No newline at end of file