![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
明月别枝
分享经验,一起学习,一起进步
展开
-
艺术二维码生成插件,内附小程序版
给大家分享一个可以生成艺术二维码的插件,内附小程序版。预览地址: http://yating.online/art-qrcode/艺术二维码生成原理https://blog.csdn.net/lemisi/article/details/88831289艺术二维码插件:普通版git地址:https://github.com/Chenyating/wx-art-qrcode下载方式npm i art-qrcode使用方法import "artQRCode.js";var qrBox =原创 2021-06-17 09:06:18 · 731 阅读 · 2 评论 -
清新UI组件库——radio组件开发思路
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-uiradio组件遇到的问题互斥问题相同radio的name一致的时候可以实现互斥问题。name取名字:const now = Date.now();let num = 0;const radomName = () => { return `ifRadio_${now}_${num++}`}radio-grou原创 2020-07-01 11:07:24 · 342 阅读 · 0 评论 -
清新UI组件库——page组件开发思路
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-uipage组件遇到的问题返回的页面数问题当页面过于长的时候,可以这样显示。页面数小于等于6,就默认遍历1-6页面数大于6时,如果当前页小于2或者大于总页数-2:返回数组为[1,2,3,……,page-1,page]页面数大于6时,如果当前页为中间值:返回数组为[……,current-1,current,current+1,……]原创 2020-07-01 11:05:43 · 365 阅读 · 0 评论 -
清新UI组件库——checkboxt组件开发思路
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-uicheckbox组件遇到的问题跟radio性质差不多。当为checkbox组的时候,值的类型为array;判断当单个值的时候。先判断value是否存在,再判断是否为boolean,选中取反。值为label;修改样式checkbox无法直接改变样式只能通过连接到label标签来改变checkbox的样式.当点击的原创 2020-07-01 11:03:27 · 265 阅读 · 0 评论 -
清新UI组件库——开发组件库准备
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-ui开发组件库准备准备vscode语言框架:vue,vuepress,vue-cli3,less参考框架: iview-ui,element-ui开发定位风格:小清醒,简洁颜色:主打绿,底白色字体:oppo字体免费商用新建项目全局安装npm install -g @vue/cli 或 yarn global ad原创 2020-07-01 11:00:17 · 402 阅读 · 0 评论 -
清新UI组件库——input组件开发思路
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-uiinput组件遇到的问题v-model问题外部value变化,input的值没有变化?[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mV2HarjW-1593572054748)(/img/bVbIVRS)]先理解v-model的性质<input v-model="searchText">原创 2020-07-01 10:57:02 · 462 阅读 · 0 评论 -
编写router的坑
默认App有显示;<template> <router-view></router-view></template>新建一个pages/index,就放在app中了<template> <router-view></router-view></template>route...原创 2019-11-25 16:01:17 · 366 阅读 · 0 评论 -
有看板娘的vuepress-theme-ting清新简易主题
vuepress-theme-ting这是一个vuepress主题,主要功能有博客归档分类,以及留言,个人展示等;主题追求极简,根据 vuepress 的默认主题修改而成,官方的主题配置仍然适用;预览地址ting主题预览地址installcd ting-Blognpm install vuepress-theme-ting修改配置module.exports = {...原创 2019-11-12 19:56:22 · 2975 阅读 · 2 评论 -
websocket+vue+node在线群聊
最近刚写了一个在线群聊的功能。一个是vue页面;一个是后台服务js;需要先下载ws<template><div> <!-- 先输入昵称 --> <div class="before" v-if="!ifEnter"> <Input @on-search="settingName()" v-model="...原创 2019-11-01 16:39:26 · 729 阅读 · 1 评论 -
vue生命周期
### vue的生命周期:1、new vue():创建一个vue实例,就会进入组件的创建过程;2、init:初始化组件的事件和生命周期函数;3、beforeCreat()是组件创建的第一个生命周期;data和methods都没有被触发;4、created():第二个生命周期函数,组件的data和methods已经初始化完毕;主要发起ajax请求;5、把data的数据拿到,并解析执行模板...原创 2019-09-21 14:55:33 · 171 阅读 · 0 评论 -
console.log(字符图案),生成器,字符画
可以通过本地址生成,预览地址如下:http://www.yating.online/tools/notes原创 2019-09-04 11:47:33 · 4323 阅读 · 0 评论 -
在nuxt引入view
1、先下载:npm install iview --save2、在plugins创建文件import Vue from 'vue';import iView from 'iview';Vue.use(iView);import 'iview/dist/styles/iview.css';3、在nuxt.config.js引入 // 引入iview; plugins: [...原创 2019-08-17 10:19:07 · 963 阅读 · 0 评论 -
数组转数值,把数字分别输入数组中,例如【1,2,‘.’,3】转成12.3的方法
num[];//为这个数组; arrayValue() { for (var j = 0; j <= this.num.length - 1; j++) { for (var i = this.num.length - 2 - j; i >= 0; i--) { this.num[j] = this.num[j] * 10; ...原创 2018-08-23 20:54:26 · 3498 阅读 · 0 评论 -
前端计算器代码
呈上html代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use原创 2018-08-23 21:08:49 · 1934 阅读 · 1 评论 -
初始化新建vue-cli项目,用本地ip预览的方法
新建的vue-cli项目,不想使用http://localhost:8080/#/,想用本地ip地址预览的2个方法:1、在json文件中,的dev项中:添加 --host 0.0.0.02、在config目录下的index.js的host改成0.0.0.0...原创 2019-01-15 10:59:26 · 279 阅读 · 0 评论 -
小程序监听watch代码
/** * 设置监听器 */const setWatcher = (data, watch, context) => { // 接收index.js传过来的data对象和watch对象 Object.keys(watch).forEach(v => { // 将watch对象内的key遍历 observe(data, v, watch[v], conte...原创 2019-03-06 17:12:25 · 957 阅读 · 0 评论 -
vue-cli 构建的项目中使用 Less
安装 less 和 less-loader ,在项目目录下运行如下命令npminstalllessless-loader --save-dev安装成功后,打开build/webpack.base.conf.js,在module.exports =的对象的 module.rules 后面添加一段:{test: /\.less$/,loader: "style-...转载 2019-04-08 17:12:49 · 205 阅读 · 0 评论 -
vue展示md文件
先安装插件,可以用来编辑md文件,和展示文件: npm install mavon-editor -S在全局中引用// 引入makrdown插件import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'Vue.use(mavonEditor)然后,你发现导入的md文件报错...原创 2019-06-28 10:00:51 · 7776 阅读 · 1 评论 -
router从入门到入门
动态路由匹配: // 动态路径参数 以冒号开头 { path: '/user/:id', component: User }/user/foo 和 /user/bar 都将映射到相同的路由。所以他们的id分别表示foo,bar对应的:this.$route.params.id=foo;this.$route.params.id=bar;一个“路径参数”使用冒号 : 标记。当...原创 2019-08-02 10:33:58 · 300 阅读 · 0 评论 -
axios封装
server/http.js:// 封装一下axios方法;import axios from 'axios' // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URLaxios.defaults.baseURL = 'http://172.28.194...原创 2019-08-19 16:23:18 · 203 阅读 · 0 评论 -
nuxt跨域
安装npm install @nuxtjs/axios @nuxtjs/proxy --savenuxt.conf文件:modules: [ '@nuxtjs/axios','@nuxtjs/proxy' ], axios: { proxy: true, // 表示开启代理 prefix: '/api', // 表示给请求url加个前缀 /api ...原创 2019-08-15 15:16:51 · 3074 阅读 · 0 评论 -
将vue-cli项目上传到github上且能成功预览
将vue-cli项目上传到github上:1、将config文件夹下的index.js文件中build的assetsPublicPath属性改为‘./’或者为空 ‘’(注意不要改成dev的路径)2、把gitignore里的dist删掉,否则无法上传3、打包 npm run build 4、把项目传上去5、点击项目里的Settings的github pages 选择master branch 于是就...原创 2018-04-13 16:17:50 · 1700 阅读 · 0 评论