vue
文章平均质量分 59
weixin_44453127
这个作者很懒,什么都没留下…
展开
-
clipboard 实现复制 粘贴功能
<el-form-item label="ticketKey"> <span id="code">{{ baseForm.ticketKey }}</span> <span class="copy-link" data-clipboard-target="#code">复制</span></el-form-item><script>const clipboard = null;import Clipbo原创 2021-02-20 14:51:51 · 180 阅读 · 0 评论 -
elementui 树形控件 默认选中的子树显示颜色
elementui 树形控件 默认选中的子树显示颜色html<el-treev-if="isShowTree":data="data"ref="tree":props="defaultProps":highlight-current="true":current-node-key="this.nodeId"node-key="nodeId":default-expanded-keys="[this.nodeId]":default-checked-keys="[this.node原创 2020-09-30 16:14:56 · 1025 阅读 · 0 评论 -
vue 搜索关键词高亮显示
vue 搜索关键词高亮显示html<p class="message-title" v-html="item.msgTitle"></p>js// 匹配关键字正则let replaceReg = new RegExp(value, "g");// 高亮替换v-html值let replaceString = '<span style="color:#5184ff">' + value + "</span>"; //可以在style中设置文字颜色原创 2020-09-30 16:10:49 · 388 阅读 · 0 评论 -
elementui中 获取选择器组件 lable中的值
changeLocationValue(val) { let obj = {} obj = this.roleList.find(item => { return item.id === val }) let getName = '' getName = obj.name console.log(getName) this.dataForm.roleName = getName }changeLocationValue为el-select 中的 @ch.原创 2020-06-18 15:56:11 · 1827 阅读 · 0 评论 -
获取elementui中 联级选择器中的lable的值
handleChange() { var cityName = this.$refs['refHandle'].getCheckedNodes()[0].pathLabels[ this.$refs['refHandle'].getCheckedNodes()[0].pathLabels.length - 1 ] this.dataForm.areaName = cityName console.log(cityName) },handleChange为 el-cascad.原创 2020-06-18 15:52:13 · 638 阅读 · 1 评论 -
uniapp搭建微信小程序 ——创建项目
1、通过vue-cli创建vue create -p dcloudio/uni-preset-vue my-project2、选择模板3、运行uniappnpm run dev:mp-weixin4、微信小程序导入项目在项目中的dist——>dev——>mp-weixin5、在app.vue中的style内引入全局样式wxss@import './xxx.wxss'...原创 2020-05-18 16:45:45 · 896 阅读 · 0 评论 -
vue项目初始化工作
vue项目初始化工作1、在assets文件夹中新建 css、js、 img文件夹2、在css、js文件夹中新建reset.css文件、 rem.js文件、server.js文件reset.css地址rem.js地址serve.js地址3、在main.js中导入:import setDevice from './assets/js/rem'import './assets/css/r...原创 2020-03-12 16:22:55 · 136 阅读 · 0 评论 -
vue-cli3中解决axios跨域问题(以360壁纸为例)
vue-cli3中解决axios跨域问题(以360壁纸为例)一、先在vue项目文件夹里的根目录中新建 vue.config.js文件(与package.json同一级)二、在 vue.config.js文件中写入以下代码module.exports = { devServer: { proxy: 'http://cdn.apc.360.cn' //这里写入你要获取数据的...原创 2020-01-29 19:35:23 · 221 阅读 · 0 评论 -
vuex module总结
vuex module总结// 创建store文件夹 然后在store文件夹下创建对应的js文件// 在该js文件中引入对应的依赖文件import Vue from 'vue'import Vuex from 'vuex'import moduleA from 'moduleA所在的文件的地址'import moduleB from 'moduleB所在的文件的地址'Vue.use...原创 2020-01-15 15:39:50 · 91 阅读 · 0 评论 -
vuexState 总结
vuexState 总结安装vuex命令 npm install vuex --save使用的过程在vue项目的src文件夹下创建一个store文件在store文件中创建一个js文件在js文件中写入// 引入vuex并且在vue中使用import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 创建...原创 2020-01-15 10:37:14 · 98 阅读 · 0 评论 -
vuexMutations 总结
vuexMutations 总结mutationsvuex 改变状态的唯一方法 mutations中的方法不能直接调用写法const store = new Vuex.Store({ state:{ user:{ name: '', tel: '', id: '', ...原创 2020-01-15 10:36:06 · 92 阅读 · 0 评论 -
vuexGetters 总结
vuexGetters 总结getters写法getters方法是和state同一级别的方法getters相当于一个计算属性const store = new Vuex.Store({ state:{ user:{ name: '', tel: '', id: '', ...原创 2020-01-15 10:34:54 · 130 阅读 · 0 评论 -
vuexActions 总结
vuexActions 总结总结写法 import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) const store = new Vuex.Store({ state: { // 购物车数据 ...原创 2020-01-15 10:33:29 · 118 阅读 · 0 评论 -
vue 导航守卫
vue 导航守卫全局导航守卫const router = new VueRouter({ routes:[ { path: '/', name: '', component: 组件文件, // 路由独享守卫 beforeEnter: (to, fr...原创 2020-01-14 20:34:12 · 78 阅读 · 0 评论 -
vue 路由
vue 路由路由分为 编程式路由和声明式路由定义路由对象const router = new VueRouter({ routes:[ { path: '/', name: '', // redirect: '/index', 路由重定向的位置(意思就是要把页面定向到哪一个页面) ...原创 2020-01-14 20:32:59 · 103 阅读 · 0 评论 -
vue 创建组件的方式
vue 创建组件的方式//1.1 使用 Vue.extend 来创建全局的Vue组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性,指定了组件要展示的HTML结构// })// 1.2 使用 Vue.component('组件的名称', 创...原创 2020-01-10 20:19:22 · 71 阅读 · 0 评论 -
vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画)
vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2020-01-10 20:05:38 · 253 阅读 · 0 评论 -
vue 动画使用第三方库来实现
vue 动画使用第三方库来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2020-01-10 20:01:36 · 70 阅读 · 0 评论 -
vue 动画基础
vue 动画基础v-enter //这是一个时间点是进入之前,元素的起始状态,此时还没有开始进入。v-leave-to //是动画离开之后,离开的终止状态,动画已结束。v-enter-active //入场动画时间段v-leave-active //离场动画时间段示例 .v-enter, .v-leave-to { opacity: 0; ...原创 2020-01-10 19:59:43 · 64 阅读 · 0 评论 -
vue-resource 请求数据 基本使用方法
vue-resource 请求数据 基本使用方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2020-01-10 19:47:40 · 197 阅读 · 1 评论 -
vue 基本指令
vue 基本指令v-bind 可以绑定一个属性 这个属性可以是自带的属性也可以是自定义属性,可简写为 :v-on 事件 后面加上事件名,可简写为 @ 如 @click, @mouseover…v-for 循环 示例 <div v-for="(item,index) in arr" :key="index"> {{ item }} </div>...原创 2020-01-10 19:45:14 · 142 阅读 · 0 评论 -
vue生命周期
vue生命周期 1、vue生命周期 每一个组件都有自己的生命周期 beforeCreate 组件创建之前触发的钩子 这里还没有data所以无法更改data中数据 created 组件dom创建过程 beforeMount 组件创建完成但是还未渲染的钩子 mounted dom渲染完成的钩子 bef...原创 2020-01-10 19:15:27 · 58 阅读 · 0 评论 -
vue环境安装
vue环境安装脚手架(框架)(ui框架 项目框架)vue脚手架就是指的vue-cli1、安装脚手架的命令 `npm install -g @vue/cliyarn global add @vue/cli2、安装完 运行 vue -V 查看版本 如果能查看的到 证明安装成功了3、创建自己的一个项目 vue create 项目名称4、然后出现两个选项 第一个是默认选项 第二个是自定义选项...原创 2020-01-10 19:07:19 · 79 阅读 · 0 评论