![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
wayne丶
不忘初心
展开
-
vue 采坑之旅(一) 从0搭建一个vue项目
Vue介绍 (官网)Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层,采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 安装前你需要了解的一些知识HTML CSS Javascript 命令行工具 第一步安装node.js先从node官网下载安装node环境,傻瓜式操作,一直‘next’,就...原创 2018-12-12 17:11:28 · 198 阅读 · 0 评论 -
Vue slot插槽
Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用,这篇文章简明介绍三种插槽的用法。vue官方文档 插槽匿名插槽子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽。只要在父元素中插入的内容,默认加入到这个插槽中去。<template> <div> hello <slot>陌生人&...原创 2019-08-22 14:32:13 · 156 阅读 · 0 评论 -
Vue filters, filter 过滤器
过滤器作用:文本数据格式化 两种过滤器:1 全局过滤器 2 局部过滤器全局过滤器filter说明:通过全局方式创建的过滤器,在任何一个vue实例中都可以使用实例:时间戳对象转换//组件中调用 过滤器dateFormatYMD<div>{{ date| dateFormatYMD }}</div><script>//mi...原创 2019-08-08 10:18:00 · 396 阅读 · 0 评论 -
vue better-scroll滚动插件 实现 左侧滚动监听
此贴为记录贴 不做备注 有相同需求的 直接贴代码看效果注意: 通常需要固定一下宽度或者高度 或者使用flex布局方式的话 子内容不要超出父内容宽度<template> <section class="box"> <div class="head"> head </div> <div cla...原创 2019-07-11 16:10:05 · 1987 阅读 · 1 评论 -
vue图片加载失败默认图片
css解决方案:img { position: relative;}img:after { content: url('替代圖片'); display: block; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-co...原创 2019-06-18 16:30:24 · 8547 阅读 · 0 评论 -
vue watch监听方法
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。具体的用法可以直接看下面的示例,简单直接。基本用法: 当Name值变化时,watch监听到并且执行<div> <p>Name: <input type="text" v-model="...原创 2019-05-13 17:02:38 · 15813 阅读 · 0 评论 -
vue 区分pc以及移动端路由
移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别。于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的。在App.vue文件中关键代码如下export default { name: "App", mounted() { if (this.isMobile()) { this.$rout...原创 2019-05-05 14:32:52 · 3335 阅读 · 4 评论 -
vue Vue相关开源项目库汇总 (转)
UI组件element★13489 - 饿了么出品的Vue2的web UI工具套件Vux★8133 - 基于Vue和WeUI的组件库iview★6634 - 基于 Vuejs 的开源 UI 组件库mint-ui★6253 - Vue 2的移动UI元素muse-ui★3705 - 三端样式一致的响应式 UI 库vue-material★3328 - 通过Vue Materia...转载 2019-03-25 09:16:09 · 387 阅读 · 0 评论 -
Vue scrollBehavior 滚动方法
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。注意: 这个功能只在 HTML5 history 模式下可用。当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:const router = new VueRouter({...原创 2019-01-28 10:30:03 · 894 阅读 · 0 评论 -
vue keep-alive实现页面缓存不请求
前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢;比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview来打开,后退其实是关闭当前webview,其上一个webview就自然显示出来;但是在单页的webapp应用中,所有内容其实是在一个页面中展示的,不存在多页的情况,这时就需要前端开发来想办法实现相应的体验效...原创 2019-01-21 16:45:47 · 1964 阅读 · 0 评论 -
vue 踩坑只旅(三),HelloWorld/常用指令
扯点最基本的废话。Vue主要是“面向数据”编程。当数据发生改变时使用虚拟DOM来更改某一DOM节点,避免将整个页面渲染vue.js作者尤雨溪,现在是马爸爸的人,个人觉得vue现在是国内目前最火的前端mvvm框架(model-view-ViewModel),相对于angular 和 recat,vue 的学习路线相对简单,中文文档和资料相对详细,比较容易上手,当然也没有想象的那么简单。还要告...原创 2018-12-27 18:07:27 · 431 阅读 · 0 评论 -
vue 采坑之旅 (2) --项目结构目录详细介绍
之前在上一章已经做过 Vue的脚手架vue-cli的安装。具体可以查看vue 采坑之旅(一) 从0搭建一个vue项目目录详情首先先说下 安装项目以后的目录详情|-- build // 项目构建(webpack)相关代码| |-- build.js // 生产环境构建代码| |--...原创 2018-12-13 14:57:26 · 965 阅读 · 0 评论 -
vue provide & inject 依赖注入
祖先后代 provide & inject先简单的BB一下Vue中父组件到子组件的通信主要由子组件的props属性实现。props一层层传递,爷爷给孙子还好,如果嵌套了五六层还这么写,感觉自己就是一个沙雕(别感觉了),所以这里介绍一个 稍微冷门的APIprovide/inject,专门用来跨层级提供数据,现在很多开源库都使用这个api来做跨层级的数据共享,比如element...原创 2019-08-22 14:53:36 · 848 阅读 · 0 评论