vue
文章平均质量分 56
奥吼吼~~
这个作者很懒,什么都没留下…
展开
-
webpack常用的打包配置
webpack打包webpack在项目根目录创建一个webpack.config.js文件webpack.config.js主要有五个属性module.exports = { entry:"", output:{ filename:"", // 输出的文件名 path:"" // 文件输出的位置 }, module:{ rules:{ text:'正则表达式', // 处理匹配到的文件原创 2021-07-27 09:08:51 · 1953 阅读 · 2 评论 -
vue中.sync描述符
sync是语法糖 :title.sync 有两步 1:title="title" 2 @update:title="val => title = val"方便子组件修改父组件的属性<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div id..原创 2021-02-06 16:27:58 · 112 阅读 · 0 评论 -
vue获取富文本中的图片链接
通过点击获取事件源对象来实现<div @click="getImg($event)" style="padding:15px;"> <div v-html="content"></div> <!-- content是富文本内容 --> </div><script>getImg($event) { let url = $event.target.currentSrc if (url) { co原创 2020-11-24 10:59:43 · 1438 阅读 · 0 评论 -
vue中使用svg和数字滚动器
<template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </s原创 2020-07-29 18:27:15 · 430 阅读 · 0 评论 -
vue中设置网页全屏
<template> <div> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> </div></template><script>import screenfull from 'screenfull'export default { name: 'Screenfull', da原创 2020-07-29 17:44:17 · 963 阅读 · 0 评论 -
使用element-ui中tree树状图
把所有的内容全部折叠原创 2020-06-11 14:55:54 · 2935 阅读 · 0 评论 -
vue动态绑定事件名和事件的写法
<template> <div id="app"> <div class="dynamic"> <button class="dynamic-item" v-for="(item,index) in list" :key="index" v-on:[eventName]="handleClick(item.doSome,index)" >我的是动态元素--{{i转载 2020-06-09 16:36:27 · 6938 阅读 · 0 评论 -
vue组件懒加载三种方式及区别
1、vue异步组件2、es6中import懒加载3、require.ensure()const Home = () => import(/*webpackChunkName:'home'*/'../components/home');const Home1 = ()=> import(/*webpackChunkName:'home'*/'../components/home1')const Login = r => require.ensure([],()=>r(req原创 2020-05-29 19:35:33 · 2230 阅读 · 0 评论 -
vue如何实现对新增数据进行监听
在对vue实例data中的数据进行操作时,因为vue是mvvm设计模式,vm层实现数据双向绑定,原理是Object,definePrototype(),而这个函数的触发是通过数据劫持( Observer)监听者实现的不难发现vue中数据不过是原始数据类型还是引入数据类型,vue对其都有设置监听,这个observer的是不是监听不到了呢?肯定监听不到,就像下面的下标为4的数据在数据发生变化是vue是监听不到的,所以这个数据不会实现的数据的双向绑定,但是vue有对这个整一个数组进行监听,所以当其他数据发生变原创 2020-05-21 17:53:32 · 3125 阅读 · 1 评论 -
android studio+hbuilderx(5+app)+vue打包成手机app
1、准备一个vue项目(项目中的文件名称不能有中文)2、下载hbuilderx(app版)创建一个5+app的项目3、注册hbuilder账户 (发布是需要appid)需要hbuilderx账户4、把vue项目打包好的文件将原5+app中的内容替换调除了(manifest.json)5、配置manifest.json文件(建议去官方看文档 )这是我修改后项目结构和发布的按钮6、...原创 2020-05-08 16:22:00 · 2675 阅读 · 0 评论 -
vue中抑制eslint报错的方法
在vue中import引入的对象 ,不一定是组件,有可能是一个js对象像这样/* eslint-disable */ import AMap from 'AMap' // 引入高德地图原创 2020-04-25 13:22:37 · 2283 阅读 · 4 评论 -
vue-cli4.1.1配置jquery和bootstrap环境
一、先打开vue ui指令vue ui二、安装jQuery依赖三、检测环境四、配置文件在.eslintrc.js文件中的env属性中添加jquery:true,六、在根目录创建vue.config.js文件把下面的内容写放进去const webpack = require('webpack')module.exports = { configureWe...原创 2020-03-10 20:26:00 · 340 阅读 · 0 评论 -
nodejs中万能表头设置
import express from 'express'var app = express();app.all('*', (req, res, next) => { console.log(req.headers) const { origin, Origin, referer, Referer }...原创 2019-12-11 22:36:18 · 434 阅读 · 0 评论 -
koa中使用session和redis缓存
下载插件npm i koa-generic-session --savenpm i koa-redies --save用就行不要去理解const session = require('koa-generic-session')const Redis = require('koa-redis')const Store = new Redis().clientapp.keys = [...原创 2019-11-29 09:44:47 · 1936 阅读 · 0 评论 -
koa2设置头
设置响应头:ctx.set(‘Content-Type’, ‘application/zip’)添加请求头:ctx.append(‘userName’,‘111111’);原创 2019-11-28 09:38:52 · 3093 阅读 · 0 评论 -
vuex的使用
vuex是vue用来管理组件状态的插件在一个项目目录的终端输入npm add vuex // 将vuex插件安装到当前的vue项目main.jsimport Vuex from 'vuex'; // 加载vuexVue.use(Vuex); // 将Vuex挂载到Vue项目中const store = new Vuex.Store({ // vuex实例化 state:{ /...原创 2019-11-22 11:44:54 · 189 阅读 · 0 评论 -
mintu Toast使用
https://mint-ui.github.io/docs/#/<template> <div> <h1>这是App组件</h1> <mt-button type="danger" disabled icon="more">default</mt-button> <mt-button t...原创 2019-11-20 00:33:11 · 192 阅读 · 0 评论 -
vue-cli 中 css样式无法加载时
如果像是这样的错误给在build文件下的webpack.base.conf.js中加上下面的代码即可{ test: /\.css$/, include: [ /src/,//表示在src目录下的css需要编译 '/node_modules/element-ui/lib/' //增加此项 ], loader: 'style-loader!css-loader'}...原创 2019-11-19 13:30:09 · 2743 阅读 · 0 评论 -
应用程序池
这是微软的一个全新概念:应用程序池是将一个或多个应用程序链接到一个或多个工作进程集合的配置。因为应用程序池中的应用程序与其他应用程序被工作进程边界分隔,所以某个应用程序池中的应用程序不会受到其他应用程序池中应用程序所产生的问题的影响。...原创 2019-11-19 11:11:55 · 198 阅读 · 0 评论 -
应用程序域
一.应用程序域(AppDomain)的基本概念net可执行程序集(.exe)在运行时都寄宿在操作系统进程中,同时程序集又需要运行在托管环境中,但操作系统进程只提供基本的服务,并不了解托管代码。因此就需要有一个中介,既能为程序集提供托管环境,又能运行在非托管的操作系统进程之内,这个中介就是应用程序域。简单来说,应用程序域只是允许它所加载的程序集访问由.net公共语言进行时所提供的服务。可以将应用...原创 2019-11-19 10:44:38 · 303 阅读 · 0 评论 -
Vue两个同级组件传值
Vue组件之间是有联系的,避免不了组件之间要互相传值,父给子使用v-bind绑定自定义属性和使用props来接受子给父使用@自定义事件='函数' this.$emit('自定义事件','要发送的内容'),子组件通过$emit来触发父组件的函数来实现但是两个同级组件之间这么互相传值<div id='app'> <children1></children1>...原创 2019-11-07 09:55:40 · 4967 阅读 · 3 评论 -
vue列表动画的原理自我理解
有什么效果复制粘贴出去试试<style> .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 1s; }...原创 2019-11-06 23:12:02 · 146 阅读 · 0 评论 -
关于vue动画没有效果的解决
有时使用动画时,动画可能动都不动 这时添加 el.offsetHeight或许可以解决问题<div id="app"> <input type="button" value="加入到购物车" @click='flag=!flag'> <transition @before-enter='beforeEnter' @enter='enter' @aft...原创 2019-11-06 22:59:31 · 1765 阅读 · 0 评论 -
vue组件的创建的3种方式
一Vue.component('comp',{ template:`内容`})var temp1 = { template:`内容`};Vue.component('comp',temp1)二Vue.component('comp',vue.extend({ template:`内容`}))三<template id='temp1'>内容</temp...原创 2019-11-06 22:46:04 · 124 阅读 · 0 评论 -
使用is切换组件和切换时的过渡效果
主要部分<transition> <component :is='type'></component></transition><transition><component>都是vue.js暴露出来的组件可以直接使用<!DOCTYPE html><html lang="en"><...原创 2019-11-06 00:08:39 · 207 阅读 · 0 评论 -
跨域请求后台的写法
异域请求数据,就是跨域请求。一般都是通过回调函数来获取json类型的数据但是,假如自己写的话,由于字符的拼接问题以及回的回调函数名称无法确定的问题,所以不方便书写,通常我们会在后台添加res.setHeader('')如果按照一般的写法写后台像这样后台 let data = []; let sql = 'SELECT products.*,users.username,use...原创 2019-11-04 22:55:46 · 306 阅读 · 0 评论 -
键盘修饰符与自定义指令
键盘修饰符主要用到这个属性 Vue.config.keyCodesvue自带的几个修饰符.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right<input type='text' name='ouhh' @keydown.f2='show' @keydown.v='show'><inp...原创 2019-11-04 11:12:59 · 107 阅读 · 0 评论 -
webpack的基本使用
介绍本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。初始化环境npm init 安装webpacknpm i webpack@3.12....原创 2019-10-26 23:12:00 · 106 阅读 · 0 评论 -
廖雪峰的koa2路由处理业务引入方法
原文:https://www.liaoxuefeng.com/wiki/1022910821149312/1099849448318080url2-koa/|+- .vscode/| || +- launch.json <-- VSCode 配置文件|+- controllers/| || +- login.js <-- 处理login相关URL| ||...转载 2019-10-26 15:20:50 · 687 阅读 · 0 评论 -
koa2框架中的async和await
在koa2框架我们经常能看到async和await,我当时第一次见,想我艹这是个啥东西。从平时的js里开始看,因为它时基于es6Promise的写法function pro(){ return '嘿嘿嘿'}console.log(pro()) // 嘿嘿嘿async function pro(){ return '嘿嘿嘿'}console.log(pro()) // 下图...原创 2019-10-26 10:05:26 · 458 阅读 · 0 评论 -
vue中axios和koa2的基本用法
koa2的作用和express都差不多,都是在common.js环境下运行都是用来构建服务器koa2npm init // 初始化npm install koa2 --save // 安装koa2框架npm install koa-router --save // 安装koa2中间件 axios(和ajax作用一样)npm install axios --save // 安装ax...原创 2019-10-25 00:46:18 · 2209 阅读 · 0 评论 -
Promise的概念
什么是Promisejs是一个单线程语言,Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改...原创 2019-10-24 12:50:08 · 119 阅读 · 0 评论 -
Vue自带的组件keep-alive
Vue中的所有的组件都是有声明周期的,从出生到消亡,一般要经历8个声明周期或者6个,声明周期就是钩子函数。出现的原因和使用的场景如果有一个组件我要重复使用,但是我要重复切换组件,那这个组件就不断的重复消亡和出生,这说上去就很麻烦,然后可能是Vue的开发者也觉得麻烦(这样很浪费内存,就算渲染的是虚拟DOM也很浪费),就出现了<keep-alive></keep-alive>...原创 2019-10-23 23:52:01 · 306 阅读 · 0 评论 -
vue-router导航守卫
导航守卫: 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。原创 2019-10-23 12:27:57 · 130 阅读 · 0 评论 -
vue-router基础
路由就是通过修改url地址来实现页面跳转路由原理: (1)传统开发方式 url改变后,立刻发生请求响应整个页面,有可能资源过多,传统开发会让页面出现白屏 (2) SPA Single Page Application 单页面应用 锚点值的改变后 不会立刻发送请求,而是在某个合适的时机,发起ajax请求, 局部改变页面的数据 主要是通过加载不同的组件是实现效果的 ...原创 2019-10-23 11:30:04 · 173 阅读 · 0 评论 -
Vue中watch、computed和methods的区别
watch和computed是对数据的监听 new Vue({ el:'#app', template:` <div> 1.{{msg}}|{{data1}}|{{data2}} <br/> ...原创 2019-10-22 18:58:38 · 3314 阅读 · 0 评论 -
vue基础2
ref和$refs及部分生命周期函数(钩子函数)ref把这DOM元素放到 this. $ref 对象中属性名就是ref=‘这里的值’因为选出的是DOM元素所以一般不建议使用<div id="app"> </div> <script src="vue/vue.js"></script> <script> ...原创 2019-10-21 16:40:09 · 81 阅读 · 0 评论 -
vue基础
vue的设计理念MVVM设计理念基本的指令v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少v-html: 元素的innerHTMLv-if : 判断是否插入这个元素,相当于对元素的销毁和创建v-else-ifv-elsev-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换...原创 2019-10-21 11:31:06 · 163 阅读 · 0 评论 -
vue中关于on的修饰符
修饰符前缀效果简述.passive&明确我们没有取消这个默认事件,可以优化事件的执行,明确我们没有取消这个默认事件.capture!执行事件冒泡时优先执行哪一个元素上的事件,执行完这个事件后,再开始从内到外冒泡.once~让浏览器知道我这个事件只执行一次.capture.once 或 .once.capture~!-.stop...原创 2019-10-18 18:00:52 · 283 阅读 · 0 评论