From 423cc16c3c9e419c0c1fc055148a0ec50b8c3d70 Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Tue, 8 Jun 2021 22:09:13 +0800 Subject: [PATCH 01/10] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9F=BA=E7=A1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-06-08-vue.md" | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-08-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-08-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-08-vue.md" new file mode 100644 index 0000000..1f3d3ff --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-08-vue.md" @@ -0,0 +1,74 @@ +# 组件基础 + + +### 组件的基本用法 + +组件和创建Vue实例类似，需要先注册后才能使用，Vue组件注册方式分为全局注册和局部注册，全局注册的组件在任何使用Vue的地方均可使用，局部注册的组件只能在实例作用于范围内使用。 + ++ 全局注册： +``` +Vue.component('my-component', { + template : '
这是组件中的内容
' +}); +``` + + 或者使用局部注册： + +``` +var myTemplateContent = { + template : '
这是组件中的内容
' +}; + +new Vue({ + el : '#app', + components : { + 'my-component' : this.myTemplateContent + } +}); +``` + +使用组件： +``` +
+ +
+ +``` + ++ 组件自定义标签名使用全小写加-符号的格式（如上例中的my-component） + ++ 组件template中的DOM结构必须仅被一个元素包围，例如上面的template : '
这是组件中的内容
'如果写成template : '这是组件中的内容'或者写成template : '
这是组件中的内容
这是组件另一个的内容
'会无法渲染或者渲染不全。 ++ 自定义的组件标签在有些时候使用会受到限制，例如:如果直接在标签中使用标签是无效的，解决方法是使用is属性来挂载组件： +``` + +
+
+ +
+ +``` + +1. 组件是可复用的 Vue 实例，所以它们与 new Vue 接受同样的选项，例如：data, computed, watch, methods 以及生命周期钩子。仅有的例外是 el 这样的根实例特有的选项。 + + + +2. 一个组件的 data 选项必须是一个函数。因此每个实例可以维护一份被返回对象的独立的拷贝。 +``` +// 定义一个名为 button-counter 的新组件 +Vue.component('button-counter', { + data: function () { + return { + count: 0 + } + }, + template: '' +}) +``` +3. 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的： +``` +Vue.component('my-component-name', { + // ... options ... +}) +``` +通常一个应用会以一棵嵌套的组件树的形式来组织。全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。 + -- Gitee From d2be84aee3d57450f25f634c15be94ed973c93dd Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Wed, 9 Jun 2021 15:49:55 +0800 Subject: [PATCH 02/10] =?UTF-8?q?=E6=8F=92=E6=A7=BD=E5=92=8C=E5=AE=89?= =?UTF-8?q?=E8=A3=85vue=20cli?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-06-09-vue.md" | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-09-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-09-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-09-vue.md" new file mode 100644 index 0000000..90840b6 --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-09-vue.md" @@ -0,0 +1,50 @@ +# vue课堂笔记 + + +### 插槽 + ++ 插槽就是子组件中的提供给父组件使用的一个占位符，用` `表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的``标签。 + ++ Vue 实现了一套内容分发的 API，将``元素作为承载分发内容的出口，这是vue文档上的说明。具体来说，slot就是可以让你在组件内添加内容的‘空间’。举个例子： + +``` +//子组件 ： (假设名为：ebutton) + + +//父组件：（引用子组件 ebutton） + +``` + + ++ 具名插槽 （子组件 多个` `对应插入内容） +有时候，也许子组件内的slot不止一个，那么我们如何在父组件中，精确的在想要的位置，插入对应的内容呢？ 给插槽命一个名即可，即添加name属性。 +``` +//子组件 ： (假设名为：ebutton) + +``` + +1. 安装cnpm +``` +npm i -g cnpm --registry=https://registry.npm.taobao.org +``` +2. 然后就可以cnpm安装依赖包了 +``` +cnpm i -g vue @vue/cli +``` +3. cnpm config ls 查看 + -- Gitee From 49923275d816cc8a6ecc0120513dfc6c37748d0e Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Fri, 11 Jun 2021 11:16:52 +0800 Subject: [PATCH 03/10] =?UTF-8?q?=E4=BD=BF=E7=94=A8vue=E8=84=9A=E6=89=8B?= =?UTF-8?q?=E6=9E=B6=E4=BB=A5=E5=8F=8A=E9=83=A8=E7=BD=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-06-11-vue.md" | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-11-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-11-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-11-vue.md" new file mode 100644 index 0000000..fc5f44b --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-11-vue.md" @@ -0,0 +1,33 @@ +# 课堂笔记 + +安装vue脚手架 + +第一步 +安装yarn +``` +npm i -g yarn +``` +第二步 + +``` + npm install -g cnpm --registry=https://registry.npm.taobao.org + + ``` + + 第三步 + + ``` +yarn global add @vue/cli + ``` + + 第四步 + +创建文件夹，然后运行文件 + +第五步 + +部署到服务器 + + + + -- Gitee From 574c72097bd41f3eecadcea46291d987dd4fb83f Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Fri, 11 Jun 2021 11:28:14 +0800 Subject: [PATCH 04/10] =?UTF-8?q?cnpm=E7=9A=84=E4=BD=BF=E7=94=A8=E5=9D=8F?= =?UTF-8?q?=E5=A4=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...44\275\277\347\224\250\345\235\217\345\244\204.md" | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/cnpm\347\232\204\344\275\277\347\224\250\345\235\217\345\244\204.md" diff --git "a/\346\270\270\346\265\267\346\236\227/cnpm\347\232\204\344\275\277\347\224\250\345\235\217\345\244\204.md" "b/\346\270\270\346\265\267\346\236\227/cnpm\347\232\204\344\275\277\347\224\250\345\235\217\345\244\204.md" new file mode 100644 index 0000000..4ebf6cc --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/cnpm\347\232\204\344\275\277\347\224\250\345\235\217\345\244\204.md" @@ -0,0 +1,11 @@ +相信你们看到很多前端工程项目都存在一个 package-lock.json 的文件。就是跟它有关系。（关于 package-lock.json 的作用可以看这篇文章。） +``` +cnpm i不受 package-lock.json 影响，只会根据 package.json 进行下载安装。 +cnpm i xxx@xxx不会跟新到 package-lock.json 中去。 +npm i xxx@xxx 会跟新到 package-lock.json 中去。 +在多人共同协作维护的项目中，package-lock.json 是必不可少的，是为了确保不同开发者安装的包及其依赖保持一致，同时也是降低不同版本 npm 包给项目稳定性带来的影响。（尤其是一些不遵循语义化版本控制的第三方 npm 包，就很容易被坑到。） + +``` + + + -- Gitee From 7fe8e7f5ba2cff25bde565c39f257d8cc5f27b4d Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Sat, 12 Jun 2021 15:59:41 +0800 Subject: [PATCH 05/10] =?UTF-8?q?=E5=8D=95=E6=96=87=E4=BB=B6=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-06-12-vue.md" | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-12-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-12-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-12-vue.md" new file mode 100644 index 0000000..8ca000c --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-12-vue.md" @@ -0,0 +1,35 @@ +# 单文件组件 + +在很多Vue项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。 + +全局定义(Global definitions) 强制要求每个 component 中的命名不得重复 + +字符串模板(String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \ + +不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏 + +没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel + + +vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立                                的组件，所以成为单文件组件； +vue文件结构： + +由于.vue封装了html、js、css的代码，所以它由以下几部分组成； +``` + + + + + + +vue-loader： + +``` + + +如果使用.vue文件，需要使用指定加载器，否则浏览器是不能解析的。加载.vue文件的加载器是 vue-loader； +同理，一个项目中还需要html、css等，所以也要用到其对应的加载器 例：html-loader、css-loader… +vue-loader是基于webpack的，要在webpack中进行配置，所以还要配置webpack； +webpack： + +javaScript应用的静态模块打包器；把前端各种资源作为模块处理、使用、打包； -- Gitee From 08a3f323637c4ba523117422a939175ca3c95321 Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Tue, 15 Jun 2021 11:19:39 +0800 Subject: [PATCH 06/10] =?UTF-8?q?vue=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-06-15-vue.md" | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-15-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-15-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-15-vue.md" new file mode 100644 index 0000000..843f5e3 --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-15-vue.md" @@ -0,0 +1,23 @@ +# vue路由 + + +1. 定义路由时 + +名字要用router,否则的话要在new vue({名字：router}) + +2. 必须要注册路由 +``` +Vue.use(VueRouter) +``` + +3. mode + ++ monde:'history':这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id + +4. vue.config.productiontip = false + +设置为 false 以阻止 vue 在启动时生成生产提示。 + + + + -- Gitee From bf15b54ec1d3ef110af9e2a21276d8ffb2ca6049 Mon Sep 17 00:00:00 2001 From: "2232705454@qq.com" <2232705454@qq.com> Date: Wed, 16 Jun 2021 15:55:36 +0800 Subject: [PATCH 07/10] =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E5=92=8C=E9=95=B6=E5=B5=8C=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-06-16-vue.md" | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-16-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-16-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-16-vue.md" new file mode 100644 index 0000000..737319c --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-16-vue.md" @@ -0,0 +1,79 @@ +# 动态路由和镶嵌路由 + +### 动态路由 + +1. 在vue项目中，使用vue-router如果进行不传递参数的路由模式，则称为静态路由；如果能够传递参数，对应的路由数量是不确定的，此时的路由称为动态路由。动态路由，是以冒号为开头的(:)，例子如下： +``` +export default new Router({ + routes: [ + { + path: '/', + name: 'HelloWorld', + component: HelloWorld + }, { + path: '/RouterComponents/:id', + name: 'RouterComponents', + component: RouterComponents + } + ] +}) +``` +2. 路由跳转，执行方式有两大类； +第一大类：router-link模式，直接把参数写在to属性里面： +``` +跳转 +``` +第二大类：$router.push()模式，代码如下： + +``` +methods: { + changeFuc (val) { + this.$router.push({ + name: 'RouterComponents', + params: {id: val} + }) + } +} +``` +或者： +``` +methods: { + changeFuc (val) { + this.$router.push({ + path: `/RouterComponents/${val}`, + }) + } +} + +``` + +### 嵌套路由 + +vue项目中，界面通常由多个嵌套的组件构成；同理，URL中的动态路由也可以按照某种结构对应嵌套的各层组件： +``` +export default new Router({ + routes: [ + { + path: '/', // 根路由 + name: 'HelloWorld', + component: HelloWorld + }, { + path: '/RouterComponents/:id', + component: RouterComponents, + children: [ + { + path: '', // 默认路由 + name: 'ComponentA', // 当匹配上RouterComponents后，默认展示在中 + component: ComponentA + }, + { + path: '/ComponentB', + name: 'ComponentB', + component: ComponentB + }, + ] + } + ] +}) + +``` \ No newline at end of file -- Gitee From 50e231932459d4cb23a54e153f48745af0ef74a4 Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Fri, 18 Jun 2021 10:04:56 +0800 Subject: [PATCH 08/10] =?UTF-8?q?=E7=BC=96=E7=A8=8B=E5=BC=8F=E5=AF=BC?= =?UTF-8?q?=E8=88=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-06-18-vue.md" | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-18-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-18-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-18-vue.md" new file mode 100644 index 0000000..82186b9 --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-18-vue.md" @@ -0,0 +1,51 @@ +# vue编程式的导航 + + + +``` + +除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 + +router.push(location) + + 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 + + 当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(...)。 + + 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如： + + + // 字符串 + router.push('home') + + // 对象 + router.push({ path: 'home' }) + + // 命名的路由 + router.push({ name: 'user', params: { userId: 123 }}) + + // 带查询参数，变成 /register?plan=private + router.push({ path: 'register', query: { plan: 'private' }}) + +router.replace(location) + 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 + +router.go(n) + 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。 + + + // 在浏览器记录中前进一步，等同于 history.forward() + router.go(1) + + // 后退一步记录，等同于 history.back() + router.go(-1) + + // 前进 3 步记录 + router.go(3) + + // 如果 history 记录不够用，那就默默地失败呗 + router.go(-100) + router.go(100) + + + ``` -- Gitee From e216058d0bee9097c68ffc6f2717b4c89fea573e Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Sat, 19 Jun 2021 17:43:40 +0800 Subject: [PATCH 09/10] adf --- .../2021-06-19-vue.md" | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-19-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-19-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-19-vue.md" new file mode 100644 index 0000000..7bae246 --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-19-vue.md" @@ -0,0 +1,31 @@ +# 路由 + +### 命名路由 + +命名路由就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果： +``` +User +``` +等同于 +``` +router.push({ name: 'user', params: { userId: 123 }}) +``` + +### 命名视图 + +1. 有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。 + +``` + + + +const router = new VueRouter({ + routes: [ + { + path: '/', + components: { default: Foo, a: Bar, b: Baz } + } + ] +}) +``` + -- Gitee From f13516fc550d268b1e8e8916efd32987c9879bb5 Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Tue, 22 Jun 2021 10:24:28 +0800 Subject: [PATCH 10/10] =?UTF-8?q?=E5=88=9B=E5=BB=BAwebapi=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E7=9A=84=E4=B8=80=E4=BA=9B=E5=91=BD=E4=BB=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-06-22-vue.md" | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-22-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-22-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-22-vue.md" new file mode 100644 index 0000000..94d6490 --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-22-vue.md" @@ -0,0 +1,57 @@ +# web api创建项目 + +1. 创建.net core解决方案 +``` +//名称Dream + dotnet new sln -o Dream +``` + +2. 进入解决方案 + +``` +cd Dream + +查看文件 +ls + +``` +3. 创建webApi项目 +``` +//webapi表示创建项目时选择模板的类型 +//--no-https表示不启用https +dotnet new webapi --no-https -o Dream.WebApi +``` + +4. 创建类库项目 +``` +//Dream.Entity和Dream.Service是类库名称 +//classlib表示类库模板 + dotnet new classlib -o Dream.Entity + dotnet new classlib -o Dream.Service +``` + +5. 将项目添加至解决方案 +``` + dotnet sln Dream.sln add Dream.WebApi/Dream.WebApi.csproj Dream.Entity/Dream.Entity.csproj Dream.Service/Dream.Service.csproj +``` + +6. 目前项目基本创建好，但是我们实际当中还涉及到项目之间的引用，这里我们的 “Dream.Service”项目需要引用“Dream.Entity”项目，“Dream.WebApi”项目需要引用“Dream.Entity”和“ Dream.Entity ”两个项目，我们接着继续进行项目之间的引用操作，命令如下，命令当中“ reference ”参数就是起引用作用 +``` + +> dotnet add Dream.Service/Dream.Service.csproj reference Dream.Entity/Dream.Entity.csproj +> dotnet add Dream.WebApi/Dream.WebApi.csproj reference Dream.Service/Dream.Service.csproj Dream.Entity/Dream.Entity.csproj + +``` + +7. 引用NuGet软件包到项目中 +``` +//package参数是引用NuGet包的作用 + dotnet add Dream.WebApi/Dream.WebApi.csproj package Newtonsoft.Json +``` + +8. 运行项目 + +``` +//-p是指要运行的项目 + dotnet run -p Dream.WebApi/Dream.WebApi.csproj +``` \ No newline at end of file -- Gitee