前端学习
关注
分享
扫一扫
啊辉的小号
多学习，才能进步
展开
-
学习前端_vue组件_路由别名
我们在使用重定向是 当我们访问 /a时 会重定向到 /b 我们实际上访问的时/b。就好比我 小红给我打电话，我把电话转线到小刚那，小红实际上是在给小刚打电话。如图中这就是重定向的基本逻辑当我们在使用别名时，举例说明：当小红打电话给我时，说：嗨小明，我找小刚，我说：小红，就是我，我大名叫小明，小名叫 小刚。如图中这是别名的基本含义说完了别名具体含义接下来就看一下使用方法：在定...原创 2020-04-22 09:35:19 · 246 阅读 · 0 评论 -
学习前端_vue组件_命名路由
有时候我们在定义路由跳转时，没必要使用 path。我们可以在定义路由时，附加名称，这样我们在使用时，直接使用name 来定义跳转路由。使用步骤：1 定义路由时要 添加路由名称 name 属性。例如：const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user'...原创 2020-04-22 08:49:56 · 247 阅读 · 0 评论 -
学习前端_vue组件_路由_编程式导航
除了使用<router-link>创建 a 标签来定义导航链接，我们还可以借助 javascript 方式 调用router 的实例方法，通过编写代码来实现。通过这种方式我们能够更加方便的和灵活的跳转到任意导航。两种方式：router.push(...) 这种方式等同于<router-link :to="..."> 当执行router.push 时会向 hi...原创 2020-04-21 19:58:37 · 241 阅读 · 0 评论 -
学习前端_vue组件_动态路由参数
我们在匹配 规则时例如：{ path: '/user/1', component: User }当我们出现这种情况时：{ path: '/user/1', component: User }{ path: '/user/2', component: User }{ path: '/user/3', component: User }我们就是可以使用动态路由匹配，通过传参的方...原创 2020-04-21 19:25:35 · 296 阅读 · 0 评论 -
学习前端_vue组件_路由重定向
在这里先附上 官方链接https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html#%E9%87%8D%E5%AE%9A%E5%90%91在官方中没有具体表述路由重定向的含义对于新人来说可能不太好理解。路由重定向指：用户在访问A地址时，强制页面跳转到B页面，从而展示特定的组件页面；通过路由规则 redirect 属性...原创 2020-04-21 17:51:33 · 329 阅读 · 0 评论 -
前端笔记 单页面应用 spa
之前听到别人说什么单页面应用自己不了解什么意思。于是上网查了查，理一下到什么单页面应用指的是什么。要说但页面应用首先可以说说路由的概念和原理。路由分为前端路由和后端路由。先说后端路由 概念是：根据不同的用户URL请求返回不同的内容。本质上就是URL请求地址与服务器资源之间的对应关系。每次浏览器请求一个URL 地址，服务器 中 后端路由就会拦截地址然后 找到 服务器中的资源 返回给浏览器...原创 2020-04-21 11:08:41 · 301 阅读 · 0 评论 -
学习前端_vue组件_非父子级的组件间的数据传递
之前说过了父子级之间是如何传递数据的，接下来讲一下非父子级如何传递数据1.创建一个空的vue实例 例如：var datavue=new Vue();2.在数据源组件上添加发射方法，将想要传送的数据发射出去 例如：send(){datavue.$emit("edata",this.name) }3.在接收数据的组件接收方法，在合适的时间监听传送过来的数据 例如datavue.$on...原创 2019-08-15 18:21:34 · 135 阅读 · 0 评论 -
学习前端_vue组件_slot内容分发
1.直接使用2.通过slot=''标记<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...原创 2019-08-16 09:43:21 · 113 阅读 · 0 评论 -
学习前端_vue组件_路由的简单介绍
Vue Router的官方网址：https://router.vuejs.org/zh/ 安装：https://unpkg.com/vue-router/dist/vue-router.js NPM : npm install vue-router 用Vue.js+Vue Router创建单页面应用，使用Vue.js，我们通过组合组成应用程序，当把Vue Router添加进来，我们需要将组...原创 2019-08-16 10:31:03 · 131 阅读 · 0 评论 -
学习前端_vue组件_路由的嵌套
渲染组件中设置自己的Router-link和RouterView 在routes中设置子路由配置 通过Children<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...原创 2019-08-16 12:38:58 · 131 阅读 · 0 评论 -
学习前端_vue组件_路由的传参
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...原创 2019-08-16 17:43:40 · 190 阅读 · 0 评论 -
学习前端_vue组件_单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。可以通过这种方式双向随意的改...原创 2019-08-15 16:48:24 · 196 阅读 · 0 评论 -
npm 运行vue-cli webpack 项目，npm显示应用显示已经运行，但是网页没有自动打开问题
npm上显示：Your application is running here: http://localhost:8080 ，但是网页没有自动打开解决方案：打开项目文件，寻找config=>index.js 打开 在index.js中有个autoOpenBrowser,其值默认是false,把它设置为true 重启项目测试一下...原创 2019-08-20 18:24:10 · 475 阅读 · 0 评论 -
学习前端_vue组件_脚手架简单使用
脚手架官方网址https://cli.vuejs.org/zh/ 首先配置环境：cnpm install vue-cli -g 开启项目框架 ：vue init 模板名 项目名 在项目目录下 安装相关依赖 npm install 运行一下，测试是否安装正确 npm run dev...原创 2019-08-20 10:27:00 · 102 阅读 · 0 评论 -
学习前端_vue组件创建方式一
1.通过Vue.extend创建构造器2.注册组件3.设置组件挂载点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2019-08-15 10:27:58 · 96 阅读 · 0 评论 -
学习前端_vue组件创建方式二
1.通过vue.component注册组件2.添加挂载点3.创建<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2019-08-15 10:40:17 · 98 阅读 · 0 评论 -
学习前端_vue组件_vuex简单使用
vuex官方网站：https://vuex.vuejs.org/zh/ 根据vuex的计数例子总结一些步骤 首先大家脚手架框架 在src中创建store.js 文件 在main.js 中导入store.js :import store from './store' 在vue构造器中添加 store,配置store 选项，指定为store对象，会自动将store对象注...原创 2019-08-20 14:16:44 · 119 阅读 · 0 评论 -
学习前端_vue组件分类
vue组件分为两类：全局组件和局部组件1.全局组件时通过vue.component进行注册2.局部组件时在vue实例中注册：在components选项中定义自己得组件，对于comconents中得属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象<!DOCTYPE html><html lang="en"><head> ...原创 2019-08-15 10:58:40 · 193 阅读 · 0 评论 -
学习前端_vue组件引用模板
有时组件内容过多，可以将其提取出来放到模板中，并且对其引用 通过<template>实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...原创 2019-08-15 11:22:07 · 355 阅读 · 0 评论 -
学习前端_vue组件动态组件
多个组件使用同一个挂载点，可以实现他们的动态切换使用方法：只用<component :is="组件名"> 方式进行切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...原创 2019-08-15 12:33:12 · 125 阅读 · 0 评论 -
学习前端_vue组件_父子组件
父子组件：在一个组件内部定义另一个组件，被定义的组件称为子组件子组件只能在父组件内部使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...原创 2019-08-15 13:59:06 · 144 阅读 · 0 评论 -
学习前端_vue组件_子组件接收父组件中的数据
父子组件之间的作用域时独立的，因此想要调用数据就得使用一定手段进行数值传递1.在父子间中调用子组件时，绑定父组件中的数据 例如：：father_name='name'2.在子组件props中申明要获取数据的名字 例如： props:['father_name']3在子组件中使用接收到的数据 例如{{ father_name}}<!DOCTYPE html>...原创 2019-08-15 14:33:21 · 495 阅读 · 0 评论 -
学习前端_vue组件_父组件接收子组件中的数据
父组件不能直接获取子组件中的数据，只能通过子组件发送时间的方式传递数据1：在子组件中定义发送方法 例如：this.$emit('ve',this.name,this.address,this.sex) 第一个参数是事件名称，后面的参数是要发送的数据2：在掉用子组件的地方设置绑定 例如<my-vue2 @ve='getData'></my-vue2>...原创 2019-08-15 15:27:19 · 455 阅读 · 0 评论 -
VSCode中如何浏览器打开Html
1.在插件中寻找open in browser,选择安装2.在编辑面板中右键 选择open in default browser或者 open in other browser 打开浏览器即可 ，快捷键alt+B原创 2019-08-04 17:37:35 · 2772 阅读 · 0 评论