vue
明天自己会更好
这个作者很懒,什么都没留下…
展开
-
vue脚手架详解组件通信(内含完整demo)
vue脚手架详解组件通信方法一、props/$emit1父传子2子传父方法二、$emit和 $on1跨级通信四总结方法一、props/$emit1父传子父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。<!-- 父传子中的父页面 --><template> <div class="afu"> <h1>{{ afuname }}</h1> <Azi原创 2020-11-23 19:13:40 · 562 阅读 · 0 评论 -
vue中$router和$route的区别
vue中$router和$route的区别1效果图2结论1效果图2结论从图中可以得知router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。同样获取到query值 $router需要向内3层 $route只需要1层即可原创 2020-10-24 15:31:45 · 219 阅读 · 0 评论 -
前端时间格式转换2020-10-08T0:03:09.478Z
前端时间格式转换1效果2方法一:原生方式3方法二:函数方式4方法三:使用自定义过滤器1效果2方法一:原生方式根据图1获取的字段createdAt let time=new Date(+new Date(new Date(this.userInfo.createdAt).toJSON()) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 3方法二:函数方式function getTim原创 2020-10-19 16:08:56 · 736 阅读 · 1 评论 -
vue移动端使用nprogress进度条详细操作
vue移动端使用nprogress进度条详细操作1前期准备2指令:3在项目中引入4用法1前期准备准备一个新配置好的vue脚手架2指令:npm install --save nprogress3在项目中引入在路由的index.js中引入要使用的nprogress,也可以在main.js中引用我的在index.js中import NProgress from 'nprogress'import 'nprogress/nprogress.css'4用法NProgress.start();原创 2020-10-07 09:42:41 · 1449 阅读 · 0 评论 -
vue移动端项目顶部动态变化(插槽的应用)
vue移动端项目顶部动态变化插槽的应用1效果图加前引2创建匿名插槽2使用匿名插槽4创建具名插槽5使用具名插槽1效果图加前引一般我们写移动端项目时会遇到这种需求,当点击底部的关于页面,顶部的位置也要显示与之对应,今天为大家介绍一种简单的方法!使用插槽分两种1只需要改动一个值只需要用到匿名插槽2组要改动多处最好用到具名插槽2创建匿名插槽创建一个头部组件Head.vue,暂与About同级目录,图片右侧为插槽部分,右侧使用插槽的位置2使用匿名插槽操作About页面1导入import He原创 2020-10-07 00:15:14 · 1526 阅读 · 2 评论 -
vue未定义报错
vue未定义报错1报错2改错1报错通过报错可知报错位置是在App.vue 原因是无法读取未定义属性2改错路由未挂载到实例中原创 2020-09-28 15:02:26 · 5355 阅读 · 0 评论 -
vue之手写路由
vue之手写路由1准备一个没有路由的项目2检测3安装指令 npm i vue-router4添加router和views1在创建router文件并在其中添加index.js文件。2在src下创建视图文件夹views并添加home页和about页5配置app.vue和main.js根节点并查看效果1app.vue2main.js1准备一个没有路由的项目2检测通过对比检查配置package.jsonpackage.json文件可知当前没有配置路由3安装指令 npm i vue-router使用原创 2020-09-28 11:30:44 · 378 阅读 · 0 评论 -
vue之子路由的配置
vue之子路由的配置1.需求:1级路由配置子路由,在Book下配置两个子路由2.第一步在router文件下的index.js文件中的对应页面配置它的子路由(二级路由)3.①在父页面中写好子路由页面②完善子页面4页面显示子路由5结束总结①.路由在index.js中配置好子路由时记得导出。②子路由:to中可以写{name:‘子路由名’}或者{path:‘子路由路径’},写路由名字不易出错...原创 2020-09-28 09:11:15 · 8755 阅读 · 0 评论 -
vue创建脚手架(不包含路由)
vue创建脚手架(不包含路由)1.检查环境,默认安装完node和npm①检测node指令:node -v原创 2020-09-25 08:26:52 · 746 阅读 · 0 评论 -
vue单页组件化案例
vue单页组件化案例1.单页分页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js原创 2020-09-21 08:27:46 · 531 阅读 · 0 评论 -
vue之watch和computed的区别
vue计算属性之watch和computed的区别1.computed<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l原创 2020-09-20 15:29:25 · 237 阅读 · 0 评论 -
计算属性小案例
计算属性小案例1类计算属性初级<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https:原创 2020-09-17 00:42:55 · 269 阅读 · 0 评论 -
v-model指令修饰符
v-model指令修饰符1 .lazy v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据。 <div id="app"> <input type="text" v-model.lazy="content" placeholder="请输入"> <p>输入框:{{content}}</p&g原创 2020-09-15 23:52:56 · 1079 阅读 · 0 评论