Vue.js
文章平均质量分 70
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
美奇开发工作室
后端开发工程师,做一个喜欢分享技术的领域开发者!
展开
-
vue项目打包运行报错Uncaught TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed..
vue项目通过npm run build打包后,放到服务器上访问,页面一片空白,通过F12调试发现如下报错信息:项目使用了第三方的mui框架,vue3版本支持ES6,但目前很多浏览器还不支持ES6,因此vue在build打包时,会使用Babel转码器将ES6代码转为ES5代码,从而在现有环境中执行。Babel转码器在将js文件转码为ES5时,默认使用严格模式,而在严格模式下,为了安全起见是不能用caller,callee,arguments等属性的。因此mui.js转码会出问题,导致以上报错!1、在vue项原创 2022-06-15 14:22:07 · 3449 阅读 · 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 · 646 阅读 · 2 评论 -
vue.js数据加载完成前显示原代码{{代码}}的解决方法
一、分析原因:我们需要先了解html的加载顺序:解析html结构 → 加载外部脚本和样式表文件 → 解析并执行脚本代码 → 构造html dom模型 → 加载图片等外部文件 → 页面加载完毕结论:通过以上分析可知,当html加载的时候,就会把{{代码}} 当成文本加载出来,当vue初始化完成后,才会把{{代码}}解析成vue的语法。如果把引入vue.js的script放到head里面,那页面不会出现{{代码}},因为在body之前就把vue引入进来了,vue加载完成了。二、解决方法:.原创 2020-09-17 14:41:27 · 1609 阅读 · 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 · 675 阅读 · 0 评论 -
Vue.js生命周期函数
二、生命周期函数就是vue实例在某一个时间点会自动执行的函数从Vue的创建到运行、销毁总是伴随着各种各样的事件,这些事件统称为生命周期,生命周期钩子是别名。Vue的生命周期,也就是钩子函数;Vue一共有10个生命周期函数,原创 2020-03-09 11:07:13 · 2158 阅读 · 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 · 1191 阅读 · 0 评论 -
Vue.js使用components组件的简单案例(方法步骤)
一、组件(vue文件)的组成结构<!--页面模板--><template> <div> {{msg}}</div></template><!--JS 模块对象--><script> export default { data () { return {msg: 'vue模板...原创 2020-02-16 13:03:57 · 7331 阅读 · 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 · 721 阅读 · 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 · 1490 阅读 · 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 · 10184 阅读 · 0 评论 -
Vue.js中使用${}实现变量和字符串的拼接
第1步、在data中定义变量(我定义的是comment对象):<script> export default { data() { return { comment: { name: '张三', content: '哈哈哈,Vue.js挺好用的。' } } } }</script>第2步、在字符串中使用...原创 2019-04-15 14:24:08 · 19823 阅读 · 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 · 2289 阅读 · 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 · 22455 阅读 · 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 · 7594 阅读 · 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 · 2186 阅读 · 0 评论 -
Vue.js常用指令大全
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。一、内置指令v:text : //更新元素的 textContentv-html : //更新元素的 innerHTMLv-if : //如果为true, 当前标...原创 2019-04-12 14:04:44 · 286 阅读 · 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 · 20612 阅读 · 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 · 2909 阅读 · 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 · 10872 阅读 · 2 评论