VUE
文章平均质量分 50
Sunshine0508
这个作者很懒,什么都没留下…
展开
-
Vue中使用eslint常用规则
module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/recommended", "plugin:vue/vue3-recommended", "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", ], parserOptions:.原创 2021-11-09 10:26:22 · 3453 阅读 · 0 评论 -
Vue常见面试题汇总
一. 请谈谈Vue中的MVVM模式MVVM全称是Model-View-ViewModelVue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。 ViewModel是Vue的核心,它是Vue的一个实例。Vue实例时作用域某个HTML元素上的这个HTML元素可以是body,也可以是某个id所指代的元素。DOMLi...原创 2021-11-04 16:20:08 · 288 阅读 · 0 评论 -
VUE——element checkbox(全选,半选,全不选)
官网实例:<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 15px 0;"></div>...原创 2020-05-08 13:42:21 · 3485 阅读 · 0 评论 -
Vue——Observer的用处
在state.js的initData()函数中,使用的是observe()方法来为数据对象绑定一个Observer对象,Observer对象执行defineReactive()方法为数据对象设置 setter 和 getter。而在initProps()函数中,通过遍历props选项直接对数据执行了defineReactive()方法来设置 setter 和 gett...原创 2020-02-26 20:55:57 · 953 阅读 · 0 评论 -
Vue问题——webpack `Invalid Host/Origin header`
怎么解决webpackInvalid Host/Origin header问题问题原因:这是webpack本身出于安全考虑,因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是,在我们的开发环境下,可以禁用掉disableHostCheck这一配置项。webpack相关版本package.json "html-webpack-plugin": "^3.2.0"...原创 2019-06-19 17:34:28 · 1000 阅读 · 0 评论 -
vue——webpack针对发布新的版本有浏览器缓存的解决方法
路径中使用 hash,每次构建时会有一个不同 hash 值,避免发布新版本时线上使用浏览器缓存module.exports = { // ... output: { filename: '[name].js', path: __dirname + '/dist/[hash]', },}...翻译 2019-06-20 15:34:54 · 2219 阅读 · 0 评论 -
vue-vuelidate框架自定义验证规则
Vuelidate是一款简单轻量级的基于模块的Vue.js验证插件。安装npm install vuelidate --savenpm i -S vuelidate //简写导入到main.js中import Vue from 'vue'import Vuelidate from 'vuelidate'Vue.use(Vuelidate)使用其实使用起来真的很方...翻译 2019-06-21 10:42:33 · 1682 阅读 · 0 评论 -
vue+Typescript ——插件vue-class-component、vue-property-decorator的使用总结
安装npm install vue-class-component vue-property-decorator --save-dev其次,咱来说说它们的区别与联系:vue-property-decorator社区出品;vue-class-component官方出品vue-class-component 是 vue 的官方库,作用是用类的方式编写组件,提供了Vue、Compone...翻译 2019-06-21 12:32:30 · 4524 阅读 · 0 评论 -
vue——vue2-filters
安装npm install vue2-filters在main.js里引入import Vue from 'vue'import Vue2Filters from 'vue2-filters'Vue.use(Vue2Filters)要在组件中使用预定义的方法之一(如limitby、filterby、find或orderby),需要将vue2filters.mixin添加到...原创 2019-06-21 13:45:34 · 889 阅读 · 0 评论 -
vue——vueRouter 的params和query传参的区别与使用
$router和$route的区别//$router : 是路由操作对象,只写对象//$route : 路由信息对象,只读对象//操作 路由跳转this.$router.push({ name:'hello', params:{ name:'word', age:'11' }})//读取 路由参数接收t...翻译 2019-06-12 13:40:50 · 953 阅读 · 0 评论 -
vue——图片懒加载
原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。1、安装插件: npm install vue-lazyload -...原创 2019-07-31 10:34:28 · 1256 阅读 · 0 评论 -
vue——router解决首次加载资源过多导致的速度缓慢的问题(懒加载)
懒加载:延迟加载,即在需要的时候进行加载,随用随载。像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。简单的说就是:进入首页不用一次加载...原创 2019-08-05 14:39:31 · 1587 阅读 · 0 评论 -
VSCode快速生成vue模板
添加用户代码片段打开 vsocde 的 首选项 > 用户代码片段 ,输入vue,选择代码片段文件为 vue.json。输入以下内容。{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>$0</div>", "</templ...原创 2019-09-05 17:15:24 · 436 阅读 · 1 评论 -
vue——三种常见的传值方式,子传父、父传子、同级传值
父组件向子组件传值父组件<template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></chi...原创 2019-05-30 11:26:39 · 5100 阅读 · 1 评论 -
axios post请求参数拼接
post 拼接参数修改headers 添加'Content-Type':'application/x-www-form-urlencoded'axios({ method: 'post', url: '/user', data: { firstName: '123', lastName: '234' }, headers:{ 'Content-T...原创 2019-05-08 14:36:35 · 5404 阅读 · 0 评论 -
vue——echarts更换主题
1、安装echarts, npm i echarts -s2、在main.js里引入echarts主题的js,一般在 node_modules---echarts---theme---macarons.js。 theme里边有各种各样的主题,任意选一种,这里我选的是macarons。引入:import 'echarts/theme/macarons.js'3、在echar...原创 2019-05-10 15:32:21 · 5856 阅读 · 1 评论 -
Vue问题2:vue的Element UI的表格table列时间格式化
有时候后台传过来的时间格式是2018-08-31 00:00:00想转化成yyyy-MM-dd在表格里加上:formatter="dateFormat"然后在methods方法里写上转换时间的方法dateFormat: function(row, column){ var date = row[column.property]; console.log(date) i...原创 2018-08-31 09:53:10 · 8937 阅读 · 6 评论 -
vue 的编辑跟新增引用外部的组件
首先准备两个组件:一个表单页面,一个新增与编辑共用的弹框页面表单页面调用新增与编辑的页面(groupId是编辑弹框的Id;currentId默认为-1;dialogTitle是弹框的标题)写一个closeDialog的方法在子组件里调用closeDialog的方法用$emit ...原创 2018-09-05 10:31:17 · 1467 阅读 · 0 评论 -
对ElementUI的表格组件进行封装
1、进行准备工作为了方便使用,在componts里创建index.jsimport TmTable from './vue/table.vue';export TmTable;为了方便引用和路径的维护,首先在build文件夹下的webpack.base.conf.js对路径进行修改。这样就可以在vue文件中对组件进行引用import TmTable f...原创 2018-12-24 17:05:18 · 3976 阅读 · 1 评论 -
VUE+ElementUI实现table 行上下移动的效果
<div><el-table :data="URLModles" :show-header="false" highlight-current-row style="width: 100%" @selection-change="handleSelectionChange"> <原创 2019-03-11 11:10:05 · 10952 阅读 · 7 评论 -
VUE+ElementUI 校验表单的输入框是否含有特殊字符
校验方法checkSpecialKey(str) { var specialKey = "[`~!#$^&*()=|{}':;'\\[\\].<>/?~!#¥……&*()——|{}【】‘;:”“'。,、?]‘'"; for (var i = 0; i < str.length; i++) { if (specialKey.indexOf(st...原创 2019-03-11 15:12:53 · 9522 阅读 · 3 评论 -
bat 直接运行VUE的项目命令
cmd /k "cd /d D:\apple&&cnpm run dev"翻译 2019-03-12 17:27:40 · 2570 阅读 · 1 评论 -
vue自定义全局变量和全局函数
封装方法1、创建common_js.jsexports.install = function (Vue , options){ Vue.prototype.changeData = function(){ console.log("执行成功"); }}2、在main.js里引用并使用import common_js from 'common_j...原创 2019-04-24 17:27:51 · 1090 阅读 · 0 评论 -
VUE +ElementUI 表格展开每次只展开一行
1、table 部分:row-key='getRowKeys':expand-row-keys="expands"@expand-change="expandSelect"2、column 部分 :参见官方示例<el-table-column type="expand" > <template slot-scope="props"> ...翻译 2019-05-08 11:47:40 · 4643 阅读 · 1 评论 -
vue——封装webSocket协议
1、在项目中的src文件夹下的util文件夹中创建socket.js文件var websock = nullvar globalCallback = null // 初始化websocketfunction initWebSocket () { // ws地址 -->这里是你的请求路径 var ws= 'ws://www.yourdomain.con/ws' we...原创 2019-05-13 18:00:31 · 2813 阅读 · 3 评论 -
vue——@click的事件命令以及修饰符
1、@click.stop 阻止事件冒泡//只弹出“noclick”<div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> ...原创 2019-05-09 11:22:57 · 11512 阅读 · 0 评论 -
vue——使用v-bind:is 切换组件的时候传数据
创建一个组件<div id="exp"> <tab-btn v-for="tab in tabs" :key="tab.id" :tab="tab"> </tab-btn> <keep-alive> <component v-bind:is="currentTabComponent" :posts=...原创 2019-05-09 16:13:24 · 2502 阅读 · 0 评论 -
vue——通过axios调用elasticsearch的数据
1、在文件夹config /index.js里配置代理路径//http://localhost:9200 是安装的elasticsearch 访问地址proxyTable: { '/scotch.io-tutorial':{ target: 'http://localhost:9200', changeOrigin: true }},2、配置API请求...原创 2019-05-10 11:22:20 · 3402 阅读 · 2 评论 -
Vue问题1:TypeError:date.getHours is not a function
再用vue的时间控件的时候遇到了如下的问题:解决方法:在<el-date-picker></el-date-picker>时间控件加上value-format="yyyy-MM-dd"以防出现date.getTimes is not a function以下的applyTime设置为null时间控件输入框的校验的type=“date”去除;...原创 2018-06-25 13:32:17 · 18834 阅读 · 2 评论