vue | 易学教程

vue + element 文件上传及校验

阅读更多关于 vue + element 文件上传及校验

上传文件后台需要 formate 进行上传，中间遇到一点小插曲先贴大佬地址 https://www.cnblogs.com/fmixue/p/9968910.html 发现不用自己定义请求方式，和修改请求头里面的content-type:"multipart/form-data" 直接在action里写请求地址，element貌似默认是post请求，并且默认转为了FormData方式 on-success 事件 handleAvatarSuccess（res,file,fileList）{ res是请求回来的数据 file是文件信息 fileList是请求文件列表 } 文件上传验证首先在el-form-item 绑定好prop="imgUpload" 并且 ref="xxx" （ref用于上传成功文件后清除验证） //前提form表单要绑定rules：data中 rules:{ imgUpload: [ { required:true, validator:validateFileUrl, trigger:["change"] } ] } //定义校验规则 let validateFileUrl = (rule, value, callback) => { if(this.$refs.imgUpload){ //this.$refs.imgUpload

Vue——过滤器

阅读更多关于 Vue——过滤器

　　（1）Vue.js允许自定义过滤器，而过滤器用在两个地方：双花括号插值 v-bind表达式　　（2）过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。　　（3）过滤器是 JavaScript 函数。　　（4）过滤器函数总接收表达式的值作为第一个参数，并且过滤器还可以接受额外的参数，例如：　　{{ message | filter('arg1', 'arg2', 'arg3') }} 　　在上述中，filter过滤器其实是有四个参数的，第一个参数是message，arg1是第二个参数，arg2是第三个参数，arg3是第四个参数。来源： https://www.cnblogs.com/bien94/p/12517480.html

vue中使用：class 动态绑定

阅读更多关于 vue中使用：class 动态绑定

<template> <div class="page"> <a :href="'http://www.baidu.com/'">百度</a>  <div :class="'demo1 demo2'">你好</div>  <div :class="classA">哈哈</div>  <div :class = "classB ? 'class_1':'class_2'" @click="text">三目运算</div>  <div :class="{'class1':isA, 'class2':isB}">对象绑定</div> <div :class = "[sz1,sz2]">数组绑定</div> <div :class="[A,objectClass]">数组中包含对象</div> </div> </template> <script> export default { data() { return { time:10, classA:'class-a', classB: false,

vue v-on事件监听

阅读更多关于 vue v-on事件监听

通过点击按钮，实现背景色的循环变换初始为红色，点击一次，变成蓝色，第二次变成绿色，再次点击，又变为红色这里用到vue的事件监听 v-on:xxx 事件写在methods里面代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue-test3</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <style> .red{ background: red; } .blue{ background: blue; } .green{ background: green; } </style> </head> <body> <div id="test"> <button v-on:click="clickFun()">点击</button> <p :class="classAttr[index]">改变背景色</p> </div

vue.js与react.js相比较的优势

阅读更多关于 vue.js与react.js相比较的优势

vue.js的简介 vue.js是一个javascript mvvm库，它是以数据驱动和组件化的思想构建的。我们平时多用js去操作dom，vue.js则是使用了数据绑定驱动来操作dom的，也就是说创建了view和model之间的绑定后，当model数据层发生变化时，view的dom就会发生相应变化。 mvvm即是model-view-viewmodel，model和view之间的衔接交互都是通过viewmodel来实现的。viewmodel就是创建一个vue实例，vue实例是作用于某一个dom元素上的。 DOM Listeners和Data Bindings是实现双向绑定的关键。从View层看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model层看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。与 React 框架相比它的优势 react和vue的相似之处： 1.使用虚拟dom 2.提供了响应式和组件化的视图组件 3.关注核心库，伴随于此，有配套的路由和负责处理全局状态管理的库比较之处： #性能方面 1.渲染性能渲染用户界面的时候，dom的操作成本是最高的，那为了尽可能的减少对dom的操作，Vue和React都利用虚拟DOM来实现这一点

几个关于Vue的面试题

阅读更多关于几个关于Vue的面试题

1、Vue的生命周期 beforeCreate （创建前）在数据观测和初始化事件还未开始 created （创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来 beforeMount （载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。 mounted （载入后）在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。 beforeUpdate （更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。 updated （更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。 beforeDestroy （销毁前）在实例销毁之前调用。实例仍然完全可用。 destroyed （销毁后）在实例销毁之后调用。调用后

vue cli3---elementUI 按需导入（babel.config.js）

阅读更多关于 vue cli3---elementUI 按需导入（babel.config.js）

在使用vue cli3脚手架时，需要按需导入element-ui 组件，步骤如下： 1. 安装element-ui npm i element-ui -S 2. 按需导入需要安装，babel-plugin-component npm install babel-plugin-component -D 3.官网提供的是，将 .babelrc 修改为： { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } 注意：项目中没有.babelrc文件，无需新建.babelrc文件，直接可以在babel.config.js中配置即可，如下： module.exports = { presets: [ '@vue/app', ["@babel/preset-env", { "modules": false }] ], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } 这里需要注意：

技术栈的沉淀

阅读更多关于技术栈的沉淀

我也是一个经历过柴米油盐酱醋茶、尝过酸甜苦辣咸的前端程序员。知道前端的东西入门简单，有深度却很难；表似好看无比的应用，其实背后逻辑复杂，然而要想成长的更快，一定要学会站在巨人的肩膀上，“学以师技以自长”。所以一些经验非常可贵，在此我想和大家分享一下我的经验。我是一个从jquery，zepto，到vue的比较常规的技术栈过渡过程。本文涉及面包括：jquery处理模板的办法，高效处理json数据，如何有效命名，如何搭建合适的web服务，如何做出h合理炫酷的动画，vue组件处理的方式，同时覆盖如何使用github管理你的项目和文章 1、jQuery.js中的tmpl大法在当初没有vue、react等mvvm框架的时候，这些都是非常牛逼使用的东西 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery-tmpl</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.tmpl.js"></script> </head> <style> .left-box { float: left; width: 50%; } .right-box

vue显示隐藏 v-if v-else v-show

阅读更多关于 vue显示隐藏 v-if v-else v-show

vue可以通过v-if设置元素的显示隐藏还可以配合v-else使用配合点击事件来演示一下点击按钮，按钮上文字变化，内容显示，再次点击，按钮上文字内容变化，内容隐藏代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue-test3</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="test"> <button @click="clickFun()">{{text}}</button> <p v-if="show"> 显示/隐藏 </p> </div> <script> const vm = new Vue({ el: '#test', data: { show: true, text: '点击隐藏', }, methods: { clickFun() { //

vue 计数器组件封装

阅读更多关于 vue 计数器组件封装

模仿element-ui计数器封装的组件子组件 wmmInput.vue < template > < div > < button class = "buttonStyle" @click = "reduce" > - < / button > < input class = "inputStyle" type = "text" : disabled = "inputNumberDisabled" v - model = "currentValue" @click = "handleChange()" / > < button class = "buttonStyle" @click = "add" > + < / button > < / div > < / template > < script > export default { data ( ) { return { currentValue : 0 } ; } , props : { value : { type : Number , default : 0 } , step : { type : Number , default : 1 } , disabled : { type : Boolean , default : false } } , computed : { inputNumberDisabled (

订阅 vue