vue
orange--c
记录美好生活
展开
-
Vue框架鼠标经过添加类
在使用vue框架时,写js代码会习惯性用原生html里面的写法,获取dom元素,然后循环绑定事件,今天来说说vue框架的事件(dom元素的操作)文章简介:在vue中使用v-on来进行事件绑定,简写@,循环使用v-for,并且一起把事件绑定了,不用像原生js里,获取元素,再循环绑定事件,方便了很多的同时,也会伴随许多未知的用法,今天来讲讲怎么给鼠标经过的元素加上一个类,(加上红色边框)主体内容:先看代码 <ul> <li v-fo原创 2021-09-02 23:59:00 · 697 阅读 · 0 评论 -
better-scroll插件遇到的问题总结
问题1:使用了组件但是页面无法滚动,也没有报错解决办法:给content加上一个height 比wrapper高的高度就解决了,也能解决刷新无法拖动问题<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> </div>问题2:使用了bet原创 2021-07-19 15:57:26 · 276 阅读 · 0 评论 -
betterscroll遇到的各种坑
1.首先安装better-scroll npm install better-scroll --sava2在需要使用的页面,导入 import BScroll from '@better-scroll/core'3.然后在script代码中,加入<script> import BScroll from '@better-scroll/core' export default { data() { return { scroll: null原创 2021-07-19 14:17:42 · 433 阅读 · 1 评论 -
Vue关于swiper轮播图组件的小细节
在写项目过程中遇到swiper组件小圆点怎么都不显示,解决方法:1.首先先下载swiper组件 npm install vue-awesome-swiper@2.6.7 --save@后面版本号可以删掉,默认最新版2.在main.js中引入import VueAwesomeSwiper from 'vue-awesome-swiper'import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'//这个好像会不太一原创 2021-07-15 19:16:34 · 185 阅读 · 0 评论 -
记录vue需要安装的loader和plugin
1.全局安装webpack 打包工具npm install webpack webpack-cli -g2.解析css 和 展示样式的loader --save-dev开发时需求npm install css-loader style-loader --save-dev 3.解析url 背景图片或者需要地址的时候npm install url-loader --save-dev4.解析.vue文件 模块化 组件npm install vue-loader vue-te原创 2021-06-25 21:25:50 · 978 阅读 · 0 评论 -
Vue父子组件传递/子传父
1.子传父的意思就是,,子组件内容传给父组件,,使父组件可以随时使用子组件传来的数据,使用方法为:自定义函数1、首先我们来做一个仿淘宝侧边栏商品,点击或者鼠标移动到上面出现内容商品案例2、以上面这个图片为例,我们来讲一下组件传递的子传父2.1我们将子组件和父组件分开先,挨个讲 先来看看子组件代码<!-- 子组件 --><template id="cpn"> <div> <h1>{{ctitle}}</h1>原创 2021-06-23 14:30:52 · 738 阅读 · 0 评论 -
Vue父子组件传递/父传子
Vue父传子,意思就是子组件可以从父组件里拿数据使用1.先看代码,讲解在下面<body>//父组件<div id="app"> <cpn3 :ctitle="title"></cpn3></div>//子组件<template id="cpn3"> <div> <h1>{{ctitle}}</h1> <p>orange</原创 2021-06-23 00:17:27 · 221 阅读 · 0 评论