Vue2
项目地址:https://github.com/skywalk94/vue2-demo.git
明知山_
这个作者很懒,什么都没留下…
展开
-
Vue中set方法操作数组
let list = [1,2,3,4,5]我定义一个数组list我想通过下标改变数组的值this.list[0] = 2这种方法是不行的我们可以采用set方法第一个参数是操作的数组第二个参数是数组下标第三个参数是修改后的值this.$set(list, 0, "2"); 因为Vue2是通过object.defineproperty()来劫持数据,无法直接劫持数组我们知道操作数组方法有'push','pop','shift','unshift','splice','sort',原创 2021-04-16 11:49:05 · 7628 阅读 · 0 评论 -
Vue文字数组向上翻动
<template> <div class="marquee" @mouseenter="enterMar()" @mouseleave="leaveMar()"> <div :class="{ 'marquee-up': isUp }"> <p class="marquee-text" v-for="(item, index) in dataList" :key="index"> {{ item }} &.原创 2021-04-13 16:33:04 · 269 阅读 · 2 评论 -
vue使用provide和inject实现父组件与子孙组件传值
父组件通过provide提供数据,子组价/子孙组件使用inject注入数据父组件<template> <div> <navbar></navbar> </div></template><script>import navbar from "../components/navbar";export default { components: { navbar, }, provi原创 2021-03-20 16:14:34 · 586 阅读 · 0 评论 -
Vue中computed和watch示例区别
computed示例<template> <div class="box"> <input type="text" v-model="keyCode" placeholder="筛选" /> <ul> <li v-for="(item, index) in filterCode" :key="index">{{ item }}</li> </ul> </div>&l原创 2021-03-14 16:38:39 · 197 阅读 · 0 评论 -
Vue函数调用自定义组件
无需导入vue文件,一段js调用自定义组件components文件夹新建loading文件夹在里面存放index.js和index.vueindex.vue<template> <transition name="fade"> <div class="load" v-if="isLoad"> <div class="load-pop"> <div class="load-icon"></div.原创 2021-01-25 16:28:56 · 951 阅读 · 1 评论 -
Vue子组件监听父组件传递值的变化
这是要从父组件接收的值 props: { active: { type: [String, Number], default: 0, } },使用watch对active进行监听值变化会触发handler方法 watch: { active: { immediate: true, handler(value) { this.isAct = value原创 2021-01-18 11:51:06 · 2150 阅读 · 0 评论 -
vue导入外部css不污染全局
导入外部css<style src="./main.css" scoped></style>导入外部less需要先安装less插件npm install less less-loader <style src="./main.less" lang="less" scoped></style>原创 2020-12-11 11:05:05 · 814 阅读 · 0 评论 -
vue用mixin实现共用数据方法
在src目录新建一个mixins文件夹,里面新建index.js文件这里写公共的值和方法export const mixin = { data() { return { mixinData: 123 } }, methods: { mixinFunction() { console.log("这是来自mixin的方法") } }}在组件中引入<te原创 2020-11-27 09:55:17 · 1226 阅读 · 0 评论 -
vue实现动态展示波浪效果
效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-09-10 17:16:11 · 3367 阅读 · 1 评论 -
vue简单实现九宫格抽奖
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>九宫格抽奖</title> &l.原创 2020-09-15 17:44:16 · 1390 阅读 · 0 评论 -
Vue实现pc/H5弹窗拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>vue拖拽</title> <原创 2020-08-31 16:16:40 · 525 阅读 · 0 评论 -
Vue监听文本框实时输入限制输入长度
<textarea v-model="value" placeholder="输入内容" @input="inputArea()"></textarea> new Vue({ el: ".box", data: { value: "", maxLength: 100, currentLength: 0 }, methods: { ..原创 2020-07-02 15:58:21 · 2032 阅读 · 0 评论 -
Vue用keep-alive实现页面缓存
App.vue<template> <div id="app"> <keep-alive :exclude="excludePage"> <router-view /> </keep-alive> </div></template><script>expor...原创 2020-05-03 11:10:05 · 323 阅读 · 0 评论 -
Vue处理页面预加载显示{{}}的问题
<style> [v-cloak]{ display: none; } </style> <div v-cloak>{{active}}</div>原创 2019-12-20 16:33:14 · 1773 阅读 · 0 评论 -
Vue实现移动端购物车功能
页面运用到了vant的Stepper 步进器来实现商品的增加和减少<template> <div class="box"> <div class="block"> <div class="shop" v-for="(item,index) in orderData" :key="index"> <di...原创 2019-11-25 14:29:58 · 2131 阅读 · 1 评论 -
Vue实现微信公众号授权登录
新建个文件wechatAuth.jsconst queryString = require('qs')// 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),// snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)const SCOPES = ['...原创 2019-10-24 09:26:08 · 6827 阅读 · 14 评论 -
Vue上传头像到服务器加回显照片
<style>.update { position: relative; width: 200px; height: 200px;}.update img { width: 100%; height: 100%; border-radius: 50%;}.update input { position: absolute; top: 0; ...原创 2019-10-19 18:47:16 · 814 阅读 · 0 评论 -
Vue动态赋值video视频
<video id="myvideo" ref="video" controls autoplay webkit-playsinline playsinline x5-playsinline @play="getplay()" ></video>...原创 2019-10-19 10:38:34 · 2492 阅读 · 0 评论 -
Vue里v-for循环双层数组
<div class="one" v-for="(item,index) in course_list" :key="index"> <div class="banner"> <div class="line" v-for="(rol, i) in item.course_list.slice(0,5)" :key="i">...原创 2019-10-17 13:29:37 · 6854 阅读 · 0 评论 -
Vue根据数据字段大小进行排列
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-17 12:54:42 · 2346 阅读 · 0 评论 -
Vue点击切换样式
先看效果图这里直接是上代码<template> <ul> <li :class="[index == status ? 'bechoice' : '']" v-for="(item,index) in list" :key="index" @click="choice(index)"> {{item.text}} &l...原创 2019-07-22 16:19:05 · 4640 阅读 · 0 评论 -
Vue页面中引用自定义组件
比如我想引用一个外部的头部导航的组件,因为这个导航在很多地方都用到,避免每个页面都写一遍首先 我先在components这里创建一个navmenu的组件这里是组件的内容,引用了element ui<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pan...原创 2021-02-03 10:09:03 · 2044 阅读 · 0 评论 -
Vue实现输入框自动聚焦
官方文档自定义指令 Vue.js <textarea type="text" placeholder="说些什么吧" v-focus></textarea> directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }},...原创 2019-08-12 17:41:13 · 6470 阅读 · 0 评论 -
Vue实现push数组并删除方法
最近在用Vue做评论互动的时候用到了push,现在做一个简易的demo<template> <div> <ul v-for="(item , index) in list" :key="index"> <li>{{item.serial}}</li> </ul> <input t...原创 2019-08-17 11:35:00 · 17378 阅读 · 0 评论 -
Vue使用props和emit父子组件通信
创建一个子组件<template><div> <h2>{{title}}</h2></div></template><script>export default { data() { return { }; }, methods: { }, mounted() {...原创 2019-08-27 18:15:22 · 256 阅读 · 0 评论 -
Vue使用ref父子组件通信
创建一个子组件<template><div><div @click="getparent"></div></div></template><script>export default { data() { return { msg:'这是子组件的数据' }; }, ...原创 2019-08-28 14:41:01 · 544 阅读 · 0 评论 -
Vue使用eventBus实现兄弟组件传值
在src下新建个文件夹建个js,在这里我取名为VueEvent.js,在store文件夹下,在这个文件中实例化vueimport Vue from 'vue';var VueEvent = new Vue()export default VueEvent;分别把它引入到tab.vue和home.vue中,注意它们有个共同的父组件▼▼home.vue<template> ...原创 2019-08-28 16:17:49 · 357 阅读 · 0 评论 -
Vue设置浏览器的标题title和图标icon
效果图设置浏览器的title<template> <div>hello world</div></template><script>export default { data() { return {}; }, mounted: function() { //使用钩子函数挂载 documen...原创 2019-08-29 16:01:01 · 2650 阅读 · 0 评论