VUE
文章平均质量分 54
VUE
敢问
书山有路勤为径,学海无涯苦作舟
展开
-
npm 发布 vue 插件 和 README.md文件
npm 发布 使用 跟新 vue 插件原创 2022-07-28 16:27:43 · 1285 阅读 · 0 评论 -
Vue项目部署,清理缓存
Vue项目部署,清理缓存原创 2022-07-14 11:36:03 · 519 阅读 · 0 评论 -
vue 项目中 第二次请求需要传入第一次请求返回的结果
vue 项目总结 请求相互依赖原创 2022-06-15 15:51:22 · 1003 阅读 · 0 评论 -
VUE+声网 屏幕共享 浏览器窗口 “停止共享”
vue+声网 直播之屏幕共享爱原创 2022-05-24 21:18:52 · 987 阅读 · 2 评论 -
vue-cli创建的项目 打包时 添加版本号并在页面显示版本号
vue-cli创建的项目 打包时 添加版本号并在页面显示版本号原创 2022-05-05 21:29:58 · 1768 阅读 · 0 评论 -
Vue 生命周期
官方定义:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会我们在写组件的时候会遇到一些问题,比如想让页面加载好了之后开启一个定时器,比如想页面初始化的时候就能请求一些后端数据渲染到页面中,之前的方法都需要有触发才能执行vue的实例从开始到结束有着不同的生命阶段,组成了vue的生命周期beforeC..原创 2021-06-02 23:07:23 · 671 阅读 · 8 评论 -
VUE 项目爬坑
Vue+elementui 循环后台返回的表单列表 校验和数据绑定问题多服务请求参数拼接报错问题原创 2021-05-30 11:08:16 · 288 阅读 · 3 评论 -
Vue-createElement源码解析
vue中 render函数实际上return 一个createElement函数对createElement函数进行简单解析<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con..原创 2021-02-23 22:06:45 · 1115 阅读 · 0 评论 -
Vue-render 函数
vue文件中的template内部的html 在编译的时候发生了什么?比如<template><div> <h1>我是首页</h1></div></template>template里面使用的模板是HTML语法组件,其实在vue中都会被编译为render函数,因为vue中采用的是虚拟的dom进行页面组件,优点是优化页面的加载重绘性能render函数基本使用例:创建Render.vue组件,注意如果要使原创 2021-02-23 21:54:37 · 576 阅读 · 0 评论 -
Object.defineProperty 基本使用
Object.defineProperty 该方法是 在一个对象上 定义一个新的属性,或者修改已有的属性,并返回这个对象Object.defineProperty 方法的触发创建input 和 span元素<body> <input type="text" id="input"> <span id="text"></span></body>获取input 和 spanvar inputVal = docum原创 2021-02-05 16:12:38 · 606 阅读 · 0 评论 -
Vue 分装element-ui table
element-ui 表格的表头代码是运用组件实现的 如果表格数据很多(很多列)则代码会显得特别冗余,这里模仿iview-ui 运用数据驱动表格,对element-ui进行封装封装之后element-ui table 显得非常简单,还可以拓展element-ui table中的其它功能1、创建link文件夹,里边创建一个linkData.jslinkData.js数据管理中心 存储所有的相关数据//引入方法import linkEnum from './methodsData'//引原创 2021-01-28 14:10:50 · 544 阅读 · 0 评论 -
Vue 封装grid布局
Grid布局博客地址Vue-iView-ui Grid布局代码有些 冗余,现在封装一套自己的grid布局 以 from表单为例第一种方法创建Grid 文件夹,创建Grid和GridItem 组件Gird.vue<template> <Form :label-width="80" class="grid" :style="style"> <slot></slot> </Form><...原创 2021-01-21 22:07:46 · 2672 阅读 · 0 评论 -
Vue-iView-ui Grid 栅格
基本使用iView-ui Grid栅格 官网官方介绍:我们采用了24栅格系统,将区域进行24等分,这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局,可以使页面排版美观、舒适。我们定义了两个概念,行row和列col,具体使用方法如下:使用row在水平方向创建一行 将一组col插入在row中 在每个col中,键入自己的内容 通过设置col的span参数,指定跨越的范围,其范围是1到24 每个row中的col总和应该为24如果写栅格的时候报下图错在package.js原创 2021-01-20 10:14:41 · 800 阅读 · 0 评论 -
Vue-i18n 国际化
基本使用安装 npm install --save vue-i18n创建lang 文件夹index.js中引入i18n并使用import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ // 设置当前语言 locale: 'zh', messages: { 'zh': { name: '..原创 2021-01-19 22:45:21 · 1844 阅读 · 0 评论 -
iview-ui 表格拓展
1、render 拓展iview-ui 官网安装npm install view-design --savemain.js中引入import Vue from 'vue'import App from './App.vue'//引入iviewUiimport iviewUi from 'view-design'import 'view-design/dist/styles/iview.css'Vue.use(iviewUi)Vue.config.productionT原创 2021-01-19 16:30:20 · 388 阅读 · 0 评论 -
element-ui 表格拓展
对表格数据的过滤:比如性别返回的是 0 和 1 ,所以需要对0和1 分别进行处理 渲染想要的结果table-colun提供了一个 slot 插槽功能,内容可以 拓展自定义内容<template slot-scope="Sex"> <div> {{getSex(Sex.row.sex)}} </div></template>例:APP.vue <template&...原创 2021-01-19 11:00:18 · 468 阅读 · 0 评论 -
Vue-element-ui-表单校验
Vue-element-ui基本使用element-ui 中文文档安装npm install --save -dev element-uimain.js中引入 并引入 cssimport Vue from 'vue'import App from './App.vue'//引入element-uiimport elementUi from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(el原创 2021-01-18 15:47:38 · 860 阅读 · 0 评论 -
***Vue-局部参数***
在new Vuex({})的时候,vuex的参数对象,除了可以罗列modules之外,还可以设置state,mutations,getters,actions,和之前设置的单一对象相同。store.jsimport Vuex from 'vuex'import Vue from 'vue'import news from './news.js'import sports from './sports.js'import user from './user.js'Vue.use(Vuex)原创 2021-01-17 17:30:04 · 172 阅读 · 0 评论 -
Vue-modules
单一模块:例import axios from 'axios'export default{ state:{ a:50 }, mutations:{ add(state,{a}){ state.a += a } }, getters:{ }, actions:{ addServe({commit}){ // conso原创 2021-01-17 10:46:33 · 650 阅读 · 0 评论 -
Vue-actions 跨域
Vuex actionsactions类似mutations,不同点在于:actions提交的是mutations,而不是直接改变状态。actions可以包含任意的异步操作actions是处理异步任务的 mutations是处理同步小案例:每点击一次按钮 怎加服务器服务器数字node服务:app.js//引入expressconst express = require('express') //创建app应用let app = new express()//处理get请求a.原创 2021-01-16 21:49:32 · 317 阅读 · 0 评论 -
Vue-cli 代理跨域 利用axios完成请求服务
利用nonde + vue 实现首先利用express服务处理请求任务安装expressnpm install --save -dev express创建app文件夹 > app.js 文件app.js文件//引入expressconst express = require('express') //创建app应用let app = new express()//处理get请求app.get('/add',function(req,res){ res.s.原创 2021-01-16 12:10:03 · 151 阅读 · 0 评论 -
vuex getters-ToDoList
Vuex的属性gettersVuex的getters其实就是全局的一个computedVuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算基本使用store.js中定义了一个list数组和newlist数组export default{ state:{ list:["东风","西风","南风","北风"],原创 2021-01-15 15:04:15 · 208 阅读 · 0 评论 -
Vuex-基本使用-图集展示
效果展示vuex基本使用Vuex是vue的数据管理容器、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式安装npm install --save -dev vuex 创建store文件夹,内部创建store.js文件 --------vuex的store就是管理vue的数据仓库 store.js export default { state: { a: 100 }, mutations: { }} ...原创 2020-12-29 10:27:21 · 490 阅读 · 0 评论 -
Vue-过度与动画
一、过度vue提供了 transition的封装组件所有关于过度的动画都是通过transition组件设置的几种能够能够过度的场景条件渲染 (使用v-if) 条件展示 (使用v-show) 动态组件 组件根节点基本使用<div> <button @click="show">显示隐藏</button> <transition> <div class="box" v-if="isSho..原创 2020-12-27 21:34:16 · 219 阅读 · 0 评论 -
Vue-实例属性 $attrs $listeners $refs $el
1、$attrs$attrs包含了父作用域中不作为prop被识别(且获取)的attribute绑定(class和style除外)。当一个组件没有声明prop时,这里会包含所有父作用域的绑定(class和style除外),并且通过v-bind="$attrs" 传入内部组件-----在创建高级别的组件时非常有用。简单说 $attrs就是能够获取父组件除了props传入的所有属性(除了class和style)...原创 2020-12-27 13:12:31 · 1255 阅读 · 1 评论 -
Vue-自定义指令
Vue.directive 自定义指令的入口基本使用app.vue 中设置一个h1标签 <h1 v-color='"red"'>自定义指令red</h1> <h1 v-color='"orange"'>自定义指令orange</h1> <h1 v-size='"60px"'>自定义指令 显示隐藏</h1>v-color、v-size 时自定义指令的名称,red orange 60px 是属性值在main....原创 2020-12-27 11:15:38 · 962 阅读 · 0 评论 -
Vue-插槽
1、匿名插槽Vue插槽 官方网站官方说明:vue实现一套内容分发的API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口。例:自定义btn创建btn.vue<template> <div> <div class="btn"> <slot>(默认样式)Default</slot> &l.原创 2020-12-26 12:38:52 · 212 阅读 · 2 评论 -
Vue-自定义插件
1、局部插件例:安装关于时间格式的插件 moment安装 npm install --save -devmoment app.vue引入 importmomentfrom"moment"<template> <div> <table> <tr> <th>姓名</th> <th>年龄</th> <th>...原创 2020-12-26 11:15:57 · 103 阅读 · 0 评论 -
Vue-过滤器filters
vue自定义过滤器filters是通过对数据的过滤从而实现对数据的优化,得到我们需要的数据内容例:对时间的过滤,从格林威治时间转换到日常时间2020-12-26<template> <div> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> &原创 2020-12-26 10:51:31 · 242 阅读 · 0 评论 -
vue-computed 商城购物车
computed计算属性作用是对数据计算和缓存,优点是可以提高性能基本使用<template> <div> <h1>methods:{{reversStr()}}</h1> <h1>methods:{{reversStr()}}</h1> <h1>methods:{{reversStr()}}</h1> <h1>computed:{{rev原创 2020-12-24 17:40:00 · 180 阅读 · 1 评论 -
vue-混入mixins
混入(mixins)提供了一种非常灵活的方式来分发vue组件的可复用功能,一个混入对象可包含任意组件选项,当组件使用混入对象是,所有混入对象的选项将被“”混合“进入该组件本身的选项例:创建一个混入对象 mixins.jsexport const MixIns = { data(){ return{ a:100 } }, methods:{ add(){ this.a++原创 2020-12-24 11:14:41 · 416 阅读 · 0 评论 -
vue-watch 百度搜索框(模拟)
例:<template> <div> <h1>{{a}}</h1> <button @click="add">++</button> </div></template><script>export default { data(){ return{ a:100 } }, methods:{原创 2020-12-21 15:02:12 · 633 阅读 · 0 评论 -
vue-修饰符
一、事件修饰符1.1、stop 修饰符-阻止事件冒泡<div class="outer" @click="outer"> <div class="center" @click="center"> <div class="inner" @click.stop="inner"></div> </div></div>与原生js类似event.stopPropagation()1.2self.原创 2020-12-20 12:25:00 · 345 阅读 · 2 评论 -
vue 基本指令 选项卡、调色板、微博发布框
一、选项卡<style> .box{ width: 600px; margin: 50px auto; border: 1px solid #333; } .head{ display: flex; } .head p{ width: 25%; text-align: center; line-height: 35px; margin: 0; padding: 0;原创 2020-12-18 21:26:45 · 362 阅读 · 1 评论 -
vue-v-bind动态属性和v-model双向绑定
一:v-bind:属性的作用是 将w3c属性变为动态属性,让属性具有动态能力1、image 的src属性 案例 简单轮播图<img :src="'images/'+url+'.jpg'" alt="">上下代码效果相同<img v-bind:src="'images/'+url+'.jpg'" alt=""> <div id="app"> <h1>{{url}}</h1> <i..原创 2020-12-18 17:29:29 · 467 阅读 · 1 评论 -
VUE基本指令v-html、v-text、v-cloak、v-once、v-pro、v-on
1、v-html、v-text、{{}}上面三种都是渲染文本的方法,使用场景的区别v-text和{{}}渲染结果类似,都是以文本类型进行渲染区别:1、{{}}在渲染结果之前,会有编译之前的文本显示,v-text没有这种现象2、{{}}更加灵活,中间是可以添加内容的,v-text只能渲染data中的数据,中间不允许插入内容 <h1 v-text = "a">数值不显示</h1> <h1 >数值是{{a}}---</h1>原创 2020-12-11 22:54:20 · 529 阅读 · 0 评论 -
VUE基本指令v-if v-show v-for
VUE指令原创 2020-12-11 16:10:26 · 1000 阅读 · 1 评论