vue
文章平均质量分 95
爱忽悠的唐唐
有梦想的人,永远年少
展开
-
vue入门秘籍
学习目标会搭建前端开发环境会创建Vue实例,知道Vue的常见属性会使用Vue的生命周期的钩子函数会使用vue常见指令会使用vue计算属性和watch监控了解vue-cli使用会编写vue组件掌握组件间通信了解vue-router使用了解vuex使用实战1.认识VueVue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整原创 2021-04-18 21:10:25 · 225 阅读 · 0 评论 -
typescript教程
搭建环境全局安装tsnpm install -g typescript初始化项目tsc -inittsconfig.json常用配置{ "compilerOptions": { "allowUnreachableCode": true, // 不报告执行不到的代码错误。 "allowUnusedLabels": false, // 不报告未使用的标签错误 "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use str原创 2021-03-10 21:46:47 · 300 阅读 · 0 评论 -
vue之provide/inject
经测试发现,当provide提供为对象或者是某个方法时,子对象取值才会是响应式的。父组件代码 parent.vue<template> <div> <Child /> <button class="btn" @click="clickTest" > 点击我 </but...原创 2019-12-13 15:13:37 · 274 阅读 · 0 评论 -
eslint推荐配置
// https://eslint.org/docs/user-guide/configuringmodule.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // htt...原创 2019-12-05 18:02:57 · 683 阅读 · 0 评论 -
vue仿dva自动处理请求loading状态
1、相关插件准备vue、vue-wait、axios2、在main.js引入vue-wait引入步骤如下,具体vue-wait文档请查看 https://github.com/f/vue-wait/tree/masterimport VueWait from 'vue-wait'//Loading集中管理控件Vue.use(VueWait) // add VueWait as Vue ...原创 2019-11-20 16:49:00 · 1042 阅读 · 0 评论 -
Vue 应用中使用微信 jssdk
#####关于微信jssdk通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。如:微信分享原始分享效果使用微信JS-SDK的分享效果准备工作1. 拥有一个微信公众平台的账号微信公众平台登录微信公众平台注册2. ...原创 2019-02-24 15:10:12 · 2058 阅读 · 0 评论 -
el-autocomplete 当页面滚动但滚动区域不为window时,弹出层定位不准确问题
问题element中el-autocomplete组件,当页面滚动但滚动区域不为window时,弹出层定位不准确问题解决方案研究源码发现,el-autocomplete所依赖的popperjs有监听window滚动事件,能够在页面滚动时实时更新popper的位置。但因为我的布局滚动区域不是window,而是内容区域所在div。接下来我提供一种思路。在mounted方法中监听滚动容器的滚动事...原创 2019-02-19 12:10:54 · 1491 阅读 · 1 评论 -
Visual Studio Code 卡死,cpu过高
文件-》首选项-》设置 将search.followSymlinks 设置为false后,关闭Visual Studio Code,重新打开就不会卡了原创 2019-03-01 20:11:53 · 4406 阅读 · 1 评论 -
教你开发vue移动端组件之popover
前言我有一个表格需要展现员工个人业绩,大家都知道重名是不可避免的,所以我希望能够标识出该员工所对应的区域和机构,以此来区分人员。但在移动端屏幕空间有限,所以决定在点击人员时,右侧弹出他所在的区域和机构。效果popover组件具体代码<template> <div class="pop-over"> <a @click=...原创 2019-03-27 10:48:39 · 2601 阅读 · 0 评论 -
vue表单输入组件之v-model
v-model的实质为语法糖,相当于v-bind:value和 v-on:input的结合。如果需要定义表单输入组件,需要在值变更的时候,在组件中触发input方法。原创 2019-06-19 09:25:03 · 215 阅读 · 0 评论 -
vue指令:限制输入数字,可配置最大值最小值及小数点位数
directives: { // 保留2位小数点指令 不四舍五入 fixNumber: { update: function (el, { value, modifiers }, vnode) { try { let input = el.children[0] if (!inpu...原创 2019-07-18 14:22:22 · 8943 阅读 · 2 评论 -
微信IOS 6.7.4 键盘弹起页面上滑,键盘收起页面不会回到原位置
在app.vue中 mounted () { this.bindInputEvent() }, methods:{ bindInputEvent () { // 微信IOS 6.7.4 键盘弹起页面上滑,键盘收起页面不会回到原位置 if (util.browser.versions.ios) { window.addEventListe...原创 2019-01-23 15:16:52 · 723 阅读 · 0 评论 -
element input第一次回车刷新页面问题
我们在input中加上键盘回车事件@keyup.enter.native,如下: <el-form ref="form" :inline="true" :model="form" label-width="100px"> <el-input style="float: right" v-model="form.keyword" pl原创 2018-11-14 09:19:26 · 4966 阅读 · 1 评论 -
element el-table 表格列 v-if 显示 隐藏 乱序问题
有个需求当tab为投保人时,表格中显示字段为投保人相关信息当tab为被保人时,表格中显示字段为被保人相关信息我在来回切换tab时,发现用v-if控制的字段列经常乱序。字段展示先后顺序不一。如图所示:解决方法:在table-column中加入:key=“Math.random()”如下所示代码 <el-table-column ...原创 2018-10-30 16:46:18 · 15926 阅读 · 5 评论 -
VUE单页面切换动画(全网最好的切换效果)
// 视图切换动画逻辑let history = window.sessionStoragelet historyCount = history.getItem('count') * 1 || 0function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex...原创 2018-07-31 10:22:28 · 10172 阅读 · 0 评论 -
VUE动态数据绑定(正则解析)
我们需要有一个对象,将DOM节点和对应的数据一一映射起来。 以此来达到修改DOM相关的任意一个属性的时候,只修改它所对应的节点。而不是去渲染更新整个DOM。<p>姓名:{{name}},年龄:{{age}}</p>p标签中的姓名:{{name}},年龄:{{age}}是一个文本节点。在进行节点对象构建时,需将这个文本节点拆分成多个,以此来达到精确匹配。举个栗子...原创 2018-07-31 10:24:59 · 1331 阅读 · 0 评论 -
vue去除特殊字符Mixin
export const trim = { methods: { trim(value) { /**去除首尾空白 */ return value.replace(/(^\s*)|(\s*$)/g, ""); }, }}export const validateSpecialCharacter = ...原创 2018-07-31 10:26:27 · 5621 阅读 · 1 评论 -
手把手带你开发豆瓣FM(vue)
最近闲来无事,打算用vue练练手,正好比较喜欢豆瓣fm小清新的界面,那么就仿照豆瓣fm,开发一个属于自己的vue项目吧。 项目会用到以下技术: + Vue2:采用最新Vue2的语法 + Vuex:管理公共组件状态量 + vue-router:管理单页面应用路由 + axios:发起http请求 + scss:css预处理语言 + Webpack:自动化构建工具,主要配置vue-cli...原创 2018-07-31 10:27:10 · 360 阅读 · 0 评论 -
vue-cli npm install报错
npm ERR! Unexpected end of JSON input while parsing near '...","dependencies":{"ba'此时需npm cache clean --force原创 2018-07-31 10:27:51 · 210 阅读 · 0 评论 -
vue-router HTML5 History 模式
在webpack配置中,devserver配置如下: devServer: { clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsP...原创 2018-08-20 10:21:03 · 601 阅读 · 0 评论 -
vue单文件组件的格式规范
&amp;amp;lt;template&amp;amp;gt;&amp;amp;lt;/template&amp;amp;gt;&amp;amp;lt;script&amp;amp;gt;export default { name: '', mixins: [], components: { }, props: { }, data() { return {原创 2018-08-23 10:33:57 · 3364 阅读 · 0 评论 -
webpack跨域proxyTable配置
proxyTable: { '/tangyuhui/api/wechat': { target: 'http://127.0.0.1:3000', secure: false, pathRewrite: { '^/tangyuhui/api': '' } }, ...原创 2018-09-19 16:12:25 · 1119 阅读 · 0 评论 -
H5身份证上传识别功能
&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;bg-fff&amp;quot; style=&amp;quot;min-height:100%;&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;p-原创 2018-10-12 08:51:00 · 13288 阅读 · 16 评论 -
PC端解决滑鼠, 触屏之前的差异问题(hammer-touchemulator)
我在使用vant组件时,遇到项目在PC端打开时,无法滑动日期选择控件。但是官网示例中却不受影响,可以正常滑动,经过一番研究,发现官方demo引入了一个插件,用于在 PC 上模拟 Touch 事件。该库的网址是:https://github.com/hammerjs/touchemulator...原创 2018-10-10 14:19:44 · 2428 阅读 · 0 评论 -
VUE异步组件-处理加载状态在路由组件中使用无效
解决方法:function lazyLoadView (AsyncView) { const AsyncHandler = () =&amp;gt; ({ component: AsyncView, // A component to use while the component is loading. loading: require('./Loading.vue'...原创 2018-07-31 10:21:28 · 2750 阅读 · 0 评论