关注
分享
文章平均质量分 70
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
美奇开发工作室
后端开发工程师，做一个喜欢分享技术的领域开发者！
展开
-
vue项目打包运行报错Uncaught TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed..
vue项目通过npm run build打包后，放到服务器上访问，页面一片空白，通过Ｆ１２调试发现如下报错信息：项目使用了第三方的ｍｕｉ框架，ｖｕｅ３版本支持ＥＳ６,但目前很多浏览器还不支持ＥＳ６，因此ｖｕｅ在build打包时，会使用Babel转码器将ES6代码转为ES5代码，从而在现有环境中执行。Babel转码器在将js文件转码为ES5时，默认使用严格模式，而在严格模式下，为了安全起见是不能用caller,callee,arguments等属性的。因此ｍｕｉ．ｊｓ转码会出问题，导致以上报错！１、在ｖｕｅ项原创 2022-06-15 14:22:07 · 3371 阅读 · 0 评论 -
Thinkphp+Vue.js+element-ui框架实现文件拖拽上传功能
效果图：html部分：<form class="layui-form" action="这里填写后端接口地址" method="post" enctype="multipart/form-data"> <div class="layui-form-item"> <label class="layui-form-label">上传收款码：</label> <div class="layui-input-line"> .原创 2021-10-09 16:37:06 · 630 阅读 · 2 评论 -
vue.js数据加载完成前显示原代码{{代码}}的解决方法
一、分析原因：我们需要先了解html的加载顺序：解析html结构 → 加载外部脚本和样式表文件 → 解析并执行脚本代码 → 构造html dom模型 → 加载图片等外部文件 → 页面加载完毕结论：通过以上分析可知，当html加载的时候，就会把{{代码}} 当成文本加载出来，当vue初始化完成后，才会把{{代码}}解析成vue的语法。如果把引入vue.js的script放到head里面，那页面不会出现{{代码}}，因为在body之前就把vue引入进来了，vue加载完成了。二、解决方法：.原创 2020-09-17 14:41:27 · 1580 阅读 · 3 评论 -
Vue.js基础知识点（一）：绑定背景图片，给v-for循环标签自身属性添加属性值，php将$集合变量赋值给Vue.js
小白第一次接触Vue.js，使用v-for设置背景图片，同时有几个知识点包含在这个demo里,先上代码：<?phpheader("Content-type:text/html;charset=utf-8");//从数据库里查询所有房间select_query("fn_room", '*');while ($con = db_fetch_array()) { $rooms[] = $con;}?><!DOCTYPE html><html>&l原创 2020-07-18 16:30:25 · 663 阅读 · 0 评论 -
Vue.js生命周期函数
二、生命周期函数就是vue实例在某一个时间点会自动执行的函数从Vue的创建到运行、销毁总是伴随着各种各样的事件，这些事件统称为生命周期，生命周期钩子是别名。Vue的生命周期，也就是钩子函数；Vue一共有10个生命周期函数，原创 2020-03-09 11:07:13 · 2125 阅读 · 1 评论 -
Vue.js使用localStorage保存读取数据，并实现深度监视功能（同理可用于数据库保存读取）
一、操作localStorage的工具类 storageUtils.js/* * 向localStorage中存储数据的工具模块 * （export表示向外暴露方法） */export default { /* * 读取数据 * key：数据对象的key */ readData (key) { return JSON.parse(localStora...原创 2020-02-16 17:53:32 · 1176 阅读 · 0 评论 -
Vue.js使用components组件的简单案例（方法步骤）
一、组件（vue文件）的组成结构<!--页面模板--><template> <div> {{msg}}</div></template><!--JS 模块对象--><script> export default { data () { return {msg: 'vue模板...原创 2020-02-16 13:03:57 · 7316 阅读 · 0 评论 -
vue.js常用的UI组件库
Mint UI应用场景：wap手机端，Html5网站主页：http://mint-ui.github.io/#!/zh-cn 说明：饿了么开源的基于 vue 的移动端 UI 组件库Elment应用场景：PC电脑端，web网站主页：http://element-cn.eleme.io/#/zh-CN 说明：饿了么开源的基于 vue 的 PC 端 UI 组件库...原创 2020-02-15 18:57:12 · 709 阅读 · 0 评论 -
浅谈Vue.js的MVVM模式？
一、什么是MVVM？ MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js 是一个提供了MVVM风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM...原创 2020-02-15 10:08:03 · 1476 阅读 · 0 评论 -
vue-admin-template安装失败，提示【'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件】的解决办法
遇到【'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件】这个问题，很可能是网络原因导致vue-cli-service没有安装成功！解决方案：删除node_modules重新安装（建议淘宝镜像安装cnpm install），步骤如下：1、删除掉vue-admin-template目录下的node_modules文件夹2、然后使用淘宝镜像安装...原创 2019-07-21 13:43:32 · 10137 阅读 · 0 评论 -
Vue.js中使用${}实现变量和字符串的拼接
第1步、在data中定义变量（我定义的是comment对象）：<script> export default { data() { return { comment: { name: '张三', content: '哈哈哈，Vue.js挺好用的。' } } } }</script>第2步、在字符串中使用...原创 2019-04-15 14:24:08 · 19768 阅读 · 1 评论 -
解决vue-cli项目build打包后，index.html首页空白问题
一、遇到问题我们将build打包好的dist文件夹放到 tomcat 的 webapps 文件夹目录下,然后通过http://localhost:8088/dist/进行访问，然后发现显示的是一个空白页，一些静态资源都是 404。如下图：二、解决方法1、通过F12 调试中看出来都是绝对路径的原因，我们先来查看index.html 页面的源代码，如下图：解析：inde...原创 2019-04-14 14:09:26 · 2271 阅读 · 0 评论 -
vue-cli 脚手架的完整安装教程
一、 node.js安装1、如果不确定自己是否安装了node,可以在cmd命令行工具内执行： node -v （检查一下 版本）；我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息。2、如果 执行结果显示： xx 不是内部命令，说明你还没有安装node , node下载地址：http://nodejs.cn/do...原创 2019-04-14 11:28:26 · 22377 阅读 · 1 评论 -
vue-cli中Eslint的rules规则设置和说明（.eslintrc.js配置）
下面以vue-cli脚手架项目来举例说明,进入项目打开.eslintrc.js配置文件，如下图：一、常用配置rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': proces...原创 2019-04-16 20:59:34 · 7541 阅读 · 1 评论 -
Vue.js使用filter自定义过滤器对时间进行格式化（javascript原生写法）
一、自定义date.js/** * 对Date的扩展，将 Date 转化为指定格式的String * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) * eg: ...原创 2019-04-09 18:26:56 · 2170 阅读 · 0 评论 -
Vue.js常用指令大全
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。一、内置指令v:text : //更新元素的 textContentv-html : //更新元素的 innerHTMLv-if : //如果为true, 当前标...原创 2019-04-12 14:04:44 · 275 阅读 · 0 评论 -
Vue.js中splice()方法实现对数组进行增删改的操作
语法结构：splice(index,len,[item])1、可以用来添加/删除/替换数组内某一个或者几个值2、该方法会改变原始数组index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空一、删除：index表示要删除的数组下标，len长度为1（len设置1，如果为0，则数组不变），item为空表示...原创 2019-04-04 19:28:08 · 20414 阅读 · 0 评论 -
Vue.js中字符串、对象、数组的表示方法
1、字符串是双大括号 {{ }}2、对象是单大括号 { }3、数组是单中括号 [ ]<div id="app"> <!--字符串--> <p :class="a">{{str}}</p> <!--对象--> <p :class="{aClass:isA,bClass:isB}">...原创 2019-04-04 17:32:27 · 2873 阅读 · 0 评论 -
Vue.js中常用的指令缩写 【v-bind缩写为：】【v-on缩写为@】
Vue.js为两个最为常用的指令提供了特别的缩写：一、强制绑定→v-bind缩写 ：<div id="app"> <!--完整语法--> <a v-bind:href="url">百度</a> <img v-bind:src="imgUrl" /> <!--缩写-->...原创 2019-04-04 12:17:19 · 10838 阅读 · 2 评论