diff --git "a/\347\253\240\350\266\205\347\276\244/6-11.md" "b/\347\253\240\350\266\205\347\276\244/6-11.md" new file mode 100644 index 0000000000000000000000000000000000000000..dc854e4846a004b61329f940d8ef2537dbcf282c --- /dev/null +++ "b/\347\253\240\350\266\205\347\276\244/6-11.md" @@ -0,0 +1,38 @@ +DNS解析域名成IP地址 例如很多网址本质上都是访问的是IP地址 只是由于IP地址比较难记忆 所以利用DNS解析将(容易记忆的)域名解析成原来的IP地址再进行访问 localhost 指的是当前本机的IP地址、 +ping 域名 只会返回四次 ping 域名 -t 可以一直返回 + + +1. +``` +yarn config set registry http://registry.npm.taobao.org +yarn global add @vue/cli +cd /var/www ll +vue craete vue.icu +yarn build 打包 +crtl + z 强制终止 返回输入框 +vim /etc/nginx/conf.d/vue.conf 进入到创建的配置文件 进行编辑 + server{ + listen 80; + server_name vue.icu; + + location / { + root /var/www/vue.icu; + index index.html; + } + } +esc 保存 :wq! 保存并推出 + +nginx -t 重启 nginx -s reload + +之后进入 /C/Windows/System32/drivers/etc/hosts 右键属性 点击左上角的安全 再点击高级 左下角点击添加 点击选择主体 点击高级 点击立即查找 第二个Administractor 确定 之后全选 除了特殊权限 之后应用确定 在打开hosts 在最下面添加自己的监听路径 + 文件名称保存即可 直接访问文件名称 在浏览器上即可显示成功即成功 + +``` +2. 技巧(tips) +``` +cp -r(选择遍历目录) dirt(需要复制文件夹名称) /var/www/文件夹名称 +yarn build +cd .. 退出到上一级目录 cd /var/www 进入该路径 ll /var/www 直接查看该目录下的所有文件 +rm -f 文件名称 能删除一个文件 不能一次删一个目录文件即文件夹 + +``` + diff --git "a/\347\253\240\350\266\205\347\276\244/6-12.md" "b/\347\253\240\350\266\205\347\276\244/6-12.md" new file mode 100644 index 0000000000000000000000000000000000000000..499b458264bd916c77114e18d66c44de60f09e0f --- /dev/null +++ "b/\347\253\240\350\266\205\347\276\244/6-12.md" @@ -0,0 +1,94 @@ +后端定义 单文件组件 + +通过进入控制台 window+ r 或者进入windowsPowershell 控制台进行 +npm -v 查看版本 没有就安装 +npm install(下载) -g(global 全局安装) yarn +ctrl +c 强制终止 +npm global add @vue/cli 安装vue 再去配置环境变量 详情看6-11md 大二下学期笔记 建议直接安装 npm install -g yarn @vue/cli (不用配置环境变量) + +``` +App.vue 添加文件组件 components 中添加Apple 添加import 如上述 再去这样添加父组件在
再去创建的APP.vue中定义组件的变化 + + + + + + +Apple.vue + + + + + + +``` + \ No newline at end of file diff --git "a/\347\253\240\350\266\205\347\276\244/6-15.md" "b/\347\253\240\350\266\205\347\276\244/6-15.md" new file mode 100644 index 0000000000000000000000000000000000000000..3bf78ef8011f92babddd55870f0f251616734fda --- /dev/null +++ "b/\347\253\240\350\266\205\347\276\244/6-15.md" @@ -0,0 +1,130 @@ +路由 vue-router + +``` +APP.vue + +
+ + //在主页显示引入的组件 +
+ +``` + +``` +main.js + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from 'vue-router'//引用VueRouter 来自pack中的依赖中 可以直接安装(yarn add vue-router) 也可以在依赖中直接添加 + +import Login from './component/Login.vue +import Register from './component/Register.vue + +Vue.use(VueRouter)//使用路由 + +Vue.config.productionTip=false +//实例化一个VueRouter 并定义路径 component 组件 +let router=new VueRouter({ + mode:'histroy',//去除路由中自动添加的# + routes:[ + { + path:'/login', + component:Login + }, + { + path:'/register', + component:Register + }, + ] +}) +在vue中注册router +new Vue({ + router, + render:h>=h(App), +}).$mount('#app') + +``` + +``` +HelloWorld.vue + +
+

试一试

+跳转到注册页面//一个超链接 +
+ +``` + +``` +Register.vue + + +``` + +``` +Login.vue + + +``` \ No newline at end of file diff --git "a/\347\253\240\350\266\205\347\276\244/6-16.md" "b/\347\253\240\350\266\205\347\276\244/6-16.md" new file mode 100644 index 0000000000000000000000000000000000000000..2ef2288e49b2c2fd2a1addd9a5da0f788a241c2d --- /dev/null +++ "b/\347\253\240\350\266\205\347\276\244/6-16.md" @@ -0,0 +1,120 @@ +vue-router 动态路由和路由匹配 详情文档 可以直接百度 Vue.router +RouterView【命令视图】和RouterLink【命令路线】 +解耦 尽量让耦合的两个东西 不那么需要彼此也可以正常使用 + 耦合指两个东西缺少一个另外一个就没有用了 + +``` +main.js +//引入需要的路由 或者依赖等 +import Vue from 'vue' +import App from './App.vue' +import VueRouter from 'vue-router' +import Big from './components/Big' +import Day from './components/Day' +import P404(可定义名称) from './components/404' + + +Vue.use(VueRouter)//使用VueRouter + +Vue.config.productionTip = false +//实例化router 引入定义的组件和路径 +let router =new VueRouter({ + mode:'history', + routes:[ + { + path:'/big/:id', + component:Big, + children:[ + { + path:'', + component:Day + } + ] + },{ + //查找路径 路径优先级由上至下 没找到的路径都会跳转到组件404路由页面 + path:'*', + component:P404 + } + + + ] +}) + + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + +Big.vue + + + + + + + +Day.vue + + + + + +404.vue + + +``` \ No newline at end of file diff --git "a/\347\253\240\350\266\205\347\276\244/6-18.md" "b/\347\253\240\350\266\205\347\276\244/6-18.md" new file mode 100644 index 0000000000000000000000000000000000000000..eac65bdb138d4c35056bd6b566d5583f9f76fbab --- /dev/null +++ "b/\347\253\240\350\266\205\347\276\244/6-18.md" @@ -0,0 +1,105 @@ +Vue-Router 编程式导航 + + Vue 实例内部，可以通过 $router 访问路由实例。因此可以调用 this.$router.push + + $router 路由操作对象 即通过this.$router.push({})添加需要跳转的路由 或者命名的路由并通过parms传入变量显示在路由或者通过query传入对象(定义多个属性) 只写对象 + $route 路由信息对象 即获取当前定义的路由对象信息 只读取对象 + + ``` +App.vue +//通过定义跳转路径 和传入对象属性 +export default { + name: 'App', + components: { + }, + mounted:function (){ + setTimeout(() => { + this.$router.push( + { + path:'login', + query:{ + plan:'private' + } + } + ) + + + console.log(this.$route.query); + //打印传入的对象 路径即 /login?plan=private + }, 2000); + } +} + ``` +``` + App.vue +//传入路径跳转可以是字符省略/ 也可以用对象path属性 定义跳转路径 /login +export default { + name: 'App', + components: { + }, + mounted:function (){ + setTimeout(() => { + + this.$router.push({path:'login'}) + }, 2000); + } +} + ``` + +``` + App.vue /login/120 +export default { + name: "App", + components: {}, + mounted: function () { + setTimeout(() => { + const userid = 120; + this.$router.push({ + name: "login1", + params: { + userid, + }, + }); + }, 2000); + }, +}; + ``` + + + + + ``` + App.vue /login/10 +export default { + name: "App", + components: {}, + mounted: function () { + setTimeout(() => { + const userid = 10; + this.$router.push({ + path: `/login/${userid}`, + }); + }, 2000); + }, +}; + ``` + + ``` + App.vue + 提供了path 会忽略params 这里parms不显示 /login +export default { + name: "App", + components: {}, + mounted: function () { + setTimeout(() => { + const userid = 120; + this.$router.push({ + path: "login", + params: { + userid, + }, + }); + }, 2000); + }, +}; + ``` \ No newline at end of file diff --git "a/\347\253\240\350\266\205\347\276\244/6-19.md" "b/\347\253\240\350\266\205\347\276\244/6-19.md" new file mode 100644 index 0000000000000000000000000000000000000000..384448f511cbefd1f2db611a7e08987e18ed3fa8 --- /dev/null +++ "b/\347\253\240\350\266\205\347\276\244/6-19.md" @@ -0,0 +1,327 @@ +1. 命名路由 实现类似this.$router.push({name:'',params:{路径变量名称:200}})跳转至指定路由和传入指定参数 + +``` +App.vue + + + + +User.vue + + + + +main.js + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from 'vue-router' +import User from './components/User' + + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router= new VueRouter({ + mode:'history', + routes:[ + { + path:'/user/:id', + name:'user', + component:User + } + ] +}) + + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + +``` + +2. 命名视图 同时(同级)显示多个视图 +``` +//通过命名组件来同时(同级)显示多个视图 + +``` +App.vue + + + + +User.vue + + +File.vue + + +Server.vue + + +Login.vue + + + + +main.js + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from 'vue-router' +import User from './components/User' +import Login from './components/Login' +import File from './components/File' +import Server from './components/Server' + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router= new VueRouter({ + mode:'history', + routes:[ + { + path:'/user/:id', + name:'user', + components:{ + // 命名:引入组件的定义的名称 + user:User, + login:Login, + file:File, + server:Server + } + } + ] +}) + + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') +``` + +命令视图和镶嵌视图混用 +``` +main.js + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from 'vue-router' +import Server from './components/Server' +import User from './components/User' +import Login from './components/Login' +import File from './components/File' + + + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router= new VueRouter({ + mode:'history', + routes:[ + { + path:'/user', + name:'user', + component:User, + 通过子组件嵌套路由 + 路由的出口 需要在父组件引入 + children:[ + { + //显示子组件 + path:'server', + component:Server + }, + { + //同时显示多个子组件 + path:'register', + components:{ + file:File, + login:Login + } + } + ] + + + } + ] +}) + + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + + +User.vue + + + +App.vue + + + +``` + +重定向和别名 + + 重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b 路由也可以是命名路由 +``` + + +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: { name: 'foo' }} + ] +}) +``` + +别名 + +/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a + +路由组件传参 + +``` +main.js + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from 'vue-router' +import Server from './components/Server' +import User from './components/User' +import Login from './components/Login' +import File from './components/File' + + + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router= new VueRouter({ + mode:'history', + + routes:[ + { + path:'/user/:id', + name:'user', + props:true, + component:User, + children:[ + { + path:'server', + component:Server + }, + { + path:'register', + components:{ + file:File, + login:Login + } + } + ] + + + } + ] +}) + + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + + +User.vue + + + + + + + + +函数模式 + + props: route => ({ query: route.query.q }) + + () 相当于return {} + +``` diff --git "a/\347\253\240\350\266\205\347\276\244/6-22.md" "b/\347\253\240\350\266\205\347\276\244/6-22.md" new file mode 100644 index 0000000000000000000000000000000000000000..4889551daaf6e86587e3e50b9ff1d18e884fa375 --- /dev/null +++ "b/\347\253\240\350\266\205\347\276\244/6-22.md" @@ -0,0 +1,65 @@ +API(接口) 第一次课 + -o --output 要放置生成的输出的位置。即后面紧接的是你要创建文件的名称 +不清楚可以通过 -h 查找需要的指令 + .csproj是工程文件，c# project的缩写，里面包含的项目的文件信息，可以用文本打开。 + + + +创建解决方案 App + +``` +dotnet new sln -o App +``` + + +进入解决方案并查看该目录下的文件 + +``` +cd App +ls 查看该目录下的文件 +``` + + +在App路径下创建webapi 命名前面加上App. 再接自定义变量名称是为了标注上级目录名称 +--no-https 是指创建weapi时创建安全证书保证网址的安全(不清楚的可以通过 dotnet new webapi -h )查看相关详情 +``` +dotnet new webapi --no-https -o App.WebApi +``` + + +创建类库 这里创建Entity Service的类库 取名为自定义变量 + +``` +dotnet new classlib -o App.Entity +dotnet new classlib -0 App.Service + +``` + + +将创建的类库 webapi 添加至解决方案中 +``` +dotnet sln App.sln(创建的解决方案名称) add App.WebApi/App.WebApi.csproj(将App.WebAPi中的项目工程文件添加即可 由路径添加) +dotnet sln App.sln add App.Entity/App.Entity.csproj +dotnet sln App.sln add App.Service/App.Service.csproj +``` + +项目之间相互引入(x项目之间通过reference引入) + +``` +dotnet add App.Service/App.Service.csproj reference App.Entity/App.Entity.csproj +``` + +引用NuGet软件包到项目中 NuGet是.NET的软件包管理器。它使开发人员可以创建，共享和使用有用的.NET库。NuGet客户端工具提供了将这些库作为“程序包”生成和使用的功能。 + +``` +dotnet add App.WebApi/App.WebApi.csproj package Newtonsoft.Json +``` + + +将创建的 项目 跑起来并可以再在网页中访问自定义方法等内容 +``` +dotnet run -p App.WebApi/App.WebApi.csproj + + +跑起来之后 访问下方路径 并在该路径后面加上要访问的文件名称 如http://localhost:5000/WeatherForecast +``` \ No newline at end of file diff --git "a/\347\253\240\350\266\205\347\276\244/6-8.md" "b/\347\253\240\350\266\205\347\276\244/6-8.md" new file mode 100644 index 0000000000000000000000000000000000000000..f3f37218d168b0a4b7d62a63708b637774416dd5 --- /dev/null +++ "b/\347\253\240\350\266\205\347\276\244/6-8.md" @@ -0,0 +1,256 @@ +Vue的第九次课 组建基础 + +1. 组件的复用 组件事例(在组件创建中template 中定义一个子组件绑定value的值 并绑定点击事件是一个方法或是定义好的表达式) 组件创建中data必须是一个匿名的方法并且返回的是一个对象 + 组件复用:定义的组件 每应用一个相同的原组件 相当于新建一个原有的组件事例 即用相同组件相当于一直创建相同的组件 + template:` + 组件的标签 + ` +``` +
+ + + +
+ + + +``` +2. 组件的组织 + 为了方便组件在模板中使用这些组件必须通过注册以便新建的Vue事例(new Vue({}))识别调用 + 注册类型分 局部注册和全局注册 + 我们现在用的 Vue.component 是全局注册 但是比较常用的是局部注册后面会继续学习到 + 即 全局注册的组件可以被新建的Vue事例(新建的根实例)调用 + +3. 通过Props向子组件传递数据 + props 作为一个中间商 先在父组件 中通过v-for 遍历根实例中定义的数值 再将遍历的获取的item 绑定到props中的title id 再讲props中从父组件获取的值给予子组件直接应用 + + +``` +
+ + + +
+ + + +``` +4. 单个根元素 每个组件只有一个根元素 template:`子组件` 子组件可填写一个组件 要填写多个组件需要用一个父组件来装载即可 如下用一个父组件div 定义一个class方便应用样式或者再次调用 来装载即可显示多个props获取值的组件 + + +``` +
+ + + +
+ + + +``` +5. 监听子组件事件 + 子组件使用 $emit() 方法触发事件，父组件使用 v-on 指令监听子组件的自定义事件。 + 子組件中定义了一个触发事件 @事件类型="$emit('变量名称')" 注意这里子组件定义的input 中value获取不到值 要通过props获取或者 要在父组件(addcount)绑定value + +``` +通过子组件定义一个点击的触发事件 使得父组件监听这个子组件的事件并在其触发后父组件也触发监听的事件 +
+ + + + + +
+ + + + + +``` +6. 使得事件抛出一个值 通过$event 获取子组件中抛出的值引用与父组件 +``` +
+ + + + + +
+ + + +``` +7. 在组件上使用 v-model + 通过在父组件中绑定title 传入prors中 并在其子组件绑定value 并监听子节点并将新的值抛出 在父节点绑定触发事件 +``` +
+ + + + +
+ + + +``` +8. 插槽 快捷变量插入 之前通过{{变量}}插入 +``` +
+ + 也变秃了 + +
+ + +