天道酬勤,学无止境

vue

Vue3 能用到生产环境了吗?

最近,有不少朋友问我:“十三,看你写了几个 Vue3 的项目,你觉得 Vue3 能用到生产环境了吗?”结合自己的想法和尤大直播说的话,给一点建议。我不是一个专业前端哈,只能说一点点不成熟的个人建议哈,说错了的话大家多担待。Vue3 能用到生产环境了嘛?文中的观点都是我这个菜鸡的个人观点,不代表任何官方或者权威观点。Vue3 能否用到生产环境?答案是肯定能,而且一定能。但是,你如果问,是不是所有项目都要升级到 Vue3,这个就有待商榷了。目前,我自己也写了几个项目,也放在生产环境运行了。不过,不是公司的主要项目。因为我也还在学习和踩坑中。一个 Vue3 的商城实战项目 newbee-mall-vue3-app:开源地址如下:https://github.com/newbee-ltd/newbee-mall-vue3-apphttps://gitee.com/newbee-ltd/newbee-mall-vue3-app一个 Vue3+Element Plus 的后台管理系统项目 vue3-admin:开源地址如下:https://github.com/newbee-ltd/vue3-adminhttps://gitee.com/newbee-ltd/vue3-admin从开发到部署,也都非常顺利,运行了一段时间,也比较稳。Vue3 的方法抽离,对代码可复用性有很大的帮助

2021-06-02 12:07:31    分类:博客    vue   Vue3   前端   程序员有故事

用vue 写h5页面-摇一摇

  vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发。你的页面现在需要模拟微信的摇一摇动作。  项目环境: vue-cli 完成的一个项目  准备插件(包):依赖的第三方的插件(后续会完成如何写vue插件的方法)shake.js ,github地址: https://github.com/alexgibson/shake.js 我使用的github 项目要点赞(现在要养成习惯)  使用:在vue的一个组件里使用这个 插件。  接下来我们看这个插件提供的api,灵不灵照书行。  shake.js 到是没有提供一个完成的 vue 使用的demo api ,现在要尝试使用这个  安装包: npm install shake.js --save  使用包    基本上是按照api 文档上来搬的代码。我们在摇一摇的时候,处理发出声音并振动。  查看我们的摇一摇的结果:  因为在pc 上无法完成我们的摇一摇,所以要在手机上查看。在一个局域网下,发送可以访问自己电脑的ip给你的 小 phone,然后就是使劲的要吧。 顺便提供一个摇一摇的声音下载地址: http://sc.chinaz.com/yinxiao/  附件:本vue组件的完成内容  <template> <div class="hello"> <h1>{{ msg }}h1> <h2

2021-06-02 07:58:30    分类:博客    vue

我理解的vue生命周期

说些题外话,引出vue的生命周期。比如人出生到寿终正寝,这是人的一个生命周期。他会经历出生,婴儿时期,童年时期,少年时期,青年,中年,老年,到 end。然后,每个时期都会有一定的历史任务在等着去完成,比如童年的时候,我们要学会基本的说话走路等,少年时期要完成一定量的识字识数等,青年要参与社会工作等,老年养老等。最重要的时期就是在青年和中年的时期,因为这个时期我们要实现个人的历史价值,完成一定的社会任务等。vue实例的时候,也是经历一定的生命周期,这个生命周期会有对应的钩子函数。好了,下面就是我自己对生命周期的理解。这个图是vue 官网的一张解释生命周期的一张图,我们将会根据这个图来做下demo理解, Provide the img of vue's lifecircle. var app = new Vue({ el: '#app', data: { message : "vue life-circle" , }, beforeCreate: function () { console.log('beforeCreate==============='); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " +

2021-06-02 07:58:16    分类:博客    vue

手把手教你写vue插件并发布(二)

  前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果封装vue插件,如何测试vue插件,以及如何发布vue插件到npm。但是,这里开发测试到发布是分开在两个项目的,未免有些多余,今天的笔记讲的就是在上一篇的基础上,重新换了一下项目框架,讲开发测试,到打包发布一个完整的项目,这个项目欢迎大家测试使用,一个基于vue上传文件的一个插件,能够显示上传的速度和进度,如果是图片的话,也可以显示上传预览,有bug即时反馈哦!github 地址: https://github.com/adouwt/vue-upload1.项目架构目录: 这里采用的是vue-cli 脚手架,版本是2.**,vue-cli 3.0 已经出来有一段了。今天暂不用3.0 的,回头会详细说上3.0的打包使用。项目目录如下: 这个项目结构直接用 vue init webapck vue-upload ,脚手架生的模版,大架构我基本没动,添加了一点自己的配置文件和新加了自己的文件夹。如下:2.打包插件源码的配置文件var path = require('path')var webpack = require('webpack') module.exports = {

2021-06-02 07:57:46    分类:博客    vue

vue的过滤器filter

前记:   排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度。vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍:某个filter.js// 限制汉字的个数export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => { /* eslint-disable */ let r = /[^\x00-\xff]/g // 双字节正则 let m if (str.replace(r, '**').length > length) { m = Math.floor(length / 2) for (let i = m, l = str.length; i < l; i++) { if (str.substr(0, i).replace(r, '**').length >= length) { return str.substr(0, i) + sufix } } } return str }) 然后在某一个组件中引用 import { limitWordLength } from '../filter.js'使用:{{news

2021-06-02 07:57:31    分类:博客    vue   filter

vue 双向数据绑定的实现学习(一)

前言:本系列学习笔记从以下几个点展开什么是双向数据绑定双向数据绑定的好处怎么实现双向数据绑定实现双向数据数据绑定需要哪些知识点数据劫持发布订阅模式 先看看我们要实现的目标是什么,如下动图:0、什么是双向数据绑定  单向数据绑定:把Model 绑定到View上,当我们用js修改模型 Model 时候,视图View上对应的内容也会改动,这就是 数据动,页面动 。  双向数据绑定:简言之 数据动 页面动,页面动,数据动, 典型的应用就是在做表单时候,输入框的内容改动后,跟该输入框的value 的值改动。  看vue 官网上的这个V-model 的演示案例: 1、双向数据绑定的好处  要说出这个好处的时候,也只有在实际场景中才能对应的显示出来。比如我们需要实时显示数据,我们一边说话,一边实时显示我们说的话的文字内容,等等。这让我想起了去年参加云栖大会,台上的大佬一边说话,下面的字幕实时更新。(当然实现这个技术有很多技术点,我们不讨论这个内容,小编也才疏学浅,搞不懂)以上的都是废话,我们直接看看怎么实现这个双向数据绑定。一、实现原理  Vue实现双向数据绑定的原理:数据劫持 + 发布订阅模式(有的也称为观察者模式)  数据劫持的核心技术: Object.defineProperty()  **vue 3.0 已经用的不是这个技术了,采用是 原生的 Proxy,据说速度能够提升100%

2021-06-02 07:57:21    分类:博客    vue

vue 双向数据绑定的实现学习(二)- 监听器的实现

提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 发布订阅者模式(观察者),下面讲的就是数据劫持在代码中的具体实现。1.先看如何调用  new一个对象,传入我们的参数,这个Myvue ,做了啥?  上面看到了在实例化一个Myvue 对象的时候,会执行init方法, init 方法做了两个事,调用了observer 方法,和 实例化调用了 compile 方法。 到这里我们就明白了,实例化一个Myvue后,我们要做的就是监听数据变化和编译模板 。上面Object.key() 方法,实例化时传入的data里面对应的变量缓存到 Myvue 对象的 $prop上,这样方便在后续处理数据。怎么个方便法呢!...2.observer 的实现  observer ,模式里面的角色定位 他是一个发布者,也可以理解为是一个观察者function observer (data) { if(!data || typeof data !== 'object') { return; } Object.keys(data).forEach(key => { // 对每个属性监听处理 defineReactive(data, key, data[key]); }) }  defineReactivefunction defineReactive (data,key

2021-06-02 07:56:46    分类:博客    vue

写给后端同学的vue

文章内,图片很多,占据了一定的篇幅。有写后台的哥们说,vue怎么写,怎么新建一个vue项目,然后我想了想,觉得写一个面向后台同学的vue教程也是有必要,文章中几乎没讲css和vue细节处理的相关内容,减少接受不必要的信息量,降低vue的学习成本。如果有不清楚的地方,可以私信联系我,有不对不合理之处,敬请指出!我是迩伶贰!安装vue-cli 脚手架1. 安装nodejs环境下载地址: (nodejs)[https://nodejs.org/zh-cn/download/]安装(略)2. 安装vue-cli系列工具npm install -g @vue/clinpm install -g @vue/cli-service-global3. vue create hello-world // 用vue 初始化hello-world 项目3.1 vue create hello-world3.2 跑起项目 npm run serve很多后端同学的用的编辑器是 idea, 我这里也用idea演示这个,细节之处不是本文的重点,可查看 idea创建vue项目打开刚才初始化后的项目配置启动脚本,相对于配置java 的脚本要简单的多启动:访问地址3.3 项目目录介绍:node_modules , 项目依赖的模块包,我们需要的模块包都会下载到这个目录下,我们开发时不用管public 静态文件放的位置

2021-06-02 07:56:38    分类:博客    vue

vue 不常见操作

对 v-html 的扩展操作, 问题产生背景, 在vue 项目中,用v-html渲染 html字符串,这里面包括a 标签等内容,因为某种需求,a 的默认跳转不符合要求,要经过自己定义的方法跳转。原来的a : eeee处理后的:正则匹配:export function handel (str) { let imageUrl = str var reg1 = /<a.*?href?\s*=\s*['|"]+?(.*?)['|"]+?/g; const re = /\/files\/courses\/[a-zA-Z0-9]+\/sections\/[a-zA-Z0-9]+\/content\/images\/[a-zA-Z0-9]+/g if (typeof str === 'string') { imageUrl = str.replace(re, function (value) { return getDomain() + value }) .replace(reg1, function (url) { let newUrl = url.split('href=')[1].replace(/"/g, ''); // 此处最挫,正则没搞好 // var event = eval() return `<a href="javascript:goto('${newUrl}')"` })

2021-06-02 07:56:34    分类:博客    vue

vue的常用组件方法应用

项目技术:webpack + vue + element(mint-ui, etc...) + axois (vue-resource) + less-loader+ ... vue的操作的方法案例:1.数组数据还未获取到,做出预加载的动画<el-carousel :interval="3000" type="card" height="200px" class="common-mt-md"> <el-carousel-item v-for="item in movieArr" :key="item.id" class="text-center"> <img v-bind:src="item.images.small" alt="电影封面" class="ticket-index-movie-img"> el-carousel-item>// 实际显示的内容-跑马灯 <div v-if="!movieArr.length" class="ticket-index-movie-loading"> <span class="el-icon-loading ">span> div>// 当 movirArr的数组为空的时候,做出的预加载 loading el-carousel>2. 按钮状态的判断,按钮能不能点的问题<p v-if="!multipleSelection.length">

2021-06-02 07:55:32    分类:博客    vue