vue基础备忘录
Ajaxguan
很菜的一名程序员。
展开
-
Elment ui 表单上滑 加载更多数据方法
【代码】Elment ui 表单滚动加载数据方法。原创 2024-04-19 09:20:05 · 341 阅读 · 0 评论 -
vue中 v-model 与 $emit(“input“,val) 子组件更改父组件绑定值
vue 中 v-model 绑定传值 子组件 可以通过 $emit("input",val) 对父组件 v-model 绑定值 进行更改。原创 2022-09-16 10:42:58 · 897 阅读 · 0 评论 -
vue 实现简单的瀑布流
效果图:代码:<template> <div class="km-ProductList"> <!-- 商品列表 --> <div class="commodity_list"> <div v-if="likeDatas.length > 0" class="km_dom_box"> <!-- 左边 --> <div style="float...原创 2020-06-19 10:15:50 · 788 阅读 · 0 评论 -
Vue自定义行数 文字向上滚动轮播效果
效果图 列表无限向上轮播<template><div class="marquee"> <div class="marquee_box" ref="marquee_box"> <ul class="marquee_list" :class="{marquee_top:animate}"> <li v...原创 2019-11-06 15:21:30 · 3785 阅读 · 4 评论 -
H5 在安卓下input下面按钮被顶上来解决方法
data () { return { clientHeight: document.documentElement.clientHeight }}mounted () { var n = navigator.userAgent if (n.indexOf('iPhone') <= -1) { window.onresize = ...原创 2018-10-19 16:14:25 · 1167 阅读 · 0 评论 -
FormData表单图片压缩、上传
// 图片上传// 使用方法 mounted () { uploadFile.upload(id (input的id), (item) => {})} methods: { document.getElementById(id) }const uploadFile = { upload: function (id, callback) { let file = null ...原创 2018-11-14 11:37:09 · 2067 阅读 · 0 评论 -
vue进入页面自动获取input框焦点
template里面<input v-focus type="text"> 全局注册 我放在utils.js里面import Vue from 'vue'// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { ...原创 2018-11-20 10:37:53 · 6378 阅读 · 0 评论 -
vue移动端调试工具——vconsole
vue移动端调试工具——vconsole1.下载 vconsolenpm install vconsole 2.在 main.js文件中引入// main.jsimport Vconsole from 'vconsole'const vConsole = new Vconsole()Vue.use(vConsole)3.使用效果 出现 vConsole按钮...原创 2019-02-22 17:52:32 · 1340 阅读 · 0 评论 -
Vue刷新、跳转页面的数据保存方法: sessionStorage + Object.assign()
直接上代码跳页面时,保存当前Data的数据 methods: {// 一、 // 跳转页面 Goxxx () { // 保存当前页面上data数据 sessionStorage.setItem('data', JSON.stringify(this.$data)) this.$router.push('/XXX') } ...原创 2019-03-18 16:48:29 · 3957 阅读 · 0 评论 -
vue微信静默登录,获取opendID
在src/config里 创建 wx-getOpendId.jsimport Vue from 'vue'// 获取getOpendIDconst wxGet = () => { Vue.axiosGet(Vue.api.weixinPublicLoginPlugin, {code: WXcode}).then(res => { if (res.code ...原创 2019-07-26 17:11:31 · 3406 阅读 · 3 评论 -
vue接入环信客服
index.html 添加<body> <script src='//kefu.easemob.com/webim/easemob.js'></script></body>方法: methods: { // 联系客服 contactKY () { window.easemobim = windo...原创 2019-08-23 18:44:28 · 1374 阅读 · 0 评论 -
Vue的formData图片上传
import Vue from 'vue'/** * 图片上传 * 已注入所有Vue实例, * template模板里调用 $uploadFile(id) * 组件方法里调用 this.$uploadFile(id) */const uploadFile = (id) => { let promise = new Promise((resolve, reject) =&...原创 2018-09-30 11:39:18 · 4152 阅读 · 0 评论 -
vue移动端城市三级联动组件
先看效果图以下组件代码<template> <div class="address"> <div class="addressboxbg" @click="cancel"></div> <div class="addressbox"> &原创 2018-09-30 10:52:47 · 6454 阅读 · 13 评论 -
store文件Vuex的使用
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 首先声明一个状态 stateconst state = { name: ''}// 然后给 actions 注册事件处理函数,当这个函数被触发时,将状态提交到 mutaions中处理const actions = { increment: ({ commit }) =>...原创 2018-04-18 10:39:01 · 575 阅读 · 0 评论 -
vue的$refs使用
<template> <div class="uploadBtn" @click="uploadBtn">上传</div> <input type="file" style="display: none;" ref="uploadBtn" id="contract"/>&原创 2018-04-19 16:01:58 · 853 阅读 · 0 评论 -
vue生成二维码
下载二维码生成插件npm install --save qrcode2<template> <header class="header"> <button @click="qrcodesc()">二维码生成</button> <div id="qrcode">二维码位置</原创 2018-05-11 11:48:27 · 3421 阅读 · 1 评论 -
数组去重方法
ES5let arr = [2, 4, 34, 4, 2, 2, 4, 5, 6, 3, 2]var removeDuplicates = function(nums) { var obj = {} // 用于判断 for(var i = 0; i < nums.length; i++) { if (!obj[nums[i]]) { // 判断 防止下一次...原创 2018-07-11 10:08:53 · 263 阅读 · 0 评论 -
vue 非父子传值
挂载方法 **main.js**let bus = new Vue()Vue.prototype.bus = bus 组件传送**header组件**<template> <header @click="changeTitle">{{title}}</header></template><script>...原创 2018-07-31 11:50:55 · 245 阅读 · 0 评论 -
vue子传父 接收value与index
子组件 addNum () { this.$emit('TotalNum', 'addNum') }<commodity-list :datainfo="item" @TotalNum="TotalNum($event, index)"></commodity-list>methods: { TotalNum (val, ind...原创 2018-08-22 14:24:17 · 713 阅读 · 0 评论 -
vue绑定值与字符串拼接两种写法
<cell :title="`当前门店:${item.Storename}`" link="/component/radio" :inline-desc="'门店地址:' + item.Storeaddess"></cell>第一种:title="`字符串${xx}`"第二种:title="'字符串' + xx" ...原创 2018-08-22 17:58:56 · 50720 阅读 · 0 评论 -
vue在data引入本地图片的两种方法
第一种<template> <img :src="imgsrc"></template><script>export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } }...原创 2018-08-22 18:13:31 · 17588 阅读 · 1 评论 -
vue使用js-xlsx插件导入Excel表格数据
import Vue from 'vue'import XLSX from 'xlsx'/** * 导入ex表格 得到json数据 * 已注入所有Vue实例, * template模板里调用 $importf * 组件方法里调用 this.$importf * 例:<input type="file" id="file22" @change="importf('file22...原创 2018-09-18 11:15:06 · 7454 阅读 · 0 评论 -
Vue 父组件获取数据数据,子组件第一次props获取不到
原因:data数据初始化为空,由于ajax是异步的,加载子组件时,请求数据还没赋值,就会把data里面空的数据给传过去方法一方法二推荐使用方法二...原创 2018-10-13 14:47:47 · 13101 阅读 · 7 评论 -
vue 子传父组件
子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件<component-a @child-say="listen"></component-a><p>Do you like me? {{childWords}}</p> methods: { listen: function (value){...原创 2018-04-17 11:25:14 · 523 阅读 · 0 评论