vue
文章平均质量分 75
咸鱼_翻身
每天进步一点点!
展开
-
Vue之----404和路由钩子
1、路由模式有两种: hash:路径带 # 符号,如 http://localhost/#/login history:路径不带 # 符号,如 http://localhost/login 2、修改路由配置,代码如下: export default new Router({ mode: 'history', routes: [ ] }); 3、我们来创建一个404的界面,首先创建一个NotFound.vue视图组件 NotFound.vue <template> <原创 2021-11-20 13:57:08 · 224 阅读 · 0 评论 -
Vue之----参数传递及重定向
1、总的来说有两种方式:这是我的目录结构,我这里依旧放全部代码,同学们可以着重看我圈起来的部分,然后去理解: 2、 创建用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件: Profile.vue <template> <div> <h1>咸鱼_翻身1</h1> <!--这里我们接收参数--> {{$route.params.id}} </div原创 2021-11-20 11:57:21 · 1706 阅读 · 0 评论 -
Vue之----路由嵌套
1、嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成。(其实就是套娃操作罢了,跟后端的视图跳转路径蛮像的): 2、 创建用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件: Profile.vue <template> <h1>咸鱼_翻身1</h1> </template> <script> export default { name: "UserList" } <原创 2021-11-20 01:54:29 · 2175 阅读 · 0 评论 -
如何运用vue结合elementUI
1、创建一个hello-vue的工程 vue init webpack hello-vue 2、安装依赖 #进入工程目录 cd hello-vue #安装vue-routern npm install vue-router --save-dev #安装element-ui npm i element-ui -S #安装依赖 npm install # 安装SASS加载器 cnpm install sass-loader node-sass --save-dev #启功测试 npm run dev 3、原创 2021-11-20 01:01:01 · 1361 阅读 · 0 评论 -
教你如何理解Vue Router路由用法
1、简单了解一下,Vue Router是Vue.js官网的路由管理器,它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。 功能: 1.嵌套的路由/视图表 2.模块化的、基于组件的路由配置 3.路由参数、查询、通配符 4.基于Vue.js过渡系统的视图过渡效果 5.细粒度的导航控制 4.带有自动激活的CSS class的链接 5.HTML5历史模式或hash模式,在IE9中自动降级 6.自定义的滚动条行为 2、在项目中安装vue-router npm install vue-router --s原创 2021-11-18 17:24:05 · 208 阅读 · 0 评论 -
Vue之----自定义事件内容分发
1、小伙伴们这个理解起来有点复杂,希望仔细看里面的原理,自己去敲一遍: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <todo> <xian slot="xia原创 2021-11-17 11:58:46 · 798 阅读 · 1 评论 -
如何理解Vue之-----slot插槽
循环写在ul里,在li标签里取相应的数据,另外,slot你就想象成留的空白,你想加入什么数据就可以传什么数据 slot相当于一个空标签,通过vue可以实现动态改变值和样式,把一块区域内容抽了出来可以实现复用,就和Java里封装的工具类一样 我懂了,两个插槽各自另外定义一个组件,用模板填写内容 第一个是个大的组件,其他都往槽里插,就和占位符一样 ...原创 2021-11-16 23:06:27 · 282 阅读 · 0 评论 -
Vue之计算属性
1、何为计算属性:大白话讲就是计算出来的结果保存在属性当中,可以想象为缓存。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--注意了同志们是currentTime1(),这里有加括号的,原创 2021-11-15 22:21:32 · 516 阅读 · 0 评论 -
详解Vue之Axios异步通信
1、首先我们创建一个.json文件,作为交互使用,我们列举json数据格式模拟传递到前端来帮助小伙伴们理解。 { "name": "咸鱼_翻身", "url": "https://blog.csdn.net/aaa123_456aaa", "page": 1, "address": { "street": "湘桥区", "city": "潮州市", "country": "中国" }, "links": [ { "name": "咸鱼_翻身原创 2021-11-15 20:14:57 · 641 阅读 · 0 评论