vue
关注
分享
扫一扫
文章平均质量分 75
咸鱼_翻身
每天进步一点点！
展开
-
Vue之----404和路由钩子
1、路由模式有两种：hash：路径带 # 符号，如 http://localhost/#/loginhistory：路径不带 # 符号，如 http://localhost/login2、修改路由配置，代码如下：export default new Router({ mode: 'history', routes: [ ]});3、我们来创建一个404的界面，首先创建一个NotFound.vue视图组件NotFound.vue<template> <原创 2021-11-20 13:57:08 · 260 阅读 · 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 · 1764 阅读 · 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 · 2225 阅读 · 0 评论 -
如何运用vue结合elementUI
1、创建一个hello-vue的工程vue init webpack hello-vue2、安装依赖#进入工程目录cd hello-vue#安装vue-routern npm install vue-router --save-dev#安装element-uinpm i element-ui -S#安装依赖npm install# 安装SASS加载器cnpm install sass-loader node-sass --save-dev#启功测试npm run dev3、原创 2021-11-20 01:01:01 · 1423 阅读 · 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-routernpm install vue-router --s原创 2021-11-18 17:24:05 · 242 阅读 · 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 · 836 阅读 · 1 评论 -
如何理解Vue之-----slot插槽
循环写在ul里，在li标签里取相应的数据，另外，slot你就想象成留的空白，你想加入什么数据就可以传什么数据slot相当于一个空标签，通过vue可以实现动态改变值和样式，把一块区域内容抽了出来可以实现复用，就和Java里封装的工具类一样我懂了，两个插槽各自另外定义一个组件，用模板填写内容第一个是个大的组件，其他都往槽里插，就和占位符一样...原创 2021-11-16 23:06:27 · 309 阅读 · 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 · 548 阅读 · 0 评论 -
详解Vue之Axios异步通信
1、首先我们创建一个.json文件，作为交互使用，我们列举json数据格式模拟传递到前端来帮助小伙伴们理解。{ "name": "咸鱼_翻身", "url": "https://blog.youkuaiyun.com/aaa123_456aaa", "page": 1, "address": { "street": "湘桥区", "city": "潮州市", "country": "中国" }, "links": [ { "name": "咸鱼_翻身原创 2021-11-15 20:14:57 · 698 阅读 · 0 评论